Vue项目中Jest无法导入模块（Axios语法错误）求助

问题原因 #

Axios 1.x版本采用ECMAScript Modules（ESM）格式，而Jest默认忽略转译node_modules目录下的文件，导致无法识别ESM的import语法，从而抛出该错误。

解决方案 #

方案一：配置Jest转译Axios #

修改jest.config.js，添加transformIgnorePatterns配置，让Jest不对Axios进行转译忽略，从而使用Babel处理它：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  // 排除axios，让Babel转译它
  transformIgnorePatterns: ['/node_modules/(?!axios)/']
}

方案二：模拟Axios（单元测试推荐） #

单元测试无需调用真实接口，直接模拟Axios行为可避免转译问题，同时提升测试速度。在测试文件中添加：

jest.mock('axios', () => ({
  create: jest.fn(() => ({
    get: jest.fn(() => Promise.resolve({ data: {} }))
  }))
}))

Jest会使用模拟的Axios模块，不会加载真实Axios，自然规避语法错误。

验证修改 #

完成配置后，重新运行单元测试命令：

npm run test:unit

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