Cannot find stubbed components as root node

[atomanyih]

Version

1.0.3

Reproduction link

https://codesandbox.io/s/vue-test-utils-issue-repro-tc3pw?file=/src/app.spec.js

Steps to reproduce

Go to the tests tab. If it gives you some weird error (possibly mentioning ctor), you may just have to refresh the page.

What is expected?

When the child is rendered, but the grandchild is stubbed, I should be able to use find to find the grandchild component

What is actually happening?

both find by name and by component return error wrappers. This is unexpected, because both of these methods work when you're stubbing the direct child

---

This reduces refactorability when testing with stubs, because it means that you cannot extract a component and expect your tests to provide a safety net. Similar to why enzyme shallow mount creates brittle tests.

I have found two workarounds but neither are great.

1. find by componentname-stub
   problems:

• your test now needs to know that vue-test-utils converts and renames stubs
• your props are turned into attributes, and the values into strings, which means that you are no longer testing your code as it would run in production

2. use a jest module mock to replace the component (not using vue-test-utils stubs)
   problems:

• you have to define a fake component and duplicate prop definitions from the stubbed component

[dobromir-hristov]

If the component that you are searching is being rendered by a stub, ofc its not going to be found, its not there... That is the idea of the stub, to not render its inner children.

[atomanyih]

@dobromir-hristov, thanks for the quick response! I think you are misunderstanding my issue. If you look at the tests in the minimal repro, you'll see that the component that I am searching is not being rendered by a stub, but rather is being stubbed itself.

Let me be additionally clear:
component: App
renders Child

component Child
renders Grandchild

When I stub Grandchild, I would expect to be able to find it using wrapper.find.
In fact, you can verify that the stub is being rendered by looking at wrapper.html or find('grandchild-stub') but the find method does not work as expected

I'll edit the issue to make it more clear. Let me know if there's anything else I could explain more clearly!

[dobromir-hristov]

OK so there are two issues here.

One is that your components are each at the root of the their parent. That may be causing some issues. The current implementation of stubs is pretty nasty.

The problems with props is there I know, alas its not something that may get fixed soon/easily. If we fix it, it will break for allot of people.

Both of these are fixed in VTU 2, that will be out for Vue 3. It has a much simpler, and stable stubs implementation.

[atomanyih]

@dobromir-hristov
That's an interesting point about components being at root. In the context where I ran into this issue, the component was not at the root level.

In any case, thanks for the response and explanation. I look forward to all the new goodness that Vue 3 and VTU 2 will bring!

---

For posterity and if anyone else runs into this issue and needs a workaround, here's a jest mock example:

import ComponentName from 'path/to/ComponentName';
jest.mock('path/to/ComponentName', () => ({
  name: 'ComponentName',
  props: ['someProp'], // this is needed in order be able to access the prop
  render() { return null; }
}));

Then you can use wrapper.find as normal!

[lmiller1990]

I think we should be able to allow finding a root node with find pretty easily - if anyone is interested, this should be a good first issue.

VTU next has an implementation you could reference.

[ebisbe]

@lmiller1990 Is this still a first good issue? I don't want to deviate from the main focus which rigth now is Vue 2.7 I think. Also it's mentioned that this particular use case is solved in VTU 2 ( this ticket is almost 3 years old ). Should I pick newer tickets with Vue 2.7 issues? ( Do we close this one as with 'will not implement' label ? )

[lmiller1990]

Hi!

Anything to do with stubs is a complete mess and incredibly difficult to work on - not recommended. We learned from this, Vue 3 has a special transformVnodeArgs function here it is to enable stubbing at the core lib level, instead of weird runtime hacks like we do here.

You can pick up anything you like! It's your free time. I think we can close this, it's a wontfix at this point. Basically, any stub related bug is falls into this bucket - a massive amount of code bases rely on how stubbing works here (including some buggy/weird behavior) and changing it significantly in the name of fixing an old bug is pretty risky.

Test Utils is a mature product at this point, ideally the focus is long term maintenance - no new features, just ensuring existing things work correctly, and ideally with the latest version of Vue (2.7).

[lmiller1990]

What we might want to do is update this library to use Vue 2.7, and run CI, see what fails. That will give us an idea if we need to fix anything here.

Then, we can start to add some Vue 2.7 specific tests (like `<script setup> related ones). What do you think?

[ebisbe]

I think that it sounds like we have a plan. Before that I'll search for all open bugs related to stubs and see if they should be closed.

[lmiller1990]

@ebisbe thanks for the issue cleanup - we are sub 100 issues 😎

[ebisbe]

No problem. All those issues should have a stubs tag so we can filter them and review if any can be done. I'll be on vacation for 2 weeks. So you'll hear from me when I came back.