renderHook测试无Provider包裹的自定义Hook时控制台多余报错问题

测试断言能通过说明你的Hook逻辑和测试校验逻辑都是正确的，控制台出现的多余日志属于框架层面的默认行为，不是代码错误：

• 第一类React的console.error日志：React开发环境下，组件渲染流程抛出错误时，React会先在内部打印错误栈和错误边界提示，之后才会把错误向外抛出。哪怕你在外层用try/catch接住了最终抛出的错误，React内部的日志打印动作已经执行完成，所以会出现这串提示。
• 第二类jsdom的运行时错误栈：jsdom作为测试环境的DOM实现，默认会把DOM运行阶段监听到的所有错误事件都打印到虚拟控制台，这个输出和错误是否被外层捕获没有关系，属于jsdom的默认日志规则。

不需要修改Hook的业务逻辑，只需要在测试执行期间临时屏蔽预期内的日志输出即可，注意不要全局屏蔽所有控制台日志，避免漏掉真正的非预期错误。

单测试用例临时屏蔽（推荐，无副作用） #

在单个测试用例里，执行renderHook前临时mockconsole.error，断言完成后立刻恢复原始console方法，不会影响其他测试用例：

it("[ACAMP-03] - should return error message when trying to use custom hook without provider", () => {
  // 保存原始console方法
  const originalConsoleError = console.error;
  // 临时替换为空函数屏蔽输出
  console.error = jest.fn();

  const { result } = renderHook(() => useSelectThemeContext());

  // 直接通过renderHook返回的result.error断言，不需要手写try/catch
  expect(result.error?.message).toBe(
    "You have to use useSelectThemeContext inside <SelectThemeContextProvider />"
  );

  // 恢复原始console方法
  console.error = originalConsoleError;
});

如果需要同时屏蔽jsdom的错误栈输出，可以在测试用例里额外监听jsdom虚拟控制台的jsdomError事件，跳过预期内的错误上报，或者在jest的测试环境配置中开启omitJSDOMErrors配置项。

全局配置过滤重复日志 #

如果项目中有大量类似的预期错误测试场景，可以在jest的全局setup文件中添加过滤规则，只屏蔽特定的已知提示文本：

// jest.setup.ts
const nativeConsoleError = console.error;
console.error = (...args: any[]) => {
  // 过滤React错误边界提示日志
  if (typeof args[0] === 'string' && args[0].includes('Consider adding an error boundary to your tree')) {
    return;
  }
  // 其余日志正常打印
  nativeConsoleError.apply(console, args);
};

对于jsdom的全局错误日志，可以在jest的testEnvironmentOptions中配置关闭jsdom默认错误上报：

// jest.config.js
module.exports = {
  testEnvironmentOptions: {
    virtualConsole: {
      omitJSDOMErrors: true
    }
  }
}

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