未知自定义元素 Vue Jest 在 vuetify 插件 2021 上进行测试 - Vue Cli 2

Question

在 jest.config.js 中配置 setup.js 无法解决错误

setup.js

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

jest.config.js

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  setupFiles: ["./tests/unit/setup.js"],
};

发生错误：

[Vue 警告]：未知自定义元素：<v-app-bar> - 您是否正确注册了组件？对于递归组件，确保提供“名称”选项
[Vue 警告]：未知自定义元素：<v-row> - 您是否正确注册了组件？对于递归组件，确保提供“名称”选项
[Vue 警告]：未知自定义元素：<v-col> - 您是否正确注册了组件？对于递归组件，确保提供“名称”选项

Answer 1

Setup testing for Vuetify

对于 vuetify，您需要进行一些更改以确保一切正常。首先，在项目的测试文件夹下创建一个 setup.js 文件，其中包含以下行：

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

之后打开package.json文件并替换

来自

"test:unit": "vue-cli-service test:unit"

到

"test:unit": "vue-cli-service test:unit --setupTestFrameworkScriptFile=./tests/setup.js"

写个简单的测试

import { mount } from "@vue/test-utils";
import Vuetify from "vuetify";

describe("example.vue", () => {
   const vuetify = new Vuetify();
   test("False Test", () => {
       const wrapper = mount(Login, {
           stubs: ["router-link", "router-view"],
           vuetify,
    });
    
     const h1 = wrapper.find("h1");
     expect(h1.html()).toBe("<div><p>Foo</p></div>");
  });

  test("True Test", () => {
    const wrapper = mount(Login, {
      stubs: ["router-link", "router-view"],
      vuetify,
    });
    const h1 = wrapper.find("h1");
    expect(h1.html()).toBe("<h1>Login</h1>");
  });

未知自定义元素 Vue Jest 在 vuetify 插件 2021 上进行测试 - Vue Cli 2

Unknown custom element Vue Jest Testing on vuetify plugin 2021 - Vue Cli 2

vue.js

vuejs2

vuetify.js

vue-test-utils