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

Question

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

我的代码：

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.

如果你对我的答案有任何问题/或答案不起作用，请在评论中回复我😊.