reactjs - 如何在提供者之外访问 React Query `queryClient`？例如使 Cypress 测试中的查询无效

Question

是否可以访问我的应用程序的 React Query React 之外的 queryClient？

在我的一些 Cypress 测试中，我获取或改变了一些数据，但之后我想使所有/部分 queryClient 缓存无效。

这可能吗？

我已尝试导入应用中使用的“相同”queryClient，但它不起作用。

ℹ️ 我在我的测试中包含这些 fetch/mutations 只是为了让我绕过用户通常会在已经有 Cypress 测试的应用程序中采取的复杂步骤。

Answer 1

您可以在窗口中添加对 queryClient 的引用，然后在测试中调用它的方法。

来自@АлексейМартинкевич 示例代码，

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

if (window.Cypress) {           // only during testing
  window.queryClient = queryClient;
}

export queryClient;

在测试中

cy.window().then(win => {  // get the window used by app (window in above code)

  win.queryClient.invalidateQueries(...)  // exact same instance as app is using

})

我相信导入会给你一个新的实例，你必须传递一个对应用程序的事件实例的引用。

---

只需阅读您的评论，它就是这么说的 - 将答案作为代码示例。