0

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.

2
  • 1
    You probably need to await nextTick() or flush promises after the button click before you check for emission Commented Apr 8, 2022 at 14:30
  • @jpschroeder, adding await new Promise(process.nextTick) seems to do the trick. Want to add an answer, so that you get the credit? :) Commented Apr 8, 2022 at 16:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.