Jest测试报错：SyntaxError: Cannot use import statement outside a module

问题根源 #

Jest默认采用CommonJS模块系统，而新版axios使用了ECMAScript Modules（ESM）语法，当测试文件间接引入axios时，Jest无法解析import语句，抛出SyntaxError: Cannot use import statement outside a module错误。

解决方案 #

方案1：配置Jest原生支持ESM #

在项目根目录创建或修改jest.config.js，添加以下配置：

module.exports = {
  extensionsToTreatAsEsm: ['.js'],
  moduleNameMapper: {
    '^axios$': require.resolve('axios'),
  },
  transform: {},
  testEnvironment: 'node'
};

• extensionsToTreatAsEsm：告知Jest将.js文件视为ESM模块处理
• moduleNameMapper：直接映射到axios的CommonJS兼容入口（axios提供了双模块支持）

方案2：用Babel转译ESM语法 #

1. 安装依赖：

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

2. 创建.babelrc配置文件：

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

3. 修改jest.config.js启用Babel转译：

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest'
  }
};

Babel会将ESM的import语句转译为Jest能识别的CommonJSrequire语法。

方案3：单元测试中模拟axios（推荐用于隔离依赖） #

如果只是测试组件逻辑，无需实际调用axios，可以直接在测试文件search.test.js顶部添加mock：

jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: {} })),
  // 根据组件实际使用的axios方法添加对应mock实现
}));

这种方式完全避免加载axios源码，从根本上解决语法解析问题，同时也符合单元测试隔离外部依赖的原则。

额外注意事项 #

如果项目package.json中设置了"type": "module"，需要在jest.config.js中添加transformIgnorePatterns，确保axios被转译：

module.exports = {
  transformIgnorePatterns: ['node_modules/(?!axios)/']
};

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