React测试报错ReferenceError: global is not defined及依赖冲突求助

问题说明 #

我是React和React Testing新手，跟着一门过时的Udemy旧课程学习。已经完成依赖更新，项目能正常构建启动，但测试全部失败，报错如下：

Test suite failed to run
    ReferenceError: global is not defined
      at Object.<anonymous> (node_modules/graceful-fs/graceful-fs.js:92:1)
      at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:10:24)
      at Object.<anonymous> (node_modules/expect/build/index.js:35:48)

执行npm list jest后发现Jest版本存在冲突：

$ npm list jest
react-testing@0.1.0 C:\Users\636309\Notes\React\ReactTesting\Udemy2HourCourseReactTesting\react-testingCopy
├─┬ react-scripts@5.0.1
│ ├─┬ jest-watch-typeahead@1.1.0
│ │ └── jest@27.5.1 deduped invalid: "^29.0.0" from node_modules/ts-jest
│ └── jest@27.5.1 invalid: "^29.0.0" from node_modules/ts-jest
└─┬ ts-jest@29.2.4
  └── jest@27.5.1 deduped invalid: "^29.0.0" from node_modules/ts-jest

npm error code ELSPROBLEMS
npm error invalid: jest@27.5.1 C:\Users\steve\Notes\React\ReactTesting\Udemy2HourCourseReactTesting\react-testingCopy\node_modules\jest
npm error A complete log of this run can be found in: C:\development\npmCache\_logs\2024-08-10T03_18_02_069Z-debug-0.log

当前package.json配置：

{
  "name": "react-testing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@types/node": "^22.1.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "axios": "^1.7.3",
    "invariant": "^2.2.4",
    "levenary": "^1.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "ts-jest": "^29.2.4",
    "typescript": "~5.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jest-environment-jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx,js,jsx}",
      "!src/serviceWorker.ts",
      "!src/index.tsx",
      "!src/**/*.d.ts"
    ]
  }
}

解决步骤 #

1. 修复Jest与ts-jest版本冲突 #

react-scripts@5.0.1自带jest@27.5.1，但你安装的ts-jest@29.2.4要求jest@^29.0.0，版本不兼容导致冲突。需降级ts-jest到适配jest@27的版本：

npm uninstall ts-jest
npm install ts-jest@27.1.5 --save-dev

2. 降级测试库适配Jest版本 #

@testing-library/jest-dom@6.x需要jest@28+，与当前jest版本不兼容，需降级：

npm uninstall @testing-library/jest-dom
npm install @testing-library/jest-dom@5.16.5 --save-dev

同时，@testing-library/react@16.x和@testing-library/user-event@14.x也需降级到适配jest@27的版本：

npm uninstall @testing-library/react @testing-library/user-event
npm install @testing-library/react@12.1.5 @testing-library/user-event@13.5.0 --save-dev

3. 解决global is not defined报错 #

在src目录下创建setupTests.ts文件，添加全局变量映射：

(globalThis as any).global = globalThis;

然后在package.json的jest配置中引入该文件：

"jest": {
  "collectCoverageFrom": [
    "src/**/*.{ts,tsx,js,jsx}",
    "!src/serviceWorker.ts",
    "!src/index.tsx",
    "!src/**/*.d.ts"
  ],
  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.ts"]
}

4. 清理依赖并重新安装 #

删除现有依赖文件后重新安装，确保版本完全适配：

rm -rf node_modules package-lock.json
npm install

最后重新运行测试：

npm test

内容的提问来源于stack exchange，提问作者Steve