Open
Description
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