Estoy usando react-hook-form para construir un formulario. El formulario funcionó bien, pero la prueba no está pasando.
La prueba pasa cuando no uso react-hook-form y jsut pass onSubmit <form onSubmit={onSubmit}> . Cuando paso onSubmit con handleSubmit <form onSubmit={handleSubmit(onSubmit)}> , no pasa.
Aquí está mi formulario 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> ); } Y aquí está la prueba que he escrito para ella 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); });El código de trabajo también está disponible en https://codesandbox.io/s/react-hook-form-testing-olo4i
handleSubmit tiene debajo de la firma, como puede ver, el valor de retorno es una promesa. Es asíncrono.
Eso significa que llamarlo así handleSubmit(onSubmit)(e) devolverá una promesa.
type UseFormHandleSubmit<TFieldValues extends FieldValues> = <TSubmitFieldValues extends FieldValues = TFieldValues>(onValid: SubmitHandler<TSubmitFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;Necesitas usar waitFor de 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); }) });Si no espera a que se complete el código asincrónico, es posible que se ejecute después de que finalice la aserción.
Código fuente de referencia