2021年Vue Cli 2下Vuetify插件Jest测试出现未知自定义元素错误

DevOps 小满

2026-10-22

解决方案

根因说明

你已在全局注册了Vuetify插件，但Vue Test Utils的测试挂载上下文不会自动继承全局插件实例，需要手动传入Vuetify实例才能让组件识别所有`v-`开头的Vuetify内置组件。

修复步骤

1. 修改`setup.js`配置

在原有注册逻辑基础上，导出实例化的Vuetify对象：

import Vue from "vue";
import Vuetify from "vuetify";
Vue.config.productionTip = false;
Vue.use(Vuetify);

// 新增：实例化Vuetify并导出
const vuetify = new Vuetify()
export default vuetify

2. 测试用例挂载时传入Vuetify实例

编写单元测试时，在mount/shallowMount的配置项中传入导出的vuetify实例即可：

import { mount } from '@vue/test-utils'
import 待测试组件 from '@/components/你的组件路径.vue'
import vuetify from './setup' // 按你实际的setup.js路径调整

describe('待测试组件', () => {
  it('可正常渲染', () => {
    const wrapper = mount(待测试组件, {
      vuetify // 必须传入该实例
    })
    expect(wrapper.exists()).toBeTruthy()
  })
})

可选快速修复（无需渲染Vuetify逻辑时使用）

如果你不需要测试Vuetify组件本身的交互逻辑，只想消去组件识别报错，可以直接在jest.config.js中配置自动stub所有Vuetify组件：

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  setupFiles: ["./tests/unit/setup.js"],
  globals: {
    "vue-jest": {
      // 自动stub所有用到的vuetify组件，可按需新增
      stubs: {
        "v-app-bar": true,
        "v-row": true,
        "v-col": true
      }
    }
  }
};