Triggering a click on a submit button does not submit the parent form

[vvanpo]

Subject of the issue

Minimal reproduction: https://github.com/vvanpo/minimal-repros/blob/e979bdbf92ad2b16baa2921e902d634c2db28b6d/vue-test-utils/test.js
Tests:

import { createLocalVue, mount } from '@vue/test-utils'
import { JSDOM } from 'jsdom'

describe('@vue/test-utils', () => {
  test('Clicking a type="submit" should submit the parent form', async () => {
    const localVue = createLocalVue()
    let submitted = false
    const wrapper = mount(
      {
        template: `
          <form @submit.prevent="submitted">
            <button type="submit"></button>
          </form>
        `,
        methods: {
          submitted() { submitted = true },
        },
      },
      { localVue },
    )

    await wrapper.get('button').trigger('click')

    expect(submitted).toBe(true)
  })
})

describe('jsdom', () => {
  test('Clicking a type="submit" should submit the parent form', () => {
    const { window } = new JSDOM(`
      <form>
        <button type="submit"></button>
      </form>
    `)
    const { document } = window
    let submitted = false

    const form = document.querySelector('form')
    form.addEventListener('submit', (event) => {
      event.preventDefault()
      submitted = true
    })

    const submit = document.querySelector('button')
    submit.dispatchEvent(new window.MouseEvent('click'))

    expect(submitted).toBe(true)
  })
})

Results:

 FAIL  ./test.js
  @vue/test-utils
    ✕ Clicking a type="submit" should submit the parent form (27 ms)
  jsdom
    ✓ Clicking a type="submit" should submit the parent form (53 ms)

  ● @vue/test-utils › Clicking a type="submit" should submit the parent form

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      22 |     await wrapper.get('button').trigger('click')
      23 | 
    > 24 |     expect(submitted).toBe(true)
         |                       ^
      25 |   })
      26 | })
      27 | 

      at _callee$ (test.js:24:23)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:293:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:118:21)
      at asyncGeneratorStep (test.js:13:103)
      at _next (test.js:15:194)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.893 s

As you can see, this is not jsdom's fault, jsdom has the correct behaviour.

[vvanpo]

Hmm I think I should have mounted a Vue component within the jsdom test to allow for a proper comparison. If I wrap the first test's expectation in setTimeout() to ensure the task queue is cleared first, the test passes. So I suppose this is expected behaviour, I'll close this.

[vvanpo]

Nevermind, that wasn't the issue at all; wrapping it in setTimeout meant the expectation was never being called, as the test would complete before then, I needed to properly wrap the setTimeout() in a promise and then it would still fail. So this is still a bug.

I've made another minimal reproduction using Vue 3 and @vue/test-utils 2 just to see if it's a bug there too, so I'm opening a bug in vue-test-utils-next as well.

[vvanpo]

As we discovered in the other issue, the problem isn't with @vue/test-utils but is with the default procedure that mount() uses. In order to make form submissions work, the component needs to be attached to the DOM, using the attachTo option: https://vue-test-utils.vuejs.org/api/options.html#attachto