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

Question

My unit test in Vue outputs the following warning not just for <v-col> but for every single vuetify component:

[Vue warn]: Unknown custom element: < v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I created a localVue and added Vuetify, but that doesn't seem to work. This is my test case:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import ProjetoShow from '../../views/Projeto/ProjetoShow.vue'
import Vuetify from 'vuetify'

describe('ProjetoShow component', () => {
    let wrapper
    let localVue
    beforeEach(() => {
        localVue = createLocalVue()
        localVue.use(Vuetify)
    })

    it('renders correctly', ()=> {
        let vuetify = new Vuetify()
        wrapper = shallowMount(ProjetoShow, {localVue, vuetify})
        expect(wrapper.find('h2').text()).toContain('PROJETO')
    })

})

my packages versions in package.json

"devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.31",
    "axios": "^0.19.0",
    "cross-env": "^5.1",
    "expect": "^24.9.0",
    "jsdom": "^15.1.1",
    "jsdom-global": "^3.0.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "mocha": "^6.2.0",
    "mochapack": "^1.1.5",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "vue-router": "^3.1.3",
    "vuetify": "^2.2.15",
    "vuex": "^3.1.1"
},

Marcelo Fonseca · Accepted Answer · 2020-03-17 23:38:00Z

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

})

Tanner · Accepted Answer · 2020-02-21 20:44:20Z

1

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.

answered Feb 21, 2020 at 20:44

Tanner

2,4411 gold badge15 silver badges23 bronze badges

4 Comments

Marcelo Fonseca Over a year ago

I tried the solution in vuetify docs but it still doesnt work

Tanner Over a year ago

Would you be able to create a public git repo with your project as it is right now - or rather, just the relevant files?

Marcelo Fonseca Over a year ago

It did work now. I made a mistake by adding Vuetify to localVue and not Vue instance. the Vuetify docs is correct. I Changed localVue.use(Vuetify) to import Vue from 'vue' ; Vue.use(Vuetify);

Tanner Over a year ago

@MarceloFonseca Glad you figured it out. Please post that information as an answer and mark it as accepted so anyone else who comes across this question can get the answer quickly. Happy coding!

Francisco Rodeño Sanchez · Accepted Answer · 2020-05-31 11:31:49Z

1

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

edited May 31, 2020 at 11:31

answered May 31, 2020 at 11:10

Francisco Rodeño Sanchez

7371 gold badge9 silver badges20 bronze badges

3 Comments

Marcelo Fonseca Over a year ago

I've been trying to pass it to my setup file without success. it gives me the error UnhandledPromiseRejectionWarning and SyntaxError: Unexpected identifier for import Vuetify from 'vuetify'. No idea why

Francisco Rodeño Sanchez Over a year ago

Try import Vuetify from 'vuetify/lib' so i have it in my plugin file but don't worked for me in setup.js, declare it as works in your test file it should work..

groksrc Over a year ago

Adding this line to the jest.config.js fixed it for me: setupFiles: ['./tests/setup.js']. Thanks!

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related