javascript - Why Form Test Fails While Using React Hook Form? - Stack Overflow

admin管理员组

文章数量:1403221

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), "[email protected]");
  userEvent.type(screen.getByPlaceholderText(/password/i), "password");
  userEvent.click(screen.getByText(/submit/i));

  expect(handleSubmit).toHaveBeenCalledTimes(1);
});

Working code is also available at

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), "[email protected]");
  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

• javascript
• reactjs
• react-hooks
• react-testing-library
• react-hook-form

Share Improve this question Follow edited Oct 25, 2021 at 12:31 Abdur Rahman 1,01111 gold badge1212 silver badges2828 bronze badges asked Oct 25, 2021 at 10:20 PrateekPrateek 8641111 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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), "[email protected]");
  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 plete, it may execute after the assertion ends.

Codesandbox

Reference source code

本文标签： javascriptWhy Form Test Fails While Using React Hook FormStack Overflow