如何在 RTL 中测试回调的 return 结果？

Question

我希望 callback 到 return true 或 false。我知道如何测试被调用的函数，但如何测试该函数是否 returned 特定值？我如何使用反应测试库来做到这一点？

我的代码：

it('sends back error callback', () => {
    const isError = (val) => val;
    render(<Component callback={isError}/>);
    const input = screen.getAllByRole('textbox')[0];
    fireEvent.change(input, {target: {value: '100.98'}});
    expect(isError).toHaveBeenCalledTimes(1);
  })

Answer 1

如果你使用 Mock (jest.fn())，你可以简单地使用 toHaveBeenCalledWith.

所以在你的情况下：

it("sends back error callback", () => {
  const isError = jest.fn();
  render(<Component callback={isError} />);
  const input = screen.getAllByRole("textbox")[0];
  fireEvent.change(input, { target: { value: "100.98" } });
  expect(isError).toHaveBeenCalledWith(false);
});

或者使用此替代方法，尤其是当您对代码的异步性质有疑问时：

it("sends back error callback", (done) => {
  const isError = (val) => {
    expect(val).toBe(false);
    done();
  };

  render(<Component callback={isError} />);
  const input = screen.getAllByRole("textbox")[0];
  fireEvent.change(input, { target: { value: "100.98" } });
});

阅读有关异步代码的更多信息：https://jestjs.io/docs/asynchronous。

如果您对我的 answer/or 答案无效有任何疑问，请在评论中回复我。

如何在 RTL 中测试回调的 return 结果？

How to test for return result from callback in RTL?

reactjs

react-testing-library