Trigger form submit on button click in Vue Unit Test

Question

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?

This seems to me like a bug. I reported it here: github.com/vuejs/vue-test-utils/issues/1030 — Marvin Rabe
– Marvin Rabe, Commented Nov 19, 2018 at 21:30
Having the same issue - commented on the github issue - hopefully it can be resolved. — Scott Flack
– Scott Flack, Commented Nov 21, 2018 at 4:50

marcellothearcane · Accepted Answer · 2020-09-03 09:33:32Z

23

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()

edited Sep 3, 2020 at 9:33

marcellothearcane

1743 silver badges18 bronze badges

answered Nov 23, 2018 at 17:17

Edward

5,2482 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Listyo Emanuel Over a year ago

Where is the documentation of Vue Test Utils does not attach DOM nodes to the document by default?

Lucas Over a year ago

@DanielListyoEmanuel vue-test-utils.vuejs.org/api/options.html#attachtodocument

fredrivett Over a year ago

this isn't working for me, and the attachTo example on the Vue Test Utils site doesn't either, is there some config that needs to be added for attachTo to work with mount/shallowMount?

geneowak Over a year ago

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()

Marco Arruda Over a year ago

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

|

Collectives™ on Stack Overflow

Trigger form submit on button click in Vue Unit Test

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related