Jest+React运行测试报错SyntaxError: Cannot use import statement outside a module求助

修复步骤 #

导致该报错的核心原因是测试文件中的ES模块语法未被正确转换为CommonJS语法，Node运行环境无法识别，结合你的配置可按以下方案操作：

• 调整Jest配置的transform规则，删除重复匹配ts/tsx的冗余规则，避免babel转换覆盖ts-jest的逻辑，修改jest.config.js中transform字段为如下内容：

transform: {
  '^.+\\.(ts|tsx)?$': 'ts-jest',
  '^.+\\.(js|jsx|mjs)$': './node_modules/babel-jest',
  '^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
  '^(?!.*\\.(js|jsx|mjs|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js',
},

• 修正ts-jest的配置参数，若你使用的是27及以上版本的ts-jest，全局配置中的tsConfigFile参数已废弃，需替换为tsconfig：

globals: {
  'ts-jest': {
    tsconfig: 'tsconfig.test.json',
  },
},

• 修改package.json中的test命令，显式指定加载自定义Jest配置文件，避免react-app-rewired默认使用react-scripts内置配置：

"scripts": {
  "test": "react-app-rewired test --config jest.config.js --no-watchman --watchAll=false",
}

• 可选优化：若tsconfig.test.json中开启了isolatedModules配置，可将其设置为false，此时可以直接删除测试文件末尾的export {}语句，也不会触发TypeScript语法校验报错。

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