如何单元测试TanStack QueryClient的queryCache与mutationCache错误处理

是否需要用nock？ #

不一定必须，要看你的测试场景：

• 如果查询/突变逻辑直接依赖真实HTTP请求，用nock拦截接口并返回错误状态码（比如500、400）是很直观的端到端测试方式，能完整模拟真实报错流程。
• 如果你已经把请求逻辑封装成独立函数（比如api.fetchData），直接用测试框架（比如Jest）mock这个函数让它抛出错误，会更轻便，不用依赖HTTP拦截。

具体测试步骤 #

测试queryCache的onError

1. 初始化带onError配置的queryClient：

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      // 你的错误处理逻辑，比如上报、弹窗
    }
  })
});

2. 模拟请求失败：
   • 用nock的方式：

     nock('https://your-api.com')
       .get('/data')
       .reply(500, { message: 'Server Error' });
     

     然后触发查询（比如queryClient.fetchQuery(['data'], () => fetch('/data').then(res => res.json()))），验证onError里的逻辑是否执行（比如用jest.spyOn监听错误上报函数是否被调用）。
   • 用mock函数的方式：

     const mockFetch = jest.fn().mockRejectedValue(new Error('Mock Error'));
     await queryClient.fetchQuery(['data'], mockFetch);
     

     同样验证onError的处理逻辑是否触发。

测试mutationCache的onError

流程和query类似：

1. 初始化带mutationCache配置的queryClient：

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onError: (error, variables, context, mutation) => {
      // 你的突变错误处理逻辑
    }
  })
});

2. 模拟突变失败：
   • 用nock拦截突变对应的接口（比如POST请求）并返回错误；
   • 或者mock突变函数：

     const mockMutationFn = jest.fn().mockRejectedValue(new Error('Mutation Failed'));
     const mutation = queryClient.mutation({ mutationFn: mockMutationFn });
     await mutation.mutate({ id: 1 });
     

   验证mutationCache的onError是否正确执行。

更直接的单元测试方式

如果只想单独测试onError回调函数本身，不用走完整的查询/突变流程，可以直接调用回调并传入模拟的参数：

const mockOnError = jest.fn();
const queryCache = new QueryCache({ onError: mockOnError });

// 模拟错误和query对象
const testError = new Error('Test Error');
const testQuery = { queryKey: ['test'], queryFn: jest.fn() };

queryCache.onError(testError, testQuery);

expect(mockOnError).toHaveBeenCalledWith(testError, testQuery);

注意事项 #

• 每个测试用例前最好创建全新的QueryClient实例，或者调用queryClient.clear()清理缓存，避免测试之间的状态污染。
• 如果是测试组件内的useQuery/useMutation的onError，确保组件挂载后触发查询/突变，再断言错误处理逻辑（比如是否显示错误提示）。

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