Submit a form using a submit button does not trigger handler function

[MrShnaider]

Subject of the issue

I was trying to reproduce a simple scenario. The component contains an input and a button, wrapped by form. The text is entered in the input field, and when you click on the button, the form is submited and the text is deleted. However, after clicking on the button form does not submit and test fails.

Steps to reproduce

// component.vue
<template>
    <form @submit.prevent="submitForm">
        <input type="text" v-model="inputValue" />
        <button type="submit">Submit</button>
    </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputValue = ref('');
const submitForm = () => {
    inputValue.value = '';
}
</script>

// component.test.ts
import { DOMWrapper, mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import component from './component.vue';

describe('component test', async () => {
    it('clear input after submit', async () => {
        const wrapper = mount(component);
        const input = wrapper.get('input') as DOMWrapper<HTMLInputElement>;
        const button = wrapper.get('button');

        expect(input.element.value).toBe('');
        await input.setValue('Test input');
        expect(input.element.value).toBe('Test input');
        await button.trigger('click');
        expect(input.element.value).toBe(''); // fails and say, that value='Test input'
    })
})

Expected behaviour

If I click on button I expect that form would be submitted and handler function would be called

Actual behaviour

Handler function was not called

Possible Solution

I tried to bind components to the DOM using AttachTo and read the "Form Handling" documentation. None of this helped. If there are exceptions to this behavior, you need to add them to the "Form Handling" documentation

[lmiller1990]

I have also encountered this. What version of jsdom are you on? It was a bug in jsdom a while ago, I think it's been fixed since.

[MrShnaider]

@lmiller1990 I use jsdom 20.0.3 - it is the last version. I checked it again, it still does not work((( And I think a wrote in the wrong repo, because I use Vue 3

[lmiller1990]

Oh, should this be in the Vue 3 Test Utils repo?

I tried just jsdom, works fine - must be a bug in our code...

require('jsdom-global')()

document.body.innerHTML = `
<form><button type="submit">submit</button></form>
`

new Promise(res => {
  document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault()
    console.log('Submitted!')
    res()
  })
}).then(() => {
  console.log('done')
})

document.querySelector('button').click()

It submits.

[deleugpn]

I'm also facing this issue on Vue 3.3

    "vue": "^3.3.4",
    "vuetify": "^3.3.13"

    "@types/moxios": "^0.4.15",
    "@vue/test-utils": "^2.4.1",
    "axios-mock-adapter": "^1.21.5",
    "jsdom": "^22.1.0",
    "typescript": "^5.1.6",
    "vite": "^4.0.0",
    "vite-plugin-svgr": "^3.2.0",
    "vitest": "^0.34.1",
    "vue-tsc": "^1.8.8"

[lmiller1990]

@deleugpn wrong repo, you want https://github.com/vuejs/test-utils/ for Vue 3.x and Test Utils 2.x

[ricardovanlaarhoven]

Same issue with vue3

    "jsdom": "^23.2.0",
    "vue": "^3.4.15",
    "@vue/test-utils": "^2.4.3",

[lmiller1990]

Please post a minimal reproduction in the https://github.com/vuejs/test-utils/ repo.