fix: removing events cache clearing inside attachEmitListener method (#…

…1449)

Refactoring attachEmitListener function to not clear entire emitted events history on every call. A new removeEventHistory has been exposed and added to the unmount method logic so that specific emit history will be cleared on wrapper unmount. Unit testing has been added as well to show that the bug has been fixed.

Fixes #1445

src/emit.ts

@@ -11,7 +11,7 @@ const enum DevtoolsHooks {
   COMPONENT_EMIT = 'component:emit'
 }
 
-let events: Events
+let events: Events = {}
 
 export function emitted<T = unknown>(
   vm: ComponentPublicInstance,
@@ -28,7 +28,6 @@ export function emitted<T = unknown>(
 }
 
 export const attachEmitListener = () => {
-  events = {}
   // use devtools to capture this "emit"
   setDevtoolsHook(createDevTools(events), {})
 }
@@ -65,3 +64,8 @@ export const recordEvent = (
   // Record the event message sent by the emit
   events[cid][event].push(args)
 }
+
+export const removeEventHistory = (vm: ComponentPublicInstance): void => {
+  const cid = vm.$.uid
+  delete events[cid]
+}

src/vueWrapper.ts

@@ -13,7 +13,7 @@ import domEvents from './constants/dom-events'
 import { VueElement, VueNode } from './types'
 import { mergeDeep } from './utils'
 import { getRootNodes } from './utils/getRootNodes'
-import { emitted, recordEvent } from './emit'
+import { emitted, recordEvent, removeEventHistory } from './emit'
 import BaseWrapper from './baseWrapper'
 import type { DOMWrapper } from './domWrapper'
 import {
@@ -182,6 +182,8 @@ export class VueWrapper<
         `wrapper.unmount() can only be called by the root wrapper`
       )
     }
+    // Clear emitted events cache for this component instance
+    removeEventHistory(this.vm)
 
     this.__app.unmount()
   }

tests/emit.spec.ts

@@ -364,4 +364,35 @@ describe('emitted', () => {
     expect(wrapper.emitted().bar[0]).toEqual(['mounted'])
     expect(wrapper.emitted().bar[1]).toEqual(['click'])
   })
+
+  it('does not clear all emitted event history on mount/unmount', async () => {
+    const Foo = defineComponent({
+      name: 'Foo',
+      emits: ['foo'],
+      setup(_, ctx) {
+        return () =>
+          h(
+            'div',
+            {
+              onClick: () => {
+                ctx.emit('foo', 'bar')
+              }
+            },
+            'hello world'
+          )
+      }
+    })
+
+    const wrapper1 = mount(Foo)
+    await wrapper1.trigger('click')
+    expect(wrapper1.emitted('foo')).toHaveLength(1)
+
+    const wrapper2 = mount(Foo)
+    await wrapper2.trigger('click')
+    expect(wrapper2.emitted('foo')).toHaveLength(1)
+    expect(wrapper1.emitted('foo')).toHaveLength(1) // ensuring that subsequent mount does not clear event history for other wrappers
+
+    wrapper1.unmount()
+    wrapper2.unmount()
+  })
 })