user-event icon indicating copy to clipboard operation
user-event copied to clipboard

userEvent.click on <button type="submit" /> does not trigger form onSubmit() method

Open cjOne7 opened this issue 1 year ago • 2 comments

Reproduction example

https://codesandbox.io/p/devbox/uservent-click-test-showcase-qdnhsg?file=%2Fsrc%2F__tests__%2FMultistemForm.test.tsx%3A29%2C1

Prerequisites

  1. Render a <form /> with a <button type="submit /> inside.
  2. Attempt to submit the form using userEvent.click().
  3. 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 image

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

cjOne7 avatar Feb 14 '24 16:02 cjOne7

Still waiting for fix...

cjOne7 avatar Apr 29 '24 15:04 cjOne7

I also faced this issue. And for some reason, fireEvent.submit() doesn't help in my case.

aKaradzhov97 avatar May 08 '24 12:05 aKaradzhov97

image The test in the reproduction example passes :thinking:

ph-fritsche avatar Jun 03 '24 12:06 ph-fritsche

image image image

it's weird, but now it really passed

cjOne7 avatar Jun 03 '24 12:06 cjOne7