15

Is there a way to actually trigger the submission of a form by clicking on a submit button in a Vue Unit Test?

Let's take this simple component:

<template>
    <form @submit.prevent="$emit('submitEventTriggered')">
        <button type="submit">Submit Form</button>
    </form>
</template>

<script>
    export default {}
</script>

You can find a similar component as an example here.

I want to test that submit.prevent gets triggered when the button is clicked and therefore the submitEventTriggered is emitted. When I run this in a browser everything works as expected, but the following test fails:

import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'

describe.only('Form', () => {

    it('button click triggers submit event', () => {
        const wrapper = shallowMount(Form)

        wrapper.find('[type=\'submit\']').trigger('click')

        assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
    })
})

With this output:

AssertionError: Form submit not triggered: expected undefined to exist

If I change the action to trigger submit.prevent on the form directly everything works fine, but then there is actually no test coverage for the submitting via button.

wrapper.find('form').trigger('submit.prevent')

It seems like the trigger function doesn't actually click the button.

Why is this and is there a way to fix it?

karel
  • 5,489
  • 46
  • 45
  • 50
Marvin Rabe
  • 4,141
  • 3
  • 25
  • 43

1 Answers1

22

Note: The previous method used attachToDocument, which has been deprecated,

The issue is that Vue Test Utils does not attach DOM nodes to the document by default. This is to avoid enforcing cleanup. You can solve this by setting attachTo to an HTML element when you mount the component:

const div = document.createElement('div')
div.id = 'root'
document.body.appendChild(div)

it('button click triggers submit event', () => {
  const wrapper = shallowMount(Form, {
    attachTo: '#root'
  })

  wrapper.find("[type='submit']").trigger('click')

  assert.exists(
    wrapper.emitted('submitEventTriggered'),
    'Form submit not triggered'
  )
})

You should remove the DOM node from the document to avoid a memory leak. You can do this by calling destroy on the wrapper:

wrapper.destroy()
marcellothearcane
  • 174
  • 3
  • 18
Edward
  • 5,148
  • 2
  • 29
  • 42
  • Where is the documentation of `Vue Test Utils does not attach DOM nodes to the document by default`? – Daniel Listyo Emanuel Jul 29 '19 at 02:56
  • @DanielListyoEmanuel https://vue-test-utils.vuejs.org/api/options.html#attachtodocument – Lucas Sep 05 '19 at 20:21
  • 1
    this isn't working for me, and the [`attachTo` example on the Vue Test Utils site doesn't either](https://vue-test-utils.vuejs.org/api/options.html#attachto), is there some config that needs to be added for `attachTo` to work with `mount`/`shallowMount`? – fredrivett Sep 10 '20 at 14:14
  • the example in the vue test utils website has an error (a PR was submitted to fix it so it might be corrected soon) `expect(wrapper.vm.$el.parentNode).to.not.be.null` should be `expect(wrapper.vm.$el.parentNode).not.toBeNull()` – geneowak Nov 29 '21 at 09:39
  • 1
    I got the error `Error: Not implemented: HTMLFormElement.prototype.submit`. So instead of triggering the submit via the button, I did like below: `wrapper.findComponent('form').trigger('submit')` and I could remove the `attachTo` and others. May be useful in case one does not need to test DOM features, but only the submit event of the form – Marco Arruda Oct 17 '22 at 19:34
  • @MarcoArruda's comment helped me, but I used `wrapper.find('form').trigger('submit')` not `findComponent()`. – Leo Jun 27 '23 at 18:16