I have the following component, using Vue Formulate
<template>
<FormulateForm @submit="onSubmit">
<button type="submit">Submit</button>
</FormulateForm>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Issue',
methods: {
onSubmit(): void {
this.$emit('my-special-event')
},
},
})
</script>
<style scoped></style>
My goal is to test that, when I click the "Submit" button, my-special-event event is emitted. And I need to do this using testing-library. Here's my attempt:
import '@testing-library/jest-dom'
import { fireEvent, render } from '@testing-library/vue'
import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'
import Issue from '~/components/Issue.vue'
describe('Issue component', () => {
it('test', async () => {
Vue.use(VueFormulate)
const component = render(Issue)
const submitBtn = component.getByText('Submit')
await fireEvent.click(submitBtn)
expect(component.emitted()).not.toEqual({})
})
})
Unfortunately, this doesn't work - no events are emitted. A similar test for a non-Formulate form works ok, though.
await nextTick()or flush promises after the button click before you check for emissionawait new Promise(process.nextTick)seems to do the trick. Want to add an answer, so that you get the credit? :)