Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Cannot find stubbed components as root node #1564
Comments
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. |
@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 When I stub I'll edit the issue to make it more clear. Let me know if there's anything else I could explain more clearly! |
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. |
@dobromir-hristov 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 |
I think we should be able to allow finding a root node with VTU next has an implementation you could reference. |
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 componentWhat 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.
componentname-stub
problems:
vue-test-utils
stubs
)problems: