如何使用React测试库测试RTK查询？

Question

我正在尝试使用 RTK 查询，但找不到如何使用 React 测试库为使用 RTK 查询请求的组件编写单元测试的好示例。

例如，我们有一个从服务器获取某些内容的列表的组件。如何模拟请求数据？我找到了一个用于mswjs模拟 API 测试的解决方案。

await new Promise((r) => setTimeout(r, 1000));但即使有了它，我仍然遇到一个问题：在检查集合中的某些内容是否存在之前，我需要添加。
也许，有人知道如何使用 RTK 查询测试组件？

Answer 1

你可以看看RTK Query本身的测试。

有些事情：

• 用于msw模拟 api
• 使用您的 api 将您的组件包装在真正的 Redux 存储中（storeRef.wrapper在示例中）
• 使用一些东西来等待 UI 更改，例如

      await waitFor(() =>
        expect(screen.getByTestId('isFetching').textContent).toBe('false')
      )