react-hook-form表单提交运行正常 单元测试回调未触发如何解决

react-hook-form 封装的 handleSubmit 方法内部逻辑为异步执行，即使没有配置任何校验规则，回调函数的触发时机也晚于同步执行的断言语句，所以会出现调用次数为0的报错。你去掉handleSubmit封装后测试能通过，是因为此时的提交回调为同步触发，和断言执行顺序一致。

给测试用例添加异步处理，用@testing-library/react提供的waitFor包裹断言语句，等待异步逻辑执行完成即可。修改后的测试代码如下：

import { render, fireEvent, waitFor } from "@testing-library/react";

describe("New Reason Form", () => {
  // 测试用例函数添加async标记
  it("calls onCreate prop when the form is submitted", async () => {
    const onCreate = jest.fn().mockName("onCreate");
    const { queryByTestId } = render(
      <NewReasonForm onCreate={onCreate} />
    );

    const submitButton = queryByTestId("submit");
    fireEvent.click(submitButton!);

    // 用waitFor包裹断言，等待回调触发
    await waitFor(() => {
      expect(onCreate).toHaveBeenCalledWith("New Reason 1");
    });
  });
});

如果希望更贴合原生表单的提交触发逻辑，也可以给form组件添加data-testid属性，直接触发表单的submit事件，效果完全一致：

// 组件内给form添加测试ID
<form data-testid="new-reason-form" onSubmit={handleSubmit(onSubmit)}>

// 测试代码中替换触发逻辑
const form = queryByTestId("new-reason-form");
fireEvent.submit(form);

内容的提问来源于stack exchange，提问作者Robert Mengual