fix: capture emitted events from script setup components (#663)

* fix: capture emitted events from script setup components

* fix missing import

Author: lmiller1990

src/mount.ts

@@ -10,7 +10,6 @@ import {
   ComponentOptionsWithoutProps,
   ExtractPropTypes,
   WritableComputedOptions,
-  ComponentPropsOptions,
   AppConfig,
   VNodeProps,
   ComponentOptionsMixin,
@@ -21,7 +20,8 @@ import {
   ExtractDefaultPropTypes,
   VNode,
   EmitsOptions,
-  ComputedOptions
+  ComputedOptions,
+  ComponentPropsOptions
 } from 'vue'
 
 import { MountingOptions, Slot } from './types'
@@ -337,6 +337,15 @@ export function mount(
   const Parent = defineComponent({
     name: MOUNT_PARENT_NAME,
     render() {
+      // https://github.com/vuejs/vue-test-utils-next/issues/651
+      // script setup components include an empty `expose` array as part of the
+      // code generated by the SFC compiler. Eg a component might look like
+      // { expose: [], setup: [Function], render: [Function] }
+      // not sure why (yet), but the empty expose array causes events to not be
+      // correctly captured.
+      // TODO: figure out why this is happening and understand the implications of
+      // the expose rfc for Test Utils.
+      delete component.expose
       return h(component, props, slots)
     }
   })

tests/components/EmitsEventSFC.vue

@@ -0,0 +1,21 @@
+<template>
+  <button @click="click" />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+
+export default defineComponent({
+  emits: ['bar'],
+  setup(props, { emit }) {
+    onMounted(() => {
+      emit('bar', 'mounted')
+    })
+
+    return {
+      click: () => emit('bar', 'click')
+    }
+  }
+})
+
+</script>

tests/components/EmitsEventScriptSetup.vue

@@ -0,0 +1,15 @@
+<template>
+  <button @click="click" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, defineEmit } from 'vue';
+
+const emit = defineEmit(['bar']);
+
+const click = () => emit('bar', 'click')
+
+onMounted(() => {
+  emit('bar', 'mounted')
+})
+</script>

tests/emit.spec.ts

@@ -6,6 +6,8 @@ import {
   SetupContext
 } from 'vue'
 import { Vue } from 'vue-class-component'
+import EmitsEventSFC from './components/EmitsEventSFC.vue'
+import EmitsEventScriptSetup from './components/EmitsEventScriptSetup.vue'
 
 import { mount } from '../src'
 
@@ -319,4 +321,17 @@ describe('emitted', () => {
     await wrapper.trigger('click')
     expect(wrapper.emitted('foo')).toHaveLength(1)
   })
+
+  it.each([EmitsEventSFC, EmitsEventScriptSetup])(
+    'captures emitted events',
+    async (component) => {
+      const wrapper = mount(component)
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted().click).toHaveLength(1)
+      expect(wrapper.emitted().bar).toHaveLength(2)
+      expect(wrapper.emitted().bar[0]).toEqual(['mounted'])
+      expect(wrapper.emitted().bar[1]).toEqual(['click'])
+    }
+  )
 })