如何在使用expect().toThrow()测试React组件时阻止Jest打印异常？

你的组件在传入非整数参数时会抛出错误，测试用toThrow能正常通过，但React的渲染机制会将这个错误打印到控制台。可以通过临时mock控制台的错误输出方法来解决这个问题，测试完成后再恢复原始方法，避免污染控制台。

方法一：使用jest.spyOn临时mock console.error #

test('组件传入非整数时抛出错误', () => {
  // 监听console.error并mock其实现
  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

  expect(() => {
    render(<Component integer={1.5} />);
  }).toThrow('Not an integer!');

  // 恢复原始的console.error方法
  errorSpy.mockRestore();
});

方法二：直接替换console.error后恢复 #

test('组件传入非整数时抛出错误', () => {
  // 保存原始的console.error
  const originalConsoleError = console.error;
  // 临时禁用console.error输出
  console.error = jest.fn();

  expect(() => {
    render(<Component integer={1.5} />);
  }).toThrow('Not an integer!');

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

说明 #

• 两种方法都是通过临时抑制console.error的输出来避免异常信息污染控制台，测试结束后恢复原始方法，不会影响其他测试用例的控制台输出。
• 如果你的测试环境中还有其他控制台输出（如console.warn）需要抑制，可以用同样的方式mock对应的方法。

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