模拟反应查询useQueryClient来测试缓存的数据
我使用一个自定义钩子来共享一个increment函数，这占用了我的应用程序(它增加了购物车中的数量)。
这一职能是干什么的：
cache
- increments
- 从React查询
useMutation获取数据对象数据quantity属性 - 通过React查询
useMutation进行一些API调用，然后在成功的情况下更新React查询缓存
之后，组件将读取缓存，并使用新的quantity更新UI。
钩子完成工作，最后缓存按预期更新。
现在，我尝试测试组件中的钩子，以检查UI是否相应更新。
API调用使用msw进行模拟。它的返回值用于更新缓存：
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总是返回原始的quantity: 1，即使有多个调用。
现在我不确定我是否有正确的方法来做那个测试。
回答 2
Stack Overflow用户
发布于 2022-07-01 07:31:15
你为什么要嘲笑setQueryData和getQueryData呢？用msw来模拟网络层应该是您所需要的。如果您将呈现的钩子包装在一个QueryClientProvider中，并使用一个queryClient，那么这个钩子将使用从msw返回的模拟数据填充，而queryClient.getQueryData将能够读取它而不对其进行模拟。
Stack Overflow用户
发布于 2022-10-27 04:07:14
假设我只想为特定的测试用例模拟getQueryData，并保留其他函数，如invalidateQueries、cancelQuery和setQueryData，那么如何修改这个模拟函数呢？这就是我写的。但得到这个
TypeError: queryClient.cancelQueries is not a functionjest.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 }] }),
}),
}));https://stackoverflow.com/questions/72814833
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号