Form submit does not trigger type="submit" buttons

[dvkuznietsov]

• @testing-library/react version: 11.2.2
• Testing Framework and version: jest@26.6.3
• DOM Environment: default jsdom shipped wit jest

Relevant code or config:

import * as React from "react";

export default function App({ onClick }) {
  return (
    <form
      className="App"
      data-testid="form"
      onSubmit={(e) => e.preventDefault()}
    >
      <input type="text" data-testid="test" />
      <button data-testid="button" onClick={onClick}>
        click
      </button>
    </form>
  );
}

What you did:

I had a bug related to the fact that buttons inside of form implicitly get the submit type and get clicked on form submit. I wrote the test to capture this behaviour:

describe("test suite", async () => {
  it("test clause", async () => {
    const a = jest.fn();
    render(<App onClick={a} />);

    fireEvent.submit(screen.getByTestId("form"));

    expect(a).toBeCalled();
  });
});

What happened:

The test failed with message

expect(jest.fn()).toBeCalled()

Expected number of calls: >= 1
Received number of calls:    0

Reproduction:

https://codesandbox.io/s/react-testing-library-playground-forked-0ki4g

Is this a react-testing-library or underlying jsdom issue?

[eps1lon]

Is this a react-testing-library or underlying jsdom issue?

JSDOM. Though I don't think the submitter is clicked when a submit event is fired. Rather I suspect you pressed Enter in an input which clicks the form submitter.

In any case, please open a new issue in the JSDOM repository.