I am trying to set up Jest testing for a react-admin application.
App.test.jsx:
import '@testing-library/jest-dom';
import { AdminContext, Resource } from 'react-admin';
import { render, renderHook } from "@testing-library/react";
import TestRenderer from 'react-test-renderer'
import { App } from "../App";
import { dataProvider } from '../dataProvider';
import { UserList } from '../components/users/UserList';
test('demo', () => {
expect(true).toBe(true);
});
test('Testing render functionality of homepage.', async () => {
render(
<AdminContext>
<Resource name="users" list={UserList} />
</AdminContext>
);
});
UserList.tsx:
import { List, Datagrid, TextField, EmailField } from "react-admin";
export const UserList = () => (
<List>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="name" />
<TextField source="username" />
<EmailField source="email" />
<TextField source="address.street" />
<TextField source="phone" />
<TextField source="website" />
<TextField source="company.name" />
</Datagrid>
</List>
);
package.json:
{
"name": "client",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"type-check": "tsc --noEmit",
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
"format": "prettier --write ./src",
"test": "jest"
},
"dependencies": {
"jest-environment-jsdom": "^29.7.0",
"ra-data-json-server": "^4.16.0",
"react": "^18.2.0",
"react-admin": "^4.16.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^29.5.12",
"@types/node": "^18.16.1",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@types/react-test-renderer": "^18.0.7",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"@vitejs/plugin-react": "^4.0.1",
"babel-jest": "^29.7.0",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.7.0",
"prettier": "^2.8.8",
"react-test-renderer": "^18.2.0",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"typescript": "^5.1.6",
"vite": "^4.3.9"
}
}
I ran the two tests in App.test.tsx, the first is to make sure Jest is working, and it passes without issue. I expected the second test to pass in the same way, but instead, I'm getting this:
TypeError: Cannot read properties of null (reading 'useMemo') when hovering the issue in VS Code's intellisense, as well as this warning/error message in the console:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
jest.config.ts:
module.exports = {
preset: "ts-jest",
testEnvironment: "jest-environment-jsdom",
coverageThreshold: {
global: {
statements: 55,
branches: 55,
functions: 55,
lines: 55
}
},
transform: {
"^.+\\.tsx?$": "ts-jest"
},
rootDir: "src",
moduleNameMapper: {
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js",
}
};
I have looked everywhere for a fix to this error, but only found examples either using redux and/or they were trying to test a hook; I am not trying to test a hook, I am trying to test whether or not the component renders. I have also explored the use of the TestRenderer from 'react-test-renderer', but this only returns an object that returns null when toJSON() is called.