TypeScript React项目Jest测试import语句报错无法运行如何解决

1. 修正jest.config.js配置 #

你当前配置的transformIgnorePatterns完全反向，错误忽略了src下几乎所有文件的转译，这是核心错误。修改后配置如下：

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  // 新增测试环境为jsdom适配React浏览器场景
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  // 修改为仅忽略node_modules下的文件转译
  transformIgnorePatterns: ["node_modules/"],
  globals: {
    'ts-jest': {
      diagnostics: false,
      // 覆盖tsconfig配置，将ES模块转为CommonJS适配Jest环境
      tsconfig: {
        compilerOptions: {
          module: "CommonJS"
        }
      }
    }
  },
  moduleNameMapper: {
    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less)$": "<rootDir>/src/test/resourceFileMock.ts",
  }
};

2. 补全babel.config.js配置 #

需要新增React预设，同时指定@babel/preset-env的目标环境为当前Node版本：

module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-react',
        '@babel/preset-typescript'
    ]
}

3. 安装缺失依赖 #

如果运行时提示缺少依赖，执行以下安装命令：

npm i @babel/preset-react @babel/preset-typescript jest-environment-jsdom -D

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