vm.emit on root component not working

Version

1.0.0-beta.30

Reproduction link

https://github.com/aldarund/vue-test-utils-transition-bug

Steps to reproduce

add event to root element in vue component, try to trigger it via .vm.$emit . Relevant test is at components/emit.test.js If element isnt root - it works fine. If root - no emit happens

What is expected?

test is passed

What is actually happening?

test is faling

[dobromir-hristov]

OK let me try to clear up whats going on. The DOM element of your tested, aka mounted component is another component’s root component. This means that when the find('#some-id') method starts searching, it matches all the Vue Components, that have that id for example. But in this case, they are both the tested and it’s root, so it returns both.

<mounted-component>
  <child-component>

translates to <div class="the-child-root" />

To make your tests pass, you can:

1. Find by component - this ensures the DOM has nothing to do with this
2. Find by ref - same as above
3. Use a hack wrapper.find('#selector').vm.$children[0].vm.$emit(), which will give you the first child, that you actually want.

@JessicaSachs @lmiller1990 @afontcu I’ve been at this, debugging for over 6 hours, until a found the issue, unfortunately I am not sure how to fix this. Technically the match logic is correct. The matched DOM element is the root of both components and the dedupe logic just leaves the first one.

Give me your thoughts on this, maybe I can try to explain better if it did not make sense.

[dobromir-hristov]

I tried to investigate a bit. The component does emit an event, tried with emitted().

This means the root’s $listeners are not being called.