React/TypeScript项目Jest测试提示需jsdom环境后续报global未定义

解决方案 #

步骤1：安装缺失依赖

Jest 27及以上版本不再内置jsdom测试环境，需要单独安装：

npm install --save-dev jest-environment-jsdom

步骤2：修改jest.config.js配置

在配置文件中补充测试环境相关配置，不需要在每个测试文件顶部加环境注释：

module.exports = {              
  roots: ["<rootDir>/src"],          
  // 新增下面两行配置
  testEnvironment: "jsdom",
  testEnvironmentOptions: {
    url: "http://localhost:3000"
  },
  transform: {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.svg$": "<rootDir>/svgTransform.js",
    "^.+\\.css$": "<rootDir>/cssTransform.js"
  },       
  setupFilesAfterEnv: [        
    "@testing-library/jest-dom/extend-expect"
  ],    
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",    
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};

步骤3：解决global未定义报错

如果修改完配置后仍提示ReferenceError: global is not defined，在src目录下新建jest.global.js文件，写入以下内容：

globalThis.global = globalThis;

然后在jest.config.js的setupFilesAfterEnv数组中新增这个文件的路径：

setupFilesAfterEnv: [        
  "@testing-library/jest-dom/extend-expect",
  "<rootDir>/src/jest.global.js"
],

可选简化方案

你当前项目使用了react-scripts，它已经内置了完整的Jest+React Testing Library配置，不需要自己维护jest.config.js。你可以直接删除项目里的jest.config.js，然后把package.json中的test脚本修改为：

"scripts": {
  "test": "react-scripts test",
  "test:watch": "react-scripts test --watch"
}

修改后直接运行测试即可，无需额外配置。

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