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

Posted

技术标签:

【中文标题】vuetify 插件 2021 上的未知自定义元素 Vue Jest 测试 - Vue Cli 2【英文标题】:Unknown custom element Vue Jest Testing on vuetify plugin 2021 - Vue Cli 2 【发布时间】:2021-07-29 02:10:40 【问题描述】:

在 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> - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项

【问题讨论】:

【参考方案1】:

Vuetify 的设置测试

对于 vuetify,您需要进行一些更改以确保一切正常。 首先,在项目的tests文件夹下创建一个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>");
  );

【讨论】:

以上是关于vuetify 插件 2021 上的未知自定义元素 Vue Jest 测试 - Vue Cli 2的主要内容,如果未能解决你的问题,请参考以下文章

Vuetify 中的未知自定义元素

Vuetify 错误:未知的自定义元素:<v-app-bar> - 您是不是正确注册了组件?

通过 CDN 加载 Vuetify 时获取“未知自定义元素”

Vuetify Jest 未知自定义元素 <v-*>

Vue/Vuetify - 未知的自定义元素:<v-app> - 您是不是正确注册了组件?

SimulatedGreg Electron-Vue-Vuetify 错误消息:[Vue 警告]:未知自定义元素:<v-app> - 您是不是正确注册了组件?