I am using react-hook-form to build a form. The form worked well but the test is not passing.
The test passes when I don't use react-hook-form and jsut pass onSubmit <form onSubmit={onSubmit}>. As I pass onSubmit with handleSubmit <form onSubmit={handleSubmit(onSubmit)}>, it does not pass.
Here is my form
App.js
import { useForm } from "react-hook-form";
export default function App({ onSubmit = (data) => console.log(data) }) {
const { handleSubmit, register } = useForm();
return (
// <form onSubmit={onSubmit}> <--- This works
// <form onSubmit={handleSubmit(onSubmit)}> <--- This doesn't work
<form onSubmit={handleSubmit(onSubmit)}>
<input
placeholder="Email"
defaultValue=""
key="email"
{...register("email")}
/>
<input
placeholder="Password"
defaultValue=""
key="password"
{...register("password")}
/>
<input type="submit" value="submit" />
</form>
);
}
And here's the test I've written for it
App.test.js
import { render, screen } from "@testing-library/react";
import App from "./App";
import userEvent from "@testing-library/user-event";
test("email and password field are clear for submit", async () => {
const handleSubmit = jest.fn();
render(<App onSubmit={handleSubmit} />);
userEvent.type(screen.getByPlaceholderText(/email/i), "test@example.com");
userEvent.type(screen.getByPlaceholderText(/password/i), "password");
userEvent.click(screen.getByText(/submit/i));
expect(handleSubmit).toHaveBeenCalledTimes(1);
});
Working code is also available at https://codesandbox.io/s/react-hook-form-testing-olo4i
handleSubmit has below the signature, as you can see, the return value of it is a promise. It's asynchronous.
That means calling it like this handleSubmit(onSubmit)(e) will return a promise.
type UseFormHandleSubmit<TFieldValues extends FieldValues> = <TSubmitFieldValues extends FieldValues = TFieldValues>(onValid: SubmitHandler<TSubmitFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;
You need to use waitFor of RTL:
import { render, screen, waitFor } from "@testing-library/react";
import App from "./App";
import userEvent from "@testing-library/user-event";
test("email and password field are clear for submit", async () => {
const handleSubmit = jest.fn();
render(<App onSubmit={handleSubmit} />);
userEvent.type(screen.getByPlaceholderText(/email/i), "test@example.com");
userEvent.type(screen.getByPlaceholderText(/password/i), "password");
userEvent.click(screen.getByText(/submit/i));
await waitFor(() => {
expect(handleSubmit).toHaveBeenCalledTimes(1);
})
});
If you do not wait for the asynchronous code to complete, it may execute after the assertion ends.
Reference source code