The Wayback Machine - https://web.archive.org/web/20201212162931/https://github.com/vuejs/vue-test-utils/issues/1564
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot find stubbed components as root node #1564

Open
atomanyih opened this issue Jun 2, 2020 · 5 comments
Open

Cannot find stubbed components as root node #1564

atomanyih opened this issue Jun 2, 2020 · 5 comments

Comments

@atomanyih
Copy link

@atomanyih atomanyih commented Jun 2, 2020

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
  1. 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
Copy link
Collaborator

@dobromir-hristov dobromir-hristov commented Jun 2, 2020

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
Copy link
Author

@atomanyih atomanyih commented Jun 2, 2020

@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
Copy link
Collaborator

@dobromir-hristov dobromir-hristov commented Jun 2, 2020

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
Copy link
Author

@atomanyih atomanyih commented Jun 2, 2020

@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
Copy link
Member

@lmiller1990 lmiller1990 commented Jun 5, 2020

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.

@lmiller1990 lmiller1990 changed the title Cannot find stubbed components if they are more than one layer deep Cannot find stubbed components as root node Jul 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.