Vue应用使用Vue Test Utils测试时Babel报regeneratorRuntime未定义错误

核心问题原因 #

你当前的项目同时安装了Babel 6和Babel 7两个大版本的编译依赖，版本冲突导致async/await语法的编译逻辑异常，同时测试环境未正确引入regenerator运行时依赖，最终触发报错。

分步修复步骤 #

1. 清理冲突的旧版本Babel依赖 #

卸载所有Babel 6版本的冗余包，避免和已安装的Babel 7核心包冲突：

npm uninstall babel-cli babel-plugin-transform-object-rest-spread babel-plugin-transform-regenerator babel-plugin-transform-runtime babel-preset-env babel-polyfill

如果使用yarn，将npm uninstall替换为yarn remove即可。

2. 安装必要的运行时依赖 #

npm install @babel/runtime-corejs3 --save

3. 修正babel.config.js配置 #

@vue/app preset已经内置了@babel/preset-env的能力，重复配置会导致规则覆盖冲突，且transform-regenerator能力已内置在preset中，无需单独引入：

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', {
      corejs: 3,
      regenerator: true
    }]
  ]
}

4. 补充Jest测试环境的运行时引入 #

Jest测试环境不会自动加载全局polyfill，需要手动添加引入，两种方案选其一即可：

• 方案1：修改jest.config.js配置（或package.json中的jest字段）

module.exports = {
  // 保留你原本的其他Jest配置
  setupFiles: ['core-js/stable', 'regenerator-runtime/runtime']
}

• 方案2：在测试入口文件（通常为tests/unit/index.js）顶部添加两行引入

import 'core-js/stable'
import 'regenerator-runtime/runtime'

5. 清理缓存后运行测试 #

Babel和Jest都会缓存历史编译结果，清理缓存后再执行测试命令：

npx jest --clearCache
# 之后执行你原本的测试启动命令，比如 npm run test:unit

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