@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']