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.