如何检查 Jest 测试中是否调用了 useState 集（在 props 中传递）？

Question

我有一个具有以下功能的 React 组件：

const changeOrder => { a websocket request
};

const handleArrow = async () => {
    const res = await changeOrder(side, headingOrder, config);
    if (res !== undefined) setOrder(res);
};

setOrder

是一组在props中传递的useState

我想测试

setOrder

是否是这样调用的：

// WebSocket Mock-up
let ws: WS;
beforeEach(async () => {
    ws = new WS("ws://localhost:8764", { jsonProtocol: true });
    new WebsocketClient("localhost", 8764);
    await ws.connected;
});
afterEach(() => {
    WS.clean();
});

describe("The ChangeOrderArrow component", () => {
    it("should render left arrow and can send a request to change the heading order", async () => {
        const setOrder = jest.fn();
        render(
            <ChangeOrderArrow
                setOrder={setOrder}
            />,
        );

        fireEvent.click(screen.getByTestId("left-heading-button"));

        const req: { request: RequestMessage } = (await ws.nextMessage) as { request: RequestMessage };
        const uuid = req.request.path.split("/")[2];

        expect(req.request.options.value).toEqual(359);

        act(() => {
            ws.send(responseChangeOrderArrow(uuid));
        });

        expect(setOrder).toHaveBeenCalled();
    });
});

只有最后一行

.toHaveBeenCalled

失败了，当然我希望返回 true。

返回的笑话错误是：

expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

当调用

if (res !== undefined)

时，我检查是否满足条件

handleArrow()

。

有人有线索吗？

Answer 1

因为

setOrder

位于

await changeOrder(side, headingOrder, config);

函数中的

handleArrow()

之后，所以我需要在测试中这样等待：

await waitFor(() => {
    expect(setOrder).toHaveBeenCalledWith(234);
});

现在期待通过！