Kula.blog

How to test onSubmit in react-testing-library

I have a form component that I want to test Form.js:

function Form(props) {
return (
<form onSubmit={props.onSubmit}>
<button type="submit">Submit</button>
</form>
);
}

Because I've heard a lot about react-testing-library that's what we're going to use in Form.test.js:

import React from "react";
import { render, fireEvent } from "react-testing-library";
import Form from "./Form";

it("submits", () => {
const onSubmit = jest.fn();
const { getByText } = render(<Form onSubmit={onSubmit} />);
fireEvent.click(getByText("Add"));
expect(onSubmit).toHaveBeenCalled();
});

Please take a look at react-testing-examples.com/jest-rtl if you notice that there is no call to cleanup

Unfortunately, I get an error:

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: HTMLFormElement.prototype.submit

That's weird. It even seems to be used in the examples I've found for testing forms.

Workaround:

I've worked around it by firing submit on the form itself. See new Form.test.js:

import React from "react";
import { render, fireEvent } from "react-testing-library";
import Form from "./Form";

it("submits", () => {
const onSubmit = jest.fn();
const { getByTestId } = render(<Form onSubmit={onSubmit} />);
fireEvent.submit(getByTestId("form"));
expect(onSubmit).toHaveBeenCalled();
});

Difference:

    const onSubmit = jest.fn();
- const { getByText } = render(<Form onSubmit={onSubmit} />);
- fireEvent.click(getByText("Add"));
+ const { getByTestId } = render(<Form onSubmit={onSubmit} />);
+ fireEvent.submit(getByTestId("form"));
expect(onSubmit).toHaveBeenCalled();

Please remember to add data-testid to your Form.js:

function Form(props) {
return (
<form onSubmit={props.onSubmit} data-testid="form">
<button type="submit">Submit</button>
</form>
);
}
return (
- <form onSubmit={props.onSubmit}>
+ <form onSubmit={props.onSubmit} data-testid="form" >
<button type="submit">Submit</button>
</form>
);
});

Now you can build on top of the test.


← Home