Vue3使用Jest+@testing-library/vue测试报Vue is not defined错误

架构老林

2026-8-30

问题根因

报错由两个配置/依赖问题共同触发：

开启testEnvironment: "jsdom"后，Jest会优先解析依赖package.json中browser字段指向的产物，@vue/test-utils的browser版本默认读取全局Vue变量，不会主动从vue包导入，直接触发ReferenceError: Vue is not defined。
移除jsdom配置后，@testing-library/vue的渲染逻辑强依赖DOM API，会直接抛出要求使用jsdom环境的错误，属于依赖的正常校验逻辑。

解决方案

按以下步骤调整配置即可修复，不需要改动现有测试用例代码：

先确认依赖版本匹配，安装适配Vue3的对应依赖版本，执行命令：
```
npm install --save-dev @testing-library/vue@^8 @vue/test-utils@^2 jest-environment-jsdom@^29
```
注意：@testing-library/vue 7.x及以下版本仅适配Vue2，Vue3项目必须使用8.x以上版本，否则会拉取错误版本的@vue/test-utils触发兼容问题。

修改jest.config.js配置，强制Jest在jsdom环境下解析@vue/test-utils的node端CommonJS产物，跳过browser版本解析，参考配置如下：

module.exports = {
  testEnvironment: "jsdom",
  // 新增模块映射规则
  moduleNameMapper: {
    "^@vue/test-utils$": require.resolve("@vue/test-utils")
  },
  // 确认transform配置覆盖vue相关依赖的转译
  transform: {
    "^.+\\.(js|jsx|mjs)$": ["babel-jest", { configFile: "./babel.config.json" }]
  },
  transformIgnorePatterns: [
    "/node_modules/(?!(@vue|@testing-library)/)"
  ]
}

检查babel.config.json配置，确认已配置Vue3对应的转译规则，参考配置如下：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ],
  "env": {
    "test": {
      "plugins": ["@vue/babel-plugin-jsx"]
    }
  }
}