如何在TypeScript React项目的Jest测试中解决“React is not defined”错误？

兄弟，我完全懂你的烦恼——Jest测试报React is not defined，加了import React from 'react'又触发TypeScript的“未使用变量”警告，用// @ts-ignore又总觉得是在“掩耳盗铃”，对吧？我之前在TS React项目里也踩过这个坑，给你几个干净、合规的解决方案，不用压制任何错误：

方案一：配置自动JSX转换（最推荐，一劳永逸） #

这个问题本质是React 17+推出的自动JSX转换特性：生产构建和TS编译已经不需要显式导入React了，但Jest的测试环境可能还没适配这个特性，导致测试时找不到全局的React引用。

你只需要同步配置TS和Jest支持自动JSX转换：

1. 更新tsconfig.json
   在compilerOptions里设置JSX转换模式为自动：

   {
     "compilerOptions": {
       "jsx": "react-jsx", // 开发环境可以用react-jsxdev，获得更友好的调试信息
       "lib": ["dom", "es2017"],
       "module": "esnext",
       "target": "es6"
     },
     "include": ["src/**/*", "src/**/*.test.tsx"]
   }
   

2. 配置Jest适配新JSX转换
   如果用ts-jest作为测试转换器，在jest.config.js里确保预设和TS配置关联：

   module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'jsdom', // 必须用jsdom环境，模拟浏览器DOM
     transform: {
       '^.+\\.tsx?$': 'ts-jest'
     },
     globals: {
       'ts-jest': {
         tsconfig: 'tsconfig.json' // 也可以单独给测试用tsconfig.test.json，和生产配置区分
       }
     }
   };
   

   如果用Babel，在babel.config.json里开启React自动运行时：

   {
     "presets": [
       ["@babel/preset-react", { "runtime": "automatic" }],
       "@babel/preset-typescript"
     ]
   }
   

   配置完成后，不管是生产构建还是Jest测试，都不需要显式导入React，两个问题都能一次性解决。

方案二：全局注入React（适合不想改动JSX转换的场景） #

如果你暂时不想调整JSX转换配置，可以在Jest的全局环境中注入React，这样所有测试文件都能直接使用React，不用每个文件都手动导入：

1. 创建测试启动文件，比如src/setupTests.ts：

   import * as React from 'react';
   // 把React挂载到全局对象上，让所有测试文件都能访问
   global.React = React;
   

2. 在jest.config.js里指定这个启动文件，让Jest在测试前自动执行：

   module.exports = {
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['./src/setupTests.ts']
   };
   

   或者更简单，直接在jest.config.js的globals里配置：

   module.exports = {
     testEnvironment: 'jsdom',
     globals: {
       React: require('react')
     }
   };
   

方案三：临时兼容方案（不推荐，仅应急用） #

如果以上方案都暂时无法实施，你可以用一个无副作用的方式消除TS警告，同时保留React导入：

import React from 'react';
// 仅用于消除TS未使用变量警告，不影响运行逻辑
void React;

这个方式比较hack，只是临时救急，还是优先推荐前两个方案。

内容来源于stack exchange