Can't find functional component with shallowMount

[Djaler]

Subject of the issue

If I mount my component using shallowMount, I can't find functional components inside it.

Steps to reproduce

https://github.com/Djaler/vue-test-utils-functional-components-shallow-mount

1. Clone repo and install dependencies (npm install)
2. Run tests (npm run test)

Expected behaviour

Icon component should be found and both tests should pass

Actual behaviour

Icon component not found in both cases

[lmiller1990]

I will have to verify but I believe this is a known limitation, at least with Vuetify's functional components, due to how they are composed. This may (or may not) be the case for all functional components, because they do not have an instance (vm) and are just compiled to regular HTML elements.

The way I've generally handled this is using a data-test selector. Another (potential) problem could be shallowMount - since you stub out the VIcon, you are trying to match VIcon component against a stubbed component, not the original VIcon.

Lots of potential issues, I am not sure which one is the cause here.

Potentially related issues:

• [ShallowMount] Cannot click on Vuetify icon when stubbing VIcon #919
• Some stubbed Vuetify components can't be found with find wrapper method #1272

I have tried to solve this many times before and had no luck, I'm sorry but I don't know if I will be able to look into this one. Vuetify and shallowMount have cost me many hours.

If you find a work-around, please post here so others can benefit. If you find a solution, let me know!

[Djaler]

I found a way how to fix find by component constructor (first case in my example). The cause of the issue was the fact that original VIcon component used in tested component is differ from component imported in test. That's because of strange vuetify setup. (check this commit Djaler/vue-test-utils-functional-components-shallow-mount@b4aa817)

[Djaler]

Also, I have a fix for second case in my example - find component by name. Check this #1817

[Djaler]

Fixed in #1817

[Djaler]

Can you release this, please?

[lmiller1990]

https://github.com/vuejs/vue-test-utils/releases/tag/v1.1.4

Let me know if you have any problems with the release.

[sailod]

is this fix applied to vue test utils version 2 (for vue3) as well?

[lmiller1990]

It should work with VTU v2 just fine, please file an issue in that repo if it does not.