From 96a0af930af839bcc831930fc0fdeb5b94125cfd Mon Sep 17 00:00:00 2001
From: Illya Klymov <xanf@xanf.me>
Date: Wed, 1 Dec 2021 09:48:07 +0200
Subject: [PATCH] fix(emitted): do not track native events on multi-root
 components (#1121)

---
 src/vueWrapper.ts  |  9 ++++++++-
 tests/emit.spec.ts | 23 +++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
index 49de59790..adb977761 100644
--- a/src/vueWrapper.ts
+++ b/src/vueWrapper.ts
@@ -94,7 +94,14 @@ export class VueWrapper<
           // and we only need the keys
           Object.keys(vm.$options.emits)
       : []
-    const element = this.element
+
+    const elementRoots = this.getRootNodes().filter(
+      (node): node is Element => node instanceof Element
+    )
+    if (elementRoots.length !== 1) {
+      return
+    }
+    const [element] = elementRoots
     for (let eventName of Object.keys(domEvents)) {
       // if a component includes events in 'emits' with the same name as native
       // events, the native events with that name should be ignored
diff --git a/tests/emit.spec.ts b/tests/emit.spec.ts
index 3732e90d1..61a257e04 100644
--- a/tests/emit.spec.ts
+++ b/tests/emit.spec.ts
@@ -323,6 +323,29 @@ describe('emitted', () => {
     expect(wrapper.emitted('foo')).toHaveLength(1)
   })
 
+  it('does not capture native events on component which render non-element root', async () => {
+    const Foo = defineComponent({ template: 'plain-string' })
+    const wrapper = mount(Foo)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('does not capture native events on component with multiple root element nodes', async () => {
+    const Foo = defineComponent({ template: '<div>1</div><div>2</div>' })
+    const wrapper = mount(Foo)
+    await wrapper.find('div').trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+
+  it('capture native events on components which render multiple root nodes with only single element', async () => {
+    const Foo = defineComponent({
+      template: '<div>1</div><!-- comment node -->'
+    })
+    const wrapper = mount(Foo)
+    await wrapper.find('div').trigger('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
   it.each([EmitsEventSFC, EmitsEventScriptSetup] as DefineComponent[])(
     'captures emitted events',
     async (component) => {