You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

测试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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.30 01:44:52