userEvent.click on <button type="submit" /> does not trigger form onSubmit() method
Reproduction example
https://codesandbox.io/p/devbox/uservent-click-test-showcase-qdnhsg?file=%2Fsrc%2F__tests__%2FMultistemForm.test.tsx%3A29%2C1
Prerequisites
- Render a
<form />with a<button type="submit />inside. - Attempt to submit the form using
userEvent.click(). - Forbid to pass onSubmit method as props.
Expected behavior
Expected the form to be submitted, its onSubmit() handle method will be called, button with text Previous will be appeared and test passed.
To run test just type npm run test in the console
Actual behavior
Test failed, button with text Previous didn't find, because form has not been submitted. But this example works perfectly:
await waitFor(() => {
fireEvent.submit(getByText("Previous"));
});
User-event version
14.5.2
Environment
"react-dom": "18.2.0", "react": "18.2.0",
"@testing-library/jest-dom": "6.4.2", "@testing-library/react": "14.2.1", "@testing-library/user-event": "14.5.2", "@types/react-dom": "18.2.19", "@types/react": "18.2.55", "@vitejs/plugin-react": "4.2.1", "@vitest/coverage-v8": "1.2.2", "jsdom": "24.0.0", "typescript": "5.3.3", "vite": "5.1.0", "vitest": "1.2.2"
Additional context
This issue has been reported before https://github.com/testing-library/user-event/issues/1032
Still waiting for fix...
I also faced this issue. And for some reason, fireEvent.submit() doesn't help in my case.
The test in the reproduction example passes :thinking:
it's weird, but now it really passed