"[Vue warn]: Unknown custom element:" when running unit tests

I’ve imported Vuetify in my main.js file:

import Vue from 'vue';
import VueResource from 'vue-resource';
import Vuetify from 'vuetify';
import App from './App';
import router from './router';

Vue.use(Vuetify);
Vue.use(VueResource);

When I run any Karma unit tests that test components that include Vuetify elements in their templates I get the following errors:

The test itself actually passes, I would just like to clean this up.

Any ideas? Is there another way to register Vuetify components for testing purposes? Thanks!

[edoecohen]

Solved! Correct, Vuetify was not getting registered. So I added:

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

in the test file itself but that still caused issues. So I dug into the Vuetify index.js file and saw this:

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(plugin)
}

And because my karma config was setup to use PhantomJS as the browser there was no ‘window’. So I changed it to use ‘Chrome’ and it now works fine.

Another alternative I found was to add:

Vue.config.ignoredElements = [
    'v-icon', 'v-card', 'v-card-text'
];

to the test file and include any failing components.

Hope this helps others!

[albizures]

for me, I had to add this in my setup file

const hooks = require('require-extension-hooks')
const Vue = require('vue')
const Vuetify = require('vuetify').default

require('browser-env')()
Vue.config.productionTip = false
+Vue.use(Vuetify)

hooks('vue').plugin('vue').push()
hooks(['vue', 'js']).plugin('babel').push()

+window.Vue = Vue