@Vue/test-utils shallowMount outputs "[Vue warn]: Unknown custom element" for vuetify components @Vue/test-utils shallowMount outputs "[Vue warn]: Unknown custom element" for vuetify components vue.js vue.js

@Vue/test-utils shallowMount outputs "[Vue warn]: Unknown custom element" for vuetify components


In Vuetify's documentation on Unit Testing, they declare let vuetify in the describe block, then in beforeEach, assign that variable to a new Vuetify()

I don't see you actually initializing Vuetify anywhere in your test code, so perhaps that's what's needed here.


I made a mistake by adding vuetify to localVue and not Vue. This changed fixed it. Depending on the version used this can still output some errors. Update vuetify, @vue/test-utils and mocha to latests versions if something goes wrong.

import { shallowMount, createLocalVue } from '@vue/test-utils'import expect from 'expect'import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'import Vuetify from 'vuetify'import VueRouter from 'vue-router'import Vue from 'vue'Vue.use(Vuetify)describe('ProjetoShow component', () => {    let wrapper    let localVue    beforeEach(() => {        localVue = createLocalVue()        localVue.use(VueRouter)    })    it('renders correctly', ()=> {        let router = new VueRouter()        let vuetify = new Vuetify()        wrapper = shallowMount(ProjetoShow, {localVue, router, vuetify})        expect(wrapper.find('h2').text()).toContain('PROJETO')    })})


I found two different solutions:

One, register vuetify in test file (of moment i did not found a way to declare globally)

import Vue from 'vue'import Vuetify from 'vuetify'Vue.use(Vuetify)

Two, add stubs to wrapper with specific vuetify components

wrapper = shallowMount(ProjetoShow, {stubs: ['v-col']})

Edit, i found the solution for declare globally, is necessary create a file setup.js in tests folder as the doc says and add the path in test configuration file, in case of jest in jest.config.js adding setupFiles: ['./tests/setup.js']