shallow components throwing unknown custom element error about vue-test-utils HOT 9 CLOSED

I was under the impression that using shallow over mount essentially ignores all of the unregistered child components. From what I'm seeing though it causes a runtime error because they aren't registered with Vue.

So not necessarily wanting it to intelligently traverse my component and look for tags that aren't registered. I just thought this was the default behavior. Otherwise I wasn't sure what the purpose was calling shallow over just calling mount with the stubs property.

Maybe some confusion on my side or on the documentation side.

from vue-test-utils.

I meet same issue, all my function is work without any warning, but occur "[Vue warn]: Unknown custom element:" when I run unit test, but all my unit test is passed, just have a lot of this warn.

All my components is register like this:

const sharedComponents = {
install(Vue) {
Vue.component('v-input', Input);
Vue.component('popup', Popup);
},
};

Vue.use(sharedComponents);

new Vue({
el: '#app',
...
});

I'm confused why it's not work in unit test?

from vue-test-utils.

I solved by adding the global components as stubs -> read here
#894

from vue-test-utils.

You are correct in that it will only stub registered vue components, but it does on both your component instance and globally on the root vue.

Could you check that your component is registered in global vue and that you are not passing a localVue property to the shallow? To check you could do something like this in your spec before the assert. If it logs an empty object then you know that b-button is not registered globally and that is why it is not being stubbed globally.

console.log (Vue.options.components)

from vue-test-utils.

Thanks for reporting and for jfiddle. Could you expand on what you are expecting? I think you are saying that you would like vue-test-utils to be able to stub out any custom html element that isn't registered in vue as a component.

from vue-test-utils.

In fact even the documentation for shallow describes the behavior this way

Returns Wrapper of first DOM node or Vue component matching selector.
Stubs all child components.

from vue-test-utils.

Ok, I think I understand now.

The problem is my child components were globally registered and not locally. That's most likely why it has a problem stubbing them.

from vue-test-utils.

That's what I was missing. Totally forgot to include the file that registers my global components.

Thank you for your help!

from vue-test-utils.

@Teresast those are all installed globally, it seems to have them stubbed in shallowMount you need to install them like so.

import Popup from './popup.vue';

new Vue({
    el: '#app',
    components: {
        Popup
    },
    ...
});

from vue-test-utils.