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

find throws error when using refs #1477

Closed
unclejustin opened this issue Mar 19, 2020 · 7 comments
Closed

find throws error when using refs #1477

unclejustin opened this issue Mar 19, 2020 · 7 comments

Comments

@unclejustin
Copy link
Contributor

Version

1.0.0-beta.30

Reproduction link

https://gitlab.com/unclejustin/test-utils-but

Steps to reproduce

In a test reference an element by ref. Then try to find anything in that element using anything other than a dom selector:

const button = wrapper.find({ ref: "testButton" });
expect(button.find(Icon).exists()).toBe(true);

This will throw the errror "[vue-test-utils]: cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?"

What is expected?

That found elements have the same functionality as root wrappers.

What is actually happening?

Throwing an error.


I think this should work as described, but if I am wrong then maybe the docs just need to be updated to reflect the actual functionality?

@lmiller1990
Copy link
Member

lmiller1990 commented Mar 20, 2020

Without digging my guess is since you are using shallowMount, a stub is rendered instead of the actual component, which does not have the ref (maybe). My understanding is a ref is a static reference to a DOM element, and since the stub is a different component to the actual one with the ref, it isn't finding it.

What happens if you use mount?

@unclejustin
Copy link
Contributor Author

Same issue. Sorry, I should have mentioned that I tried that already as well.

@unclejustin
Copy link
Contributor Author

If it helps, here is where it is failing:

if (root instanceof Element && selector.type !== DOM_SELECTOR) {

@dobromir-hristov
Copy link
Contributor

Hey I think this is just a limitation of how you are chaining off find to a normal html component. We are kind of limited on how we can use find to search for components.
If you use a DOM selector instead of a Vue component, it should work.

The problem is, we cant find a Vue component by it's dom node, as that node could have a few components. And we cant search by Vue components, when we go down to DOM level :/

@unclejustin
Copy link
Contributor Author

That's what I was seeing as well stepping through the code. It's cool, I'm going to try and work up a PR to make the docs more clear that this is a limitation.

@unclejustin
Copy link
Contributor Author

PR here: #1481

lmiller1990 added a commit that referenced this issue Mar 26, 2020
* docs(wrapper): note exception to chaining find calls

Make it clear that when chaining find calls, you can only use DOM selectors.

* chore: revert

Co-authored-by: Lachlan Miller <[email protected]>
@Stoom
Copy link
Contributor

Stoom commented Apr 7, 2020

Can this be closed in lue of #1498 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants