Jest报错SyntaxError: Cannot use import statement outside a module求解决方案

你当前的配置存在两个核心问题：1. 同时存在babel.config.js和.babelrc两份Babel配置，会出现配置冲突、覆盖的问题；2. Jest默认不会转译node_modules下的模块，你剩下两个无法识别的导入大概率是属于node_modules下的ES规范模块，没有被Babel转译成CommonJS规范导致报错。

步骤1：合并Babel配置 #

Babel 7+中babel.config.js是项目级全局配置，适配Jest转译node_modules模块的场景，.babelrc为局部目录配置，容易出现作用范围不足、配置冲突的问题。因此删除项目根目录的.babelrc文件，将所有Babel配置统一到babel.config.js中：

module.exports = {
  presets: [
    "@babel/preset-react", 
    "@babel/preset-typescript",
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs"
        }
      }
    ]
  ]
}

步骤2：修正Jest配置 #

修改jest.config.js，补全正则转义符，新增transformIgnorePatterns配置，将你无法识别的两个模块添加到忽略白名单中（示例中xxx、yyy替换为你实际出问题的模块名，多个模块用|分隔）：

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
  },
  // 配置node_modules下不需要忽略的ES模块
  transformIgnorePatterns: ['/node_modules/(?!(xxx|yyy)/)']
}

可选校验项 #

检查项目根目录的tsconfig.json，确保开启esModuleInterop配置，避免ES模块和CommonJS模块的导入兼容问题：

{
  "compilerOptions": {
    "esModuleInterop": true,
    // 其他原有配置保持不变
  }
}

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