AwaitFor 不等待回调被调用答案

【问题标题】：AwaitFor doesnt wait the callback to be calledAwaitFor 不等待回调被调用
【发布时间】：2021-01-25 07:22:46
【问题描述】：

我在这里有这个简单的测试示例，而我希望 waitAFor 等待调用 fetch 方法，但测试在 3 秒后结束。它不会等待 7 秒。

const TestComponent = () => {
    setTimeout(() => {
         fetch();
     }, 6000);
  return <div>Hello</div>;
};


jest.mock("./service");

describe("Test", () => {
  let container = null;

  beforeEach(() => {
    container = render(<TestComponent />);
  });


  test("should fetch", async () => {
    await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1));
  });
});

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

此类操作不应等待未指定的时间，这可能会导致进程挂起。

文档指出waitFor 超时失败：

默认超时为 1000 毫秒，这将使您处于 Jest 的默认超时 5000 毫秒之下。

如果预计会有延迟，可以明确指定超时值：

  test("should fetch", async () => {
    await waitFor(() => expect(fetch).toHaveBeenCalledTimes(1), { timeout: 8000 });
  }, 10000);

由于像 HTTP 请求这样的长异步操作在测试中并不常见，因此实时等待它们是不切实际的，这就是 Jest fake timer API 的用途。

【讨论】：

那么为什么还要使用waitFor呢？
No 不依赖执行。这符合 RTL 作为黑盒测试库的想法。并且对于难以或不可能跟踪需要等待的点的情况是有意义的，例如stackoverflow.com/a/62094817/3731501 , 2 awaits 已经很脆弱了，这对于嵌套的异步调用会变得更加脆弱。 waitFor 通常用于断言结果，如组件标记。这个例子是合成的，不具有代表性。为什么会有如此大而准确的延迟，而对 DOM 没有影响？在大多数具有异步副作用的现实世界中，您不会在测试中遇到超时