Bug: clicking button type submit doesn't trigger submit event

[Ricardo van Laarhoven]

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)

[Cédric Exbrayat]

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

[Cédric Exbrayat]

Duplicate of #2318