Vue2+Nuxt环境下Jest与@vue/test-utils导入问题求助

1. 核对Vue与@vue/test-utils的版本兼容性 #

这个错误几乎都是版本不匹配引发的：

• 若使用Vue 2.x，必须搭配@vue/test-utils 1.x版本（2.x版本仅适配Vue 3），执行命令调整：

  npm uninstall @vue/test-utils
  npm install @vue/test-utils@1.x --save-dev
  

• 若使用Vue 3.x，确保@vue/test-utils为2.x及以上版本，同时确认测试框架（如Jest、Vitest）支持Vue 3环境。

2. 排除SSR配置的干扰 #

如果项目启用了SSR，测试环境可能误加载了SSR专属配置，导致Vue.ssrUtils未初始化：

• 在测试文件顶部添加环境变量，强制切换到客户端模式：

  process.env.VUE_ENV = 'client'
  

• 检查vue.config.js或SSR配置文件，确保测试环境不会引入SSR专属插件或逻辑。

3. 重置依赖与核心配置 #

若之前修改过大量配置导致问题，尝试重置：

• 删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查测试框架配置（如jest.config.js）中的moduleNameMapper，确保Vue的导入路径正确，无错误映射：

  module.exports = {
    moduleNameMapper: {
      '^vue$': 'vue/dist/vue.common.js' // Vue 2需配置，Vue 3可省略
    }
  }
  

4. 确认测试文件的导入方式 #

避免错误的导入路径或用法：

• Vue 2正确导入示例：

  import { shallowMount, mount } from '@vue/test-utils'
  

• Vue 3正确导入示例：

  import { mount } from '@vue/test-utils'
  import { createApp } from 'vue'
  

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