feat: fireEvent.emit

src/__tests__/components/WithChildComponent/Child.vue

@@ -0,0 +1,13 @@
+<template>
+  <button @click="handleClick">Click me</button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick(e) {
+      this.$emit('custom', e)
+    },
+  },
+}
+</script>

src/__tests__/components/WithChildComponent/Parent.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <Child data-testid="child" @custom="handleCustom" />
+  </div>
+</template>
+
+<script>
+import Child from './Child.vue'
+
+export default {
+  components: {
+    Child,
+  },
+  methods: {
+    handleCustom(e) {
+      this.$emit('custom', e)
+    },
+  },
+}
+</script>

src/__tests__/vue-custom-event.js

@@ -0,0 +1,14 @@
+import {render, fireEvent} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+import Component from './components/WithChildComponent/Parent.vue'
+
+test('Custom vue events handling', async () => {
+  const payload = {foo: 'bar'}
+  const {getByTestId, emitted} = render(Component)
+
+  expect(emitted.custom).toBeUndefined()
+
+  await fireEvent.emit(getByTestId('child'), 'custom', payload)
+
+  expect(emitted().custom).toEqual([[payload]])
+})

src/fire-event.js

@@ -80,6 +80,20 @@ fireEvent.update = (elem, value) => {
   return null
 }
 
+// fireEvent.emit is a syntax sugar to fire custom events on vue-elements.
+// Custom events can't be fired just with fireEvent, event it has the same name
+// as native one.
+// Examples: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-custom-event.js
+fireEvent.emit = async (elem, eventName, value) => {
+  if (!elem.__vue__) {
+    throw new Error(
+      `Unable to fire a ${eventName} event – please provide a VUE component.`,
+    )
+  }
+
+  await elem.__vue__.$emit(eventName, value)
+}
+
 function warnOnChangeOrInputEventCalledDirectly(eventValue, eventKey) {
   if (process.env.VTL_SKIP_WARN_EVENT_UPDATE) return