Vue-test-utils: Form submit event is not triggered when Submit Button gets clicked

[marvinrabe]

Version

1.0.0-beta.25

Reproduction link

https://github.com/marvinrabe/vue-test-util-form-submit-issue

Steps to reproduce

How to reproduce it manually:

1. Create this Form.vue component:

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

1. Run this test with the Mocha Chai setup provided by the vue-cli tool (Version 3):

    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')
        })

    })

When using the minimal reproduction:

1. Checkout repository
2. Run yarn install
3. Run yarn test:unit

What is expected?

Test succeeds.

What is actually happening?

It fails with this error message:

AssertionError: Form submit event triggered: expected undefined to exist

---

When triggering the submit.prevent event directly on the form everything works fine.

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

But then there is actually no test coverage for the submitting via button. Nothing prevents me to change type="submit" to type="button".

[sfgn]

I'm having the same issue, but I'm using bootstrapvue buttons and AVA within a nuxtjs project. If I find the form and trigger submit, my function will be called. If I trigger click on the button, it will not be called.

It definitely works either way within browsers, just the test fails for button click.

[marvinrabe]

I did some research on this issue. It seems that jsdom does not support HTMLFormElement.prototype.submit at this time.

But it dispatches a HTML submit event when a submit button click happens. See https://github.com/jsdom/jsdom/issues/123#issuecomment-440601695 for details.

I tried calling the click function on the HTMLButtonElement directly. This still wont work.

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

[eddyerburgh]

The issue is because Vue Test Utils doesn't add mounted DOM nodes to the document. You can fix this by setting attachToDocument to true:

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

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

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

In the future we might consider attaching to the document by default, to avoid issues like this. Although we would then need to run a cleanUp function at the end of each test.

[andreixk]

I'm still getting the same issue - if i trigger submit on the form directly, it works, but triggering click doesn't. There's one difference: i'm using Vuetify framework, so the button is not native HTML, but rather component.

[KidSysco]

I had the same experience as @andreixk above with Vuetify.

Form submit buttons do not behave properly in the vue-test-util wrapper object. The submit button never calls the form submit event. I am using @submit.prevent on the form, which never gets called.

So this does not work...

searchSubmitButton.trigger('click');

But this does work...

searchForm.trigger('submit');

However, this is a bug because it does not allow us to test the functionality of Submit buttons to ensure they work now and in the future.

[KidSysco]

After reading through here a few more times, it looks like attachToDocument: true solves the problem.

That one is really hard to understand. I have no idea what could be meant by saying that we would need to clean up after each test.

Is this safe to do or not? Do I need to run a bunch of clean up code now that I turned on attachToDocument?

Any insight is appreciated.

[andreixk]

Is this safe to do or not? Do I need to run a bunch of clean up code now that I turned on attachToDocument?

According to the documentation you just need to call wrapper.destroy() after the test.

[KidSysco]

Perhaps we just mean calling destroy...

https://vue-test-utils.vuejs.org/api/options.html#attachtodocument