Bug: clicking button type submit doesn't trigger submit event
ricardovanlaarhoven opened this issue · comments
Describe the bug
When creating a simple form, with a submit button.
And you trigger a click on that button, the submit request is not triggered.
But when triggering a submit, it does work
To Reproduce
TestComponent.vue
<template>
<form @submit.prevent="testFunction">
<button type="submit">
Submit
</button>
{{ isCalled }}
</form>
</template>
<script setup>
import { ref } from "vue";
const isCalled = ref("Nope not called");
function testFunction () {
isCalled.value = "Yes called";
}
</script>
The tests
it("works", async () => {
const wrapper = mount(TestComponent);
await wrapper.find("form").trigger("submit");
await flushPromises();
expect(wrapper.html()).toContain("Yes");
});
it("doesnt work", async () => {
const wrapper = mount(TestComponent);
await wrapper.find("button").trigger("click");
await flushPromises();
expect(wrapper.html()).toContain("Yes");
});
Expected behavior
Both test succeed
Related information:
vuejs/vue-test-utils#2018 (comment)
You probably need to attach the component to the DOM, see this note in the docs https://test-utils.vuejs.org/guide/essentials/forms.html#Native-form-submission
Duplicate of #2318