React项目测试报错SyntaxError: Cannot use import statement outside a module解决

1. 配置Jest支持ES模块 #

如果项目使用Jest作为测试框架，修改jest.config.js（或jest.config.json）添加以下配置，让Jest正确处理ES模块语法：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  moduleFileExtensions: ['js', 'jsx'],
  esModuleInterop: true,
  allowSyntheticDefaultImports: true,
};

2. 配置Babel适配React与ES模块 #

确保Babel配置能转译React代码和ES模块语法：

1. 安装必要依赖：

npm install --save-dev @babel/preset-env @babel/preset-react babel-jest

2. 在babel.config.json（或.babelrc）中添加预设：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ]
}

3. 适配项目的ES模块类型 #

如果package.json中设置了"type": "module"，需要额外调整配置：

• 修改jest.config.js，添加ES模块扩展名处理：

module.exports = {
  // 保留原有配置...
  extensionsToTreatAsEsm: ['.js', '.jsx'],
};

• 更新Babel配置，禁用模块转译以适配ES模块：

{
  "presets": [
    ["@babel/preset-env", { 
      "targets": { "node": "current" },
      "modules": false 
    }],
    "@babel/preset-react"
  ]
}

4. 检查测试文件导入路径 #

确认测试文件中的导入路径无拼写错误，且文件扩展名（如.jsx）正确，避免因路径问题导致模块识别失败。

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