search

vuejs / vue-test-utils

Component Test Utils for Vue 2
https://vue-test-utils.vuejs.org
MIT License
3.57k stars 669 forks source link

This import pattern causes imported component to be undefined in tests #2099

Open Doeke opened 3 weeks ago

Doeke commented 3 weeks ago

Import pattern breaks component imports

Import patterns that work without errors in vue dev server & build can cause imports during tests to break with just the following error as output:

[Vue warn]: Invalid vnode type when creating vnode: undefined. 
  at <App ref="VTU_COMPONENT" > 
  at <VTUROOT>

This is a big issue for us because we have a large project and it is difficult to find the chain of imports that causes this, the error provides no useful information

Steps to reproduce

I have made a simple reproduction example based on a new project created with npm create vue@latest:

https://github.com/Doeke/bug-vue-vnode-undefined

Running this example with npm run dev show it's working without warnings in browser, however when running npm run test:unit, you will see an error. The error is shown as a warning but actually causes components to be undefined while rendering, so it breaks the app during tests and can cause further errors.

Weirdly enough, the order of imports seems to be relevant here. If you go to /ui/components/index.ts and change the order of the two exports, the error goes away! The error also disappears if we remove the import from from '@/ui' in ComponentA.vue

Expected behaviour

No warnings or issues during tests because there are no errors when running the app. At the very least, there should be an indication of why the warning is occurring and how to fix it.

Actual behaviour

A warning is shown in console, and the component that was imported will be undefined, causing further problems during testing, with no hints for the user on how to fix it.

Possible Solution

I don't have a good solution other than avoiding broad imports from parents as much as possible eg no from @/ui anywhere in the ui/ folder