为何`import axios from "axios";`会导致Jest测试失败？

问题重现 #

你的React项目代码运行正常，但执行Jest测试时出现如下错误：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

       5 | import Typography from '@mui/material/Typography';
       6 | import Box from '@mui/material/Box';
    >  7 | import axios from "axios";
         | ^

移除Axios相关导入后测试恢复正常。

核心原因 #

Jest默认采用CommonJS模块系统，而新版Axios（v1.x及以上）发布的npm包优先使用ES模块（ESM）格式。你的项目开发/生产环境依赖Webpack/Vite等构建工具，它们天然支持ESM，所以运行没问题；但Jest默认不会转译node_modules里的ESM包，导致把Axios内部的import语句当成非模块环境代码，触发语法错误。

解决办法 #

1. 配置Jest转译Axios（推荐）

在项目根目录的jest.config.js中，修改transformIgnorePatterns，让Jest转译Axios包：

module.exports = {
  // 其他已有配置...
  transformIgnorePatterns: [
    'node_modules/(?!axios/)' // 排除axios，让babel转译它
  ]
};

原理：默认Jest跳过node_modules下所有包的转译，这里指定不跳过axios，用babel把Axios的ESM代码转成Jest能识别的CommonJS格式。

2. 降级到Axios的CommonJS版本（临时方案）

如果不想修改Jest配置，可以安装仍以CommonJS为主的旧版Axios：

npm install axios@0.27.2

注意：长期使用旧版可能错过安全更新和新特性，仅作为临时应急方案。

3. 让Jest全面支持ESM（大改动）

如果你的项目计划整体切换到ESM模式，可以：

• 在package.json中添加"type": "module"
• 将jest.config.js重命名为jest.config.mjs
• 在配置中添加ESM支持：

export default {
  extensionsToTreatAsEsm: ['.jsx', '.js'],
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  },
  // 其他配置...
};

此方案需要调整项目中所有模块导入的写法（比如去掉.js后缀等），适合新项目或大规模重构场景。

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