React组件测试遇axios报错：Cannot use import statement outside a module

云上老周

2026-7-31

React组件测试「Cannot use import statement outside a module」报错解决方案

确认package.json模块类型配置
在项目根目录的package.json中添加或修改"type": "module"（适用于ES模块项目），如果是CommonJS项目则设置为"type": "commonjs"，确保测试环境与项目模块规范一致。
配置Jest转译规则（使用Jest时）
在jest.config.js中添加转译配置，让Jest能处理ES模块语法：
```
module.exports = {
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  moduleFileExtensions: ['js', 'jsx'],
};
```
同时确保babel配置文件（如babel.config.json）包含必要的预设：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
调整测试文件扩展名
若项目混用ES和CommonJS模块，可给测试文件对应扩展名：ES模块用.mjs，CommonJS用.cjs，避免模块类型冲突。
处理第三方ES模块依赖
若报错来自第三方包，在jest.config.js中配置transformIgnorePatterns，让Jest转译指定依赖：
```
module.exports = {
  transformIgnorePatterns: ['/node_modules/(?!(需要转译的包名)/)'],
};
```
切换至Vitest测试框架
Vitest默认支持ES模块，无需复杂转译配置，适合现代React项目，可直接替换Jest，简化测试环境配置。