Vue-test-utils: shallow components throwing unknown custom element error

[JamieLottering]

Version

1.0.0-beta.1

Reproduction link

https://jsfiddle.net/Sabazou/uu91qb4w/

Steps to reproduce

Create a component that utilizes another component.
Create a test that shallow mounts the parent component
Run the test

What is expected?

For all unregistered components to be stubbed and the test to pass

What is actually happening?

Vue runtime throws an error.

console.error node_modules/vue/dist/vue.runtime.common.js:474
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

---

Adding { stubs: ['bButton'] } suppresses the error but seems to defeat the purpose of calling shallow in the first place which seems to be convenience

[Austio]

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.

[JamieLottering]

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.

[JamieLottering]

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.

[JamieLottering]

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.

[Austio]

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)

[JamieLottering]

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

Thank you for your help!

[Teresast]

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?

[OmgImAlexis]

@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
    },
    ...
});

[MaruaEl]

I solved by adding the global components as stubs -> read here
https://github.com/vuejs/vue-test-utils/issues/894