Vue2单元测试报Cannot use import statement outside a module错误怎么办

问题本质 #

这个报错和你是否在测试用例中直接引用问题模块无关，核心原因是：

• 你当前用的单元测试运行器（Vue2技术栈下90%场景为Jest）默认按CommonJS规范解析代码
• 依赖链中存在未被转译的ES Module格式文件，运行器加载到这类文件时无法识别ESM的import语法就会抛错
• 你之前尝试的添加"type": "module"、改文件后缀为.mjs的方案，会强制整个项目切换到ESM规范，和Vue2生态下大量默认输出CommonJS格式的依赖（比如vue-template-compiler、1.x版本的vue-test-utils）产生规范冲突，必然会引出新的报错。

具体修复步骤 #

• 先回滚所有错误改动
  删除package.json中新增的"type": "module"字段，把所有改名为.mjs的文件恢复为原.js后缀，这类方案不适配Vue2的默认模块生态。
• 配置Jest转译node_modules下的ESM依赖
  Jest默认不会转译node_modules目录下的文件，这是触发该报错的最常见原因，打开项目中的jest配置文件（jest.config.js/jest.config.ts/package.json中的jest字段）做如下修改：
  1. 找到报错堆栈中触发问题的模块：看报错信息里的文件路径，node_modules/后第一个文件夹名就是问题模块名
  2. 修改transformIgnorePatterns配置，把该模块加入转译白名单，示例配置：

  module.exports = {
    // 保留你原有的其他jest配置，比如testMatch、moduleFileExtensions等
    transformIgnorePatterns: [
      // 原默认值为"/node_modules/"，修改为以下规则，把问题模块从忽略转译的列表里排除
      "/node_modules/(?!(问题模块名替换到这里)/)"
    ],
    transform: {
      // 确保.js、.vue文件都走对应转译逻辑
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "@vue/vue2-jest"
    }
  }
  

• 核对Babel配置
  检查项目根目录的babel.config.js，确保配置了适配当前Node版本的转译预设，避免语法兼容问题：

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

• 锁定适配Node 14的依赖版本
  Node 14.19.2不要使用过高版本的单测相关依赖，避免原生ESM默认行为变化带来的兼容问题，Vue2技术栈适配的版本参考：
  • @vue/test-utils 固定使用1.x大版本，不要装2.x（2.x为Vue3适配版本）
  • jest、babel-jest 固定使用27.x大版本，且两个包版本号完全一致，不要装28及以上版本
  • 检查测试启动脚本，不要添加--experimental-vm-modules参数，该参数为Node原生ESM模式的实验性开关，在CommonJS模式下启用会触发额外冲突。

如果按以上步骤修改后仍有问题，可以贴出你的jest配置、babel配置和完整报错堆栈做进一步排查。

内容的提问来源于stack exchange，提问作者Héléna Normandin