如何让Jest仅允许screen.debug使用真实console.log？

在使用Jest和@testing-library/react时，直接通过jest.spyOn(console, 'log').mockImplementation(() => {})禁用console.log会同时屏蔽screen.debug的输出——因为screen.debug本质也是通过调用console.log来打印内容的。要实现“禁用所有日志，仅保留screen.debug输出”的需求，可以用以下两种方案：

方案一：智能拦截，仅放行screen.debug的调用 #

通过自定义mock实现，判断console.log的调用来源，只放行来自screen.debug的输出：

// 在测试文件顶部或beforeEach钩子中配置
const originalConsoleLog = console.log;

jest.spyOn(console, 'log').mockImplementation((...args) => {
  // 通过调用栈判断当前log是否由screen.debug触发
  const callStack = new Error().stack;
  if (callStack && callStack.includes('screen.debug')) {
    // 执行原始的console.log输出内容
    originalConsoleLog.apply(console, args);
  }
  // 非screen.debug触发的log直接忽略
});

这种方式无需在测试用例中频繁开关日志，一次配置即可全局生效，适合所有需要保留screen.debug输出的测试场景。

方案二：手动控制日志开关（修复你的原有方案） #

你的原有思路是临时恢复日志再重新禁用，但可能因为Jest spy的上下文问题导致失效。可以直接替换console.log的引用，替代jest.spyOn来实现更可靠的开关控制：

function disableLog() {
  // 保存原始console.log引用
  const originalLog = console.log;
  // 替换为无操作的mock函数
  console.log = jest.fn();
  
  return function enableLog() {
    // 恢复原始console.log
    console.log = originalLog;
  }
}

test('dropdown is rendering all options', async () => {
  const enableLog = disableLog();
  const mockOnClick = jest.fn((option) => { });

  render(/* 你的组件代码 */);

  const dropdownButton = screen.getByRole('button', { name: /sort/i });
  userEvent.click(dropdownButton);

  // ...其他测试逻辑

  // 恢复日志并执行screen.debug
  enableLog();
  screen.debug();
  // 再次禁用日志
  disableLog();

  // ...后续测试逻辑
});

你的原有方案失效原因 #

你之前用jest.spyOn创建的mock，每次调用disableLog都会生成一个新的spy实例，而enableLog仅能恢复当前对应的spy。如果测试过程中有其他代码修改了console.log，或者spy的上下文被Jest重置，就会导致日志拦截失效。直接替换console.log的引用可以避免这个问题。

内容的提问来源于stack exchange，提问作者Louay Al-osh