Lazy loading component globally. Error on testing

Question

I'm lazy-loading a component globally like this:

Vue.component(
    'TheDialog',
    () => import(/* webpackChunkName: "theDialog" */  '@/components/TheDialog')
)

Works fine, but when I run tests on another component, which contain TheDialog as a child component, I get this warning:

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

Also, I have the same error when importing a global component without lazy-loading:

import TheDialog from '@/components/TheDialog'

Vue.component(
    'TheDialog', TheDialog
)

Does somebody know the problem?

Is that component registration in the code path of your tests? — tony19
– tony19, Commented Jul 7, 2020 at 22:32
But it has to be invoked from somewhere. How do you globally register it from your test code? — tony19
– tony19, Commented Jul 8, 2020 at 14:56
You're right! I haven't imported it in my test. But I didn't know that I need to, cause I'm using shallowMount in my test and AFAIN I don't have to import child components then. Thanx for your help, please write your answer so I could upvote it — Dvdgld
– Dvdgld, Commented Jul 8, 2020 at 15:17

tony19 · Accepted Answer · 2020-07-09 09:37:47Z

2

Based on vuejs/vue-test-utils Issue#1116, the globally registered component would still need to be registered when using shallowMount.

One solution is to globally register the component on a localVue instance:

const localVue = createLocalVue()
localVue.component('TheDialog', TheDialog)

shallowMount(MyComponent, { localVue })

or you could explicitly stub it upon mounting:

shallowMount(MyComponent, { stubs: ['TheDialog'] })

Another solution is to move your global component registrations (e.g., from main.js) into a separate file that could also be imported in your tests.

answered Jul 9, 2020 at 9:37

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lazy loading component globally. Error on testing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related