jestjs - Jest + React-testing-library - 等待模拟的异步函数完成

Question

我的 componentDidMount()触发对异步函数的调用，但根据该函数的结果，它可能不会导致任何 DOM 更改。有什么办法可以等待该功能在我的测试中完成吗？

这是一个示例 - 单击按钮最初是禁用的。如果 async 函数返回 true，则应启用单击按钮:

    myAsyncFunction.mockImplementation(() => true);
    const {queryByText} = render(<Component />);
    const button = queryByText("Click");
    expect(button).toBeDisabled();
    await waitFor( () => expect(button).not.toBeDisabled() );
    expect(button).not.toBeDisabled();

但如果它返回 false 按钮​​保持禁用状态:

    myAsyncFunction.mockImplementation(() => false);   // async returning different value
    const {queryByText} = render(<Component />);
    const button = queryByText("Click");
    expect(button).toBeDisabled();
    await waitFor( () => {} );                       //        <== **** CODE SMELL ****
    expect(button).toBeDisabled();

第二个测试确实有效，但空 waitFor()被认为是不好的做法。有什么办法可以避免这种情况吗？

Answer 1

在 waitFor 的文档中，建议等待你的异步函数.toHaveBeenCalled像这样

await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1))