将Fetch替换为Axios后Jest测试报SyntaxError问题求助

问题核心 #

将代码中的Fetch替换为Axios后，Jest测试抛出SyntaxError: Cannot use import statement outside a module，原因是Axios当前默认以ES模块（ESM）形式发布，而Jest默认优先处理CommonJS模块，无法直接解析ESM的import语法。

具体解决方案 #

1. 配置Jest支持ES模块 #

在项目的Jest配置文件（jest.config.js或jest.config.mjs）中添加ESM支持配置：

module.exports = {
  // 标记需要当作ESM处理的文件扩展名
  extensionsToTreatAsEsm: ['.js', '.mjs'],
  // 使用babel-jest转换ESM代码
  transform: {
    '^.+\\.(js|mjs)$': 'babel-jest'
  },
  // 适配ESM模块解析的路径映射
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1'
  }
};

同时确保项目中安装了babel-jest和@babel/preset-env，并在.babelrc中配置：

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

2. 让Jest转换node_modules中的Axios #

默认情况下Jest会跳过node_modules目录的代码转换，但Axios的ESM代码需要被转换才能被Jest识别。修改Jest配置的transformIgnorePatterns：

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

该配置会让Jest跳过除Axios外的其他node_modules包，仅转换Axios的代码。

3. 临时切换为CommonJS导入（权宜之计） #

如果暂时不想调整配置，可以将Axios的导入语句改为CommonJS风格：

const axios = require('axios');

此方法无需修改配置，但不符合ESM的现代代码规范，仅适合快速验证场景。

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