如何使用 jest.spyOn 测试 RTKQuery 端点

Posted 2023-02-19

【中文标题】如何使用 jest.spyOn 测试 RTKQuery 端点

【英文标题】：How do you test an RTKQuery endpoint using jest.spyOn

【发布时间】：2022-01-15 10:54:57

【问题描述】：

我正在尝试测试 RTKQuery 是否使用 jest 调用了端点。

我最终还希望能够模拟返回数据将是什么，但首先我只想检查钩子是否已被调用。

下面的一个示例，我试图在 myApi 上监视自动生成的 useGetMyListQuery 钩子。

运行时会抛出错误，有人可以帮忙吗？

it('Should render', async () => 
    jest.spyOn(myApi, 'useGetMyListQuery')

    render(
      <Provider store=store>
        <MyComponent />
      </Provider>
    )

    expect(myApi.useGetMyListQuery).toBeCalled()
)

【参考方案1】：

我无法回答您关于如何通过玩笑来做到这一点的问题，但我希望我可以在这里给您一些见解 - 从编写 RTKQ 的大部分内容以及我想象它如何在稳定的方式：

我不会开玩笑。我会模拟 API。

出现这种情况的原因是，您的 mock 将假定 RTKQ 挂钩的某些返回值 - 如果您的假设错误，您可能会有一个不错的绿色运行测试，但实际上您的应用仍然会失败。

这方面的一个例子是使用skip 而不是检查isUninitialized - 因为如果你不使用skip 就不会出现这种情况，你可能只是假设你只会看到isLoading , isSuccess 和 isError 组件中的情况。在许多情况下，这是一个完全有效的假设，但并不总是正确的。模拟 RTKQ 会将产生的错误隐藏在绿色测试之后。

相反，我建议使用 mock service worker 之类的东西来模拟您的 api 端点并让 RTKQ 完成它的工作。这就是我们在自己的测试中测试 RTKQ 的方式 - 欢迎您查看：RTKQ tests。

【讨论】：

感谢您的评论，我刚刚遇到 MSW，正打算尝试这个，很高兴听到 RTKQ 推荐这种方法。

我已尝试查看测试，但仍然看不到我将如何等待查看某个 API url 是否已被调用？你有这方面的例子吗？

我们使用 RTL 来等待页面有我们假设的内容。如果您使用 React 测试库进行测试，RTK Query 之类的内容将成为实现细节。显然调用了您的 API，因为来自您的 api 的数据在屏幕上，对用户可见 - 但它是如何到达那里的并不重要。