使用ts-jest移除React导入后测试报错：'React'为UMD全局但当前是模块

问题根源 #

移除import React语句后测试报错，是因为当前ts-jest配置的JSX模式为旧版的react，该模式要求必须显式导入React才能使用JSX语法；而React 17及以上版本支持的自动JSX转换功能，需要对应使用react-jsx或react-jsxdev模式。

具体修复步骤 #

• 调整jest.config.js的JSX配置
  把ts-jest配置块中的jsx值从react修改为react-jsx：

  module.exports = {
    preset: 'ts-jest',
    rootDir: 'tests',
    globalSetup: '<rootDir>/jest.setup.js',
    globalTeardown: '<rootDir>/jest.teardown.js',
    globals: {
      'ts-jest': {
        tsconfig: {
          jsx: 'react-jsx', // 此处修改为react-jsx
        },
      },
    },
  };
  

• 同步项目tsconfig.json配置
  确保项目根目录的tsconfig.json中compilerOptions的jsx配置与jest保持一致，避免开发和测试环境差异：

  {
    "compilerOptions": {
      // 其他配置项...
      "jsx": "react-jsx"
    }
  }
  

• 确认React版本（可选）
  保证你的React版本在17及以上，这是启用自动JSX转换的必要前提，若版本过低建议升级。

额外提醒：如果测试代码中存在直接调用React全局变量的逻辑（比如React.useEffect、React.memo），即使开启自动JSX转换，仍需手动导入React，或者在jest全局配置中注入React全局变量。

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