测试react-admin应用时,React Testing Library render()抛出useMemo错误
React Admin Jest测试环境渲染报错:TypeError: Cannot read properties of null (reading 'useMemo')
我在给react-admin应用搭建Jest测试环境时,第一个验证Jest正常工作的测试用例能顺利通过,但测试主页渲染功能时,用React Testing Library的render方法渲染包裹<Resource>的<AdminContext>组件,抛出错误:TypeError: Cannot read properties of null (reading 'useMemo'),同时控制台提示无效Hook调用的警告。试过react-test-renderer也没解决,没找到适配方案。
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" } }
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", } };
内容的提问来源于stack exchange,提问作者Devon Caron
相关产品推荐
相关产品推荐

