Unit testing Vue.js Vuetify，使用Jest运行我的第一个单元测试的问题

这是我的第一个测试：

标题.spec.js

    import Vuetify from "vuetify";
    import { shallowMount, createLocalVue } from "@vue/test-utils";
    import router from "@/router";
    import i18n from "@/locales";
    import Heading from "@/components/Home/Heading.vue";

    describe("Heading.vue", () => {
      let wrapper;

      beforeEach(() => {
        const localVue = createLocalVue()
        localVue.use(router)
        localVue.use(Vuetify)
        localVue.filter("translate", function(value) {
          if (!value) return "";
          value = "lang.views.global." + value.toString();
          return i18n.t(value);
        });

        wrapper = shallowMount(Heading, { localVue: localVue, router, i18n });
      });

      it("should contains default heading", () => {
        console.log ('WRAPPER: ', wrapper)
        // const heading = wrapper.find("h1");
        // expect(heading.text()).toContain("In the heart of Charentes...");
      });
    });

当我运行它时，使用Vuetify获取错误

console.log

    vue-cli-service test:unit

     PASS  tests/unit/Heading.spec.js (11.247s)
      Heading.vue
        ✓ should contains default heading (462ms)

      console.log tests/unit/Heading.spec.js:23
        WRAPPER:  undefined

      console.error node_modules/vuetify/dist/vuetify.js:19429
        [Vuetify] Multiple instances of Vue detected
        See https://github.com/vuetifyjs/vuetify/issues/4068

        If you're seeing "$attrs is readonly", it's caused by this

      console.error node_modules/vuetify/dist/vuetify.js:19429
        [Vuetify] Multiple instances of Vue detected
        See https://github.com/vuetifyjs/vuetify/issues/4068

        If you're seeing "$attrs is readonly", it's caused by this

      console.error node_modules/vue/dist/vue.runtime.common.js:589
        [Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object.

        found in

        ---> <VParallax>
               <Heading>
                 <Root>

    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        17.641s
    Ran all test suites.

vue cli服务测试：单元
通过测试/单元/标题.spec.js（11.247s）
标题.vue
✓ 应包含默认标题（462ms）
console.log tests/unit/Heading.spec.js:23
包装器：未定义
console.error节点_modules/vuetify/dist/vuetify.js:19429
[Vuetify]检测到多个Vue实例
看见https://github.com/vuetifyjs/vuetify/issues/4068
如果您看到“$attrs是只读的”，这是由以下原因造成的
console.error节点_modules/vuetify/dist/vuetify.js:19429
[Vuetify]检测到多个Vue实例
看见https://github.com/vuetifyjs/vuetify/issues/4068
如果您看到“$attrs是只读的”，这是由以下原因造成的
console.error节点_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]：无效的属性：属性“src”的类型检查失败。应为字符串，已获取对象。
发现于
---> 
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：17.641s
运行所有测试套件。

为什么检测到多个Vue实例？在我的测试中只定义了一次。。。就这些

考试通过了，但我不理解Vuetify的错误。。。。

---

感谢您的反馈

通过不使用localVue解决了以下问题：

import Vue from "vue";
import { mount } from "@vue/test-utils";
import router from "@/router";
import Vuetify from "vuetify";
import i18n from "@/locales";
import Heading from "@/components/Home/Heading.vue";

describe("Heading.vue", () => {
  let wrapper;

  beforeEach(() => {
    Vue.use(router);
    Vue.use(Vuetify);
    Vue.filter("translate", function(value) {
      if (!value) return "";
      value = "lang.views.global." + value.toString();
      return i18n.t(value);
    });

    wrapper = mount(Heading, { router, i18n });
  });

  it('should have a happy ending', () => {
    // You should see all Vuetify components properly rendered
    // as normal HTML tags. For example, <v-flex> should be
    // rendered as <div class="v-flex ...">
    expect(wrapper.contains('div.flex')).toBe(true);

    // Just so that you can visually inspect the rendered html.
    console.log(wrapper.find('.subheading').html());
  });

  it("should contains default heading", () => {
    const h1 = wrapper.find("h1");
    expect(h1.is("h1")).toBe(true);
    expect(h1.text()).toContain("In the heart of Charentes...");
  });
});

从“Vue”导入Vue；
从“@vue/test-utils”导入{mount}”；
从“@/router”导入路由器；
从“Vuetify”导入Vuetify；
从“@/locales”导入i18n；
从“@/components/Home/Heading.vue”导入标题；
描述（“Heading.vue”，（）=>{
让包装纸；
在每个之前（（）=>{
Vue.use（路由器）；
Vue.use（Vuetify）；
Vue.过滤器（“翻译”，函数（值）{
如果（！value）返回“”；
value=“lang.views.global.”+value.toString（）；
返回i18n.t（值）；
});
包装器=装载（标题，{router，i18n}）；
});
它（'应该有一个幸福的结局'，（）=>{
//您应该看到所有Vuetify组件都已正确渲染
//作为普通的HTML标记。例如，应该是
//呈现为
expect（wrapper.contains（'div.flex'））.toBe（true）；
//这样您就可以直观地检查呈现的html。
log（wrapper.find（'.subheading'）.html（））；
});
它（“应包含默认标题”，（）=>{
常量h1=包装器。查找（“h1”）；
期望（h1.is（“h1”））.toBe（true）；
expect（h1.text（））.toContain（“在Charentes的中心…”）；
});
});

---

更新：以下是对的参考，由提供。

有一种方法可以将localVue与vuetify插件的全局注册结合使用，如本期中所述：

从“Vue”导入Vue
从“Vuetify”导入Vuetify
从'@vue/test-utils'导入{mount，createLocalVue}
从“./my component.vue”导入组件
Vue.use（Vuetify）
const localVue=createLocalVue（）
描述（'模块'，（）=>{
让vuetify
在每个之前（（）=>{
vuetify=新的vuetify（）
})
它（'应该做点什么'，（）=>{
常量包装=装载（组件{
localVue，
武装分子
})
})
})

---

对我来说，这解决了我在测试vuetify应用程序时遇到的问题。

他们说使用localVue实例而不是污染全局Vue，但我知道，这很好。。。但是，由于测试中Vuetify中报告的错误：我无法使用LocalVue…@erwin哪个报告的错误？你有链接吗？我也对这个问题的链接很感兴趣。我在这里也面临着同样的问题，希望你的答案能够解决：）对于任何来到这里的人来说，问题是。这里是对官方Vuetify bug的引用：如果他们在自己的代码中没有修复bug，而是引用了Vuetify框架的设计，那么它对Vuetify框架的设计有什么影响？