模拟React Query usequeryclient来测试缓存数据

Question

我使用自定义钩子共享增量函数我的应用程序（在购物车中增加数量）。

What that function does :

• gets a data object from a React Query cache
• increments the data quantity property
• makes some API call via React Query useMutation then, on success, updates the React Query 此后，该组件读取React查询卡车缓存

，并使用新数量更新UI。

钩子完成了工作，最终按预期更新了缓存。

现在，我尝试在组件中测试钩子以检查UI是否相应更新。

使用MSW模拟API调用。它的返回值用于更新缓存：

  rest.put(`${api}/carts/1`, (req, res, ctx) => {
    return res(ctx.json({ data: [{ id: 1, quantity: 2 }] }));
  })

我还模拟了React-Query queryClient.setQueryData和getQueryData函数，以便我可以测试他们的返回值。

jest.mock("react-query", () => ({
  ...jest.requireActual("react-query"),
  useQueryClient: () => ({
    setQueryData: jest.fn(),
    getQueryData: jest
      .fn()
      .mockReturnValueOnce({ data: [{ id: 1, quantity: 1 }] })
      .mockReturnValueOnce({ data: [{ id: 1, quantity: 2 }] }),
  }),
}));

最后，我测试了应该使用新数量更新的UI，但是模拟的getQueryData始终返回原始数量：1，即使使用多个调用。

现在，我不确定我是否有正确的测试方法。

Answer 1

您为什么需要模拟setqueryData和getQueryData？使用MSW模拟网络层的内容应该是您所需要的。如果将渲染的钩子包裹在QueryClientProvider和queryClient中，则将用从MSW返回的模拟数据和填充 QueryClient.getQueryData 将能够在不嘲笑它的情况下读取它。

Answer 2

假设我只想为特定的测试用例模拟GetQueryData，然后将其他功能留下诸如InvalidateQueries，cancelquery和setqueryData之类的其他功能，那么如何修改此模拟功能？
这就是我写的。但是得到这个

TypeError: queryClient.cancelQueries is not a function

jest.mock("@tanstack/react-query", () => ({
    ...jest.requireActual("@tanstack/react-query"),
    useQueryClient: () => ({
        // setQueryData: jest.fn(() => ({ data: [{ label: 'Blue', id: 34 }] })),
        // cancelQueries: jest.fn(),
        // invalidateQueries: jest.fn(),
        ...jest.requireActual("@tanstack/react-query").useQueryClient(),
        getQueryData: jest
            .fn()
            .mockReturnValueOnce({ data: [{ id: 1, quantity: 1 }] })
            .mockReturnValueOnce({ data: [{ id: 1, quantity: 2 }] }),
    }),
}));