如何使用React Testing Library测试按钮点击抛出错误的场景

你的测试代码无法捕获错误的核心原因是：fireEvent.click本身不会抛出错误，错误是在按钮的onClick回调内部触发的，直接断言fireEvent.click()会抛错不符合React Testing Library的错误捕获逻辑。另外注意你的测试里渲染的是<Home />，但导出的组件是HomePage，这也是需要修正的细节。

修正后的测试代码如下：

it('should throw error when click button', () => {
  // 临时覆盖console.error，避免测试过程中输出冗余错误日志
  const originalConsoleError = console.error;
  console.error = jest.fn();

  const { getByTestId } = render(<HomePage />);
  const errorBtn = getByTestId('error-btn');

  // 将点击操作包裹在匿名函数中传入expect，这样才能捕获到回调内抛出的错误
  expect(() => fireEvent.click(errorBtn)).toThrowError('Frontend Error');

  // 恢复console.error的原始实现
  console.error = originalConsoleError;
});

关键说明： #

• 必须把fireEvent.click调用包裹在一个函数里传给expect，toThrowError需要检测的是函数执行时抛出的错误，而非某个表达式的返回值。
• 覆盖console.error是因为React会在测试环境中捕获错误并输出到控制台，这会导致测试日志出现不必要的错误信息，测试完成后记得恢复原始实现。

如果使用的是@testing-library/react新版本，也可以用userEvent替代fireEvent，逻辑一致：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('should throw error when click button', async () => {
  const originalConsoleError = console.error;
  console.error = jest.fn();

  render(<HomePage />);
  const errorBtn = screen.getByTestId('error-btn');

  // userEvent.click是异步方法，需要配合await和rejects断言
  await expect(() => userEvent.click(errorBtn)).rejects.toThrowError('Frontend Error');

  console.error = originalConsoleError;
});

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