reactjs - 为什么在我使用 React 测试库的测试中没有执行 jest 模拟函数？

Question

问题

为了更好地说明，我创建了一个非常基本的代码示例。 这是我要测试的代码(包含简单的 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();
  });

这与 react 钩子(Hook)有关吗？我也尝试重新渲染它但结果相同。 我不知道为什么这不会通过。错误信息是:

Expected mock function to have been called, but it was not called.

如果您想尝试一下，这里有一个代码和框:

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

Answer 1

看起来这是一个简单的问题，cleanup 实际上并没有在 afterEach 中被调用。这意味着在第二次测试期间，document 中呈现了两个 form 元素，并且 getByTestId 返回第一个元素。

改变

afterEach(() => cleanup)

到任一

afterEach(() => cleanup())

或者只是

afterEach(cleanup)