18

Herea is my first test :

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

when I run it, get errors with 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.

why do I get Multiple instances of Vue detected ? it's define once in my test ... that's all ?

the test is passing , but I don't undertsand the Vuetify errors.... thanks for feedback

2

2 Answers 2

18

Solved by not using a 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...");
  });
});

Update: Here is a reference to the official Vuetify bug, courtesy of Tristan Neumann.

6
  • 3
    The guide says to use localVue instance instead of polluting the global Vue though
    – Andre12
    Dec 12, 2018 at 14:28
  • Yes I know, good point ... however due to a reported bug in Vuetify in test:units I cannot use a LocalVue ...
    – user762579
    Dec 12, 2018 at 14:52
  • 1
    @erwin which reported bug? do you have a link? Jan 6, 2019 at 4:16
  • I, too, am quite interested in a link to this issue. I am facing the same problem here and hope your answer will solve it :) Jan 23, 2019 at 12:59
  • 2
    For anyone who ends up here, the issue is the #4068.
    – Daniel Luz
    May 17, 2019 at 11:09
4

There is a way of using localVue in combination with a global registration of the vuetify plugin as beautifully explained in this comment of issue #4068:

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
    })
  })
})

For me this solved my problems with testing my vuetify app.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.