为什么在我的测试中没有用react测试库执行jest mock函数?

问题

我创建了一个非常基本的代码示例,以便更好地进行说明。 下面是我要测试的代码(包含简单的react hook):

const TodoHeader = ({ handleSubmit }) => {
  const [value, setValue] = useState("");

  return (
    <form onSubmit={handleSubmit} data-testid="form">
      <input
        type="text"
        placeholder="Your Todo.."
        onChange={e => setValue(e.target.value)}
        value={value}
        data-testid="input"
      />
    </form>
  );
};

我想测试一下 handleSubmit 道具将被执行。所以我设置了这个测试:

it("should call the passed in onSubmit function", () => {
    const mockFn = jest.fn();

    const { getByTestId } = render(
      <TodoHeader handleSubmit={mockFn} />
    );
    const form = getByTestId("form");
    fireEvent.submit(form);
    // This will fail (did not get executed)
    expect(mockFn).toHaveBeenCalled();
  });

这和反应钩有关吗?我也试着重新发送,但结果是一样的。 我不知道为什么这件事不会过去。错误消息为:

应调用模拟函数,但未调用它。

下面是一个代码沙盒,如果你想玩它的话:

https://codesandbox.io/s/ypok50n709 ( TodoHeader.js 和 TodoHeader.test.js )