Vue-test-utils: Find should return root node if it's a match

[hjJunior]

Version

1.0.0-beta.32

Reproduction link

https://codesandbox.io/s/clever-bush-v4p5i

Steps to reproduce

1. Create a child component which should emit an event
2. Create a wrapper component which will render directly only the child component
3. Set a listener for this created event on the wrapper

---

Then go to the tests

1. Use shallowMount to create the wrapper
2. Stub the event handler function using wrapper.setMethods
3. Find and emit the event wrapper.find('Child-stub').vm.$emit('your-event')
4. Assert if event handler function have been called

What is expected?

It's expected the handler function be called

What is actually happening?

It looks when we create a Wrapper component which renders directly a Child component, and then, when the child component emits an event, the wrapper won't call the handle function

---

On the reproduction link, there are two Wrappers

• Wrapper doesn't work
• Wrapper2 works, because I moved my ChildComponent to an <div>

Maybe this can be related with https://github.com/vuejs/vue-test-utils/issues/650#issuecomment-597197194

[lmiller1990]

find can be through of a very clever querySelector. By doing find on something like

<template>
  <div>Foo</div>
</template>

It's like calling querySelector on the <div> - it will not be able to find itself. A work around would be to do something like wrapper.vm.$children[0].$emit('blah'). Another option is to use mount and trigger the event in the way a user does, like find('button').trigger('click').

One one hand, it might be nice to improve find to also find the root node. On the other, it goes against what querySelector would normally do. What do you think?

[themeler]

Same problem: on root component (stubbed), event is not captured (I can see it in emitted stub events, but it's not captured by component I'm testing). Find actually works without any problem.

wrapper.vm.$children[0].$emit('blah')

This actually is only solution that works. Thanks, I've tried emitting event from wrapper - didn't work.

And if I try to mount stubbed component, I'm facing another bug - vue-i18n is not passed to mounted children and everything crashes :|

[JessicaSachs]

Please open an issue about Vue-i18n separately. I use it in my tests with
no issue so I would like to see a reproduction if you can make one 🙏🏻

On Thu, Mar 12, 2020 at 12:47 PM Przemysław Melnarowicz <
[email protected]> wrote:

Same problem: on root component (stubbed), event is not captured (I can
see it in emitted stub events, but it's not captured by component I'm
testing). Find actually works without any problem.

wrapper.vm.$children[0].$emit('blah')

This actually is only solution that works. Thanks, I've tried emitting
event from wrapper - didn't work.

And if I try to mount stubbed component, I'm facing another bug - vue-i18n
is not passed to mounted children and everything crashes :|

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue-test-utils/issues/1464#issuecomment-598293641,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAVL4BBLQODNRYQKDYOJ3QLRHEG2ZANCNFSM4LFYYCNQ
.

[lmiller1990]

So it looks like the problem is not related to stubs or emit, but find (which behaves like querySelector, the original design decision). I think we should also include the root node when using find.

Do you mind if I change this issue to track that instead? (assuming there is no outstanding problem).

If there is a problem with i18n please open another issue in the relevant repo (here or there).

[hjJunior]

@lmiller1990 sure, for me it's ok

[dobromir-hristov]

Similar to #1385 . If the root node is another component, its hard to target, using find or emitting from it.

[amitkeinan9]

Mind if I'll take this one?

[lmiller1990]

Sure