Mock React Query useQueryClient测试缓存数据异常排查

你的测试方案存在核心错误：手动mock React Query原生的QueryClient方法，直接破坏了React Query本身的状态更新机制。

• 你替换的setQueryData是空实现的jest.fn()，根本不会实际修改缓存存储的值，getQueryData的mock返回值是硬编码的序列，走完预设的两次返回后就会一直返回初始值，UI自然拿不到更新后的quantity。
• 你已经用msw mock了后端接口，再手动mock React Query内部方法属于重复mock，完全打断了React Query从接口请求到缓存更新再到UI重渲染的完整链路。

不要mock React Query的核心内置方法，使用官方推荐的测试思路，配合真实的QueryClient实例完成测试：

1. 每个测试用例初始化独立的QueryClient实例，关闭查询、变更的重试逻辑避免测试超时，用QueryClientProvider包裹被测组件，避免用例之间的缓存状态污染。
2. 只保留msw的接口mock即可，不需要手动mockuseQueryClient、setQueryData、getQueryData这些React Query自带的方法。
3. 配合测试工具的等待方法，校验UI更新结果即可。

参考测试代码结构：

import { render, screen, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { server } from './mocks/server'; // 项目内已初始化的msw服务实例
import CartComponent from './CartComponent';

// 生成测试用独立QueryClient
const initTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: { retry: false },
    mutations: { retry: false }
  }
});

test('点击自增按钮后商品数量正确更新', async () => {
  const user = userEvent.setup();
  const testQueryClient = initTestQueryClient();
  // 预先写入初始缓存状态
  testQueryClient.setQueryData(['carts'], { data: [{ id: 1, quantity: 1 }] });

  render(
    <QueryClientProvider client={testQueryClient}>
      <CartComponent />
    </QueryClientProvider>
  );

  // 校验初始渲染
  expect(screen.getByText('商品数量：1')).toBeInTheDocument();
  // 触发自增操作
  await user.click(screen.getByRole('button', { name: '增加数量' }));
  // 等待UI更新完成
  await waitFor(() => {
    expect(screen.getByText('商品数量：2')).toBeInTheDocument();
  });
});

你之前写的msw接口mock不需要修改，可以直接使用：

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

如果你需要验证setQueryData、getQueryData的调用参数是否符合预期，不要直接mock整个useQueryClient，可以通过jest spy的方式监听真实QueryClient实例的方法，不会破坏原有状态流转逻辑：

const setQueryDataSpy = jest.spyOn(testQueryClient, 'setQueryData');
// 触发操作后校验调用参数
expect(setQueryDataSpy).toHaveBeenCalledWith(
  ['carts'],
  expect.objectContaining({
    data: expect.arrayContaining([expect.objectContaining({ id: 1, quantity: 2 })])
  })
);

内容的提问来源于stack exchange，提问作者Tom