React Testing Library v13中waitForNextUpdate替代方案咨询

问题描述 #

我已将Testing Library更新至v13版本，发现waitForNextUpdate方法已不再可用，尝试使用rerender()也无法达到等待Hook执行完成的效果。我的测试代码如下：

const mockGetSummary = getSummary as jest.MockedFunction<any>;

test('initial state of hook', async () => {
    mockGetSummary.mockImplementation(() => ({
      setOptions: () => ({
        call: () => Promise.resolve({mycustomObject}),
      }),
    }));

    const { result, rerender } = renderHook(() => useHomePageData());

    expect(result.current).toMatchObject({
      loading: true,
      stats: null
    });

    await waitForNextUpdate(); // <--- 此处需要替换为有效的等待方式

    expect(result.current).toMatchObject({
      loading: false,
      stats: {...}
    });
  });

请问该如何等待Hook的异步执行完成？

解决方案 #

方法一：使用waitFor直接等待目标状态 #

waitFor是React Testing Library推荐的替代方案，它会反复执行回调函数，直到断言条件满足或超时，完美适配Hook的异步状态更新场景。只需将最终的断言逻辑包裹在waitFor中即可：

const mockGetSummary = getSummary as jest.MockedFunction<any>;

test('initial state of hook', async () => {
    mockGetSummary.mockImplementation(() => ({
      setOptions: () => ({
        call: () => Promise.resolve({mycustomObject}),
      }),
    }));

    const { result } = renderHook(() => useHomePageData());

    // 验证初始加载状态
    expect(result.current).toMatchObject({
      loading: true,
      stats: null
    });

    // 等待异步操作完成并验证最终状态
    await waitFor(() => {
      expect(result.current).toMatchObject({
        loading: false,
        stats: {...}
      });
    });
  });

方法二：结合act（仅作补充，不推荐优先使用） #

如果你的Hook包含明确的异步逻辑，也可以用act包裹等待操作，但waitFor已经封装了act的行为，因此更推荐使用第一种方法：

// 示例代码，优先使用waitFor方案
await act(async () => {
  // 等待微任务队列清空，适配异步操作
  await new Promise(resolve => setTimeout(resolve, 0));
});

// 验证最终状态
expect(result.current).toMatchObject({
  loading: false,
  stats: {...}
});

核心注意点 #

• 无需再监听Hook的更新次数，直接关注你需要验证的最终状态即可，这更符合Testing Library的"测试用户可见行为"的理念。
• waitFor默认超时时间为1000ms，若你的异步操作耗时更长，可以通过{ timeout: 2000 }参数调整超时时间。

内容的提问来源于stack exchange，提问作者alfredopacino