如何在React-Query v5单元测试中禁用控制台错误日志？

针对你用Jest + React Testing Library测试错误场景时，React Query输出预期错误日志的问题，提供几个实用方案：

1. Mock全局console对象（通用方案，兼容v4/v5） #

直接通过Jest mock掉console.error和console.warn，阻止日志输出。

全局生效（所有测试） #

在项目的jest.setup.js（如果没有就新建）中添加：

beforeAll(() => {
  // 拦截console.error和warn
  jest.spyOn(console, 'error').mockImplementation(() => {});
  jest.spyOn(console, 'warn').mockImplementation(() => {});
});

afterAll(() => {
  // 测试结束后恢复原console方法
  jest.restoreAllMocks();
});

然后在jest.config.js中配置这个setup文件：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};

单个测试生效 #

如果只想在特定测试中禁用日志，可在测试块内单独mock：

test('处理接口错误的场景', () => {
  // 临时拦截console.error
  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
  
  // 执行你的测试逻辑，比如触发错误请求、断言组件行为等

  // 测试完成后恢复原方法
  errorSpy.mockRestore();
});

2. React Query v4专属：配置空日志器（v5无效） #

v4中虽然自定义日志器被弃用，但仍支持通过QueryClient配置空日志对象来屏蔽日志：

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  logger: {
    log: () => {},
    warn: () => {},
    error: () => {},
  },
});

注意：v5已完全移除logger配置项，此方法仅适用于v4。

提示：如果需要验证错误是否真的触发，可以在mock时记录调用次数，比如：

const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// 执行测试后
expect(errorSpy).toHaveBeenCalledTimes(1);

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