Vue.js Vuetify , Issue running my first unit test with Jest Vue.js Vuetify , Issue running my first unit test with Jest vue.js vue.js

Vue.js Vuetify , Issue running my first unit test with Jest


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.


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.