Vue-test-utils: shallowMounted tests with globally registered components that have slot content display component registration errors

[robokozo]

Version

1.0.0-beta.28

Reproduction link

https://github.com/robodude/shallow-test

Steps to reproduce

1) Create a globally registered component (A) that has a slot.

2) Use that component (A) in another component (B) which passes information via slot to (A)

3) Test the component (B)

4) Run unit tests

or

1) Pull from repo link.

2) Navigate to directory using command prompt

3) npm ci

3) npm run test:unit

What is expected?

Test passes without errors

What is actually happening?

Test passes with an error

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

---

The generated snapshot looks how I would have expected it to.

[robokozo]

I could import and register the component to the localVue instance. It'll make the error go away but a little annoying if I'm using a custom component lib

import { shallowMount, createLocalVue } from "@vue/test-utils";
import App from "@/App.vue";
const localVue = createLocalVue();

import HelloWorld from "@/components/HelloWorld";

localVue.component("HelloWorld", HelloWorld);

describe("App.vue", () => {
    test("renders snap correctly if passed in true value prop", () => {
        const wrapper = shallowMount(App, {
            localVue
        });

        expect(wrapper.html()).toMatchSnapshot();
    });
});

I guess my feeling is that since the snapshot generates appropriately, it would be nice if I didn't have to locally bind up my dependencies.

[eddyerburgh]

We could auto stub every non-DOM element, but that would stub any custom elements that people use.

Ultimately we decided to require components to be registered explicitly before they are stubbed. As you suggested, you will need to install the components explicitly on the localVue constructor.

[RyanHavoc]

@eddyerburgh I've just been having the same problem. Is there no way to register the global components for the suite instead of explicitly for every component?

We've just made all Base components global and now the tests are complaining about unregistered components. This localVue approach works but it means increased setup for your tests so we're kind of deferring the benefits of doing it. 😕

[PawFV]

Any updates? I'm having headaches with this, it gets really filthy and verbose to manually set each custom component.

[danielkellyio]

I am able to just setup a components.js file where I register all my global vue components:

// example
// components.js
import Vue from 'vue'
import MyHeader from './components/MyHeader'
import MyNav from './components/MyNav'
Vue.component('MyHeader', MyHeader)
Vue.component('MyNav', MyNav)

// ... etc

I import this file both into my app and into a setupFile for my jest tests

// jest.config.js
modules.exports = {
moduleNameMapper:{
    "~(.*)$": "<rootDir>/resources/js/$1",
},
setupFilesAfterEnv: ['<rootDir>resources/js/tests/setupTests.js'],
// ...etc
}

//setupTests.js
import '~/components'

This seems to negate the need to register the component dependencies with the localVue approah above.

[ITenthusiasm]

@danielkellyio are those Vue components .js files or .vue files?

EDIT
Nevermind. I was having some problems getting this to work with TypeScript + Vue, but I found out I was doing something wrong with my configurations in tsconfig.json. I can confirm that danielkellyio's method works just fine. I prefer it that way since it keeps me from having to install any additional packages or do any insane setup.