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

Question

这是我的第一个测试：

Heading.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 实例？它在我的测试中定义过一次……仅此而已？

测试通过了，但我不明白 Vuetify 错误.... 感谢反馈

Answer 1

不使用 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...");
  });
});

更新：这是对the official Vuetify bug 的引用，由Tristan Neumann 提供。

Answer 2

有一种方法可以将 localVue 与 vuetify 插件的全局注册结合使用，这在问题 #4068 的 comment 中有很好的解释：

import Vue from 'vue'
import Vuetify from 'vuetify'
import { mount, createLocalVue } from '@vue/test-utils'
import component from './my-component.vue'

Vue.use(Vuetify)

const localVue = createLocalVue()

describe('module', () => {
  let vuetify
  beforeEach(() => {
    vuetify = new Vuetify()
  })

  it('should do something', () => {
    const wrapper = mount(component, {
      localVue,
      vuetify
    })
  })
})

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