Nuxt+Vuex+Vuetify集成Jest测试环境搭建问题求助

我前两天刚花了整整一天，踩遍了Nuxt + Vuex + Vuetify项目里Jest测试的各种未文档化的坑，正好碰到了你提到的这三个问题，分享下亲测有效的解决方案：

1. 「Unknown custom element: 」错误解决 #

我跑第一个组件测试时就栽在了这个问题上——Jest是独立的测试环境，不会自动注册Nuxt的内置组件nuxt-link，所以得手动把它 stub 或者注册：

全局解决方法（推荐） #

在项目根目录创建jest.setup.js文件（如果没有的话），添加以下代码：

import Vue from 'vue'
// 给nuxt-link注册一个简单的 stub 组件
Vue.component('nuxt-link', {
  template: '<a><slot /></a>'
})

然后在jest.config.js里配置这个setup文件，让它在所有测试前执行：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
}

单测试文件解决方法 #

如果只想在单个测试里处理，也可以用@vue/test-utils的stubs选项：

import { mount } from '@vue/test-utils'
import YourComponent from '@/components/YourComponent.vue'

describe('YourComponent', () => {
  it('renders without errors', () => {
    const wrapper = mount(YourComponent, {
      stubs: {
        'nuxt-link': true // 直接 stub 掉nuxt-link
      }
    })
    expect(wrapper.exists()).toBe(true)
  })
})

2. Vuetify错误：「Cannot read property 'register' of undefined」 #

这个错误是因为测试时组件找不到Vuetify的实例，导致无法调用register方法。我是通过全局初始化Vuetify+测试时传入实例解决的：

首先在jest.setup.js里全局安装Vuetify：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

然后在测试文件里，给挂载的组件传入Vuetify实例：

import { mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import YourVuetifyComponent from '@/components/YourVuetifyComponent.vue'

describe('YourVuetifyComponent', () => {
  let vuetify

  // 每个测试前都创建一个新的Vuetify实例
  beforeEach(() => {
    vuetify = new Vuetify()
  })

  it('renders Vuetify components correctly', () => {
    const wrapper = mount(YourVuetifyComponent, {
      vuetify // 传入Vuetify实例
    })
    expect(wrapper.find('.v-btn').exists()).toBe(true)
  })
})

3. 「Multiple instances of Vue detected」错误解决 #

这个问题差点把我搞疯——本质是项目里存在多个Vue实例（比如Nuxt自带的Vue和手动安装的版本不一致，或者依赖里重复引入了Vue）。我的解决步骤：

1. 检查package.json里的Vue版本，确保和Nuxt依赖的Vue版本完全一致；
2. 在jest.config.js里配置moduleNameMapper，强制所有导入的Vue指向同一个文件：

module.exports = {
  moduleNameMapper: {
    '^vue$': 'vue/dist/vue.common.js'
  }
}

3. 最后删除node_modules和package-lock.json（或yarn.lock），重新执行npm install（或yarn install），彻底清理重复依赖。

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