Jest toThrow()无法捕获组件点击触发的错误，求解决方案

核心问题 #

你的测试没捕获到错误，主要有两个关键原因：

1. userEvent.click是异步操作：你把整个流程放在同步的expect(() => {})回调里，但回调执行完时，点击操作还没完成，错误还没触发，自然检测不到。
2. React事件处理的错误机制：组件点击事件中抛出的错误，会进入JavaScript的异步事件循环，同步的toThrow断言无法捕获异步抛出的错误。

另外还有一个潜在问题：你代码里的if (option) userEvent.click(option);，这里的option变量未在测试中定义，可能根本没触发到抛出错误的点击操作，这也会导致断言失败。

修正后的测试代码 #

it("should throw error", async () => {
  // 确保至少有一个断言执行，避免测试因未触发错误而通过
  expect.assertions(1);

  render(
    <Root>
      <Component role='id' />
    </Root>
  );

  // 获取目标组件（注意替换成实际要点击的元素）
  const targetComponent = screen.getByRole('id');

  try {
    // 等待异步点击操作完成
    await userEvent.click(targetComponent);
  } catch (error) {
    // 断言错误信息匹配
    expect(error.message).toContain('Error msg');
  }
});

额外注意事项 #

• 如果你的<Root>组件是错误边界，它会捕获子组件抛出的错误，此时错误不会冒泡到测试代码中。这种情况下，你需要测试错误边界的行为（比如是否显示错误提示），而不是直接捕获错误。
• 如果错误是组件渲染时抛出的，而非点击事件，那可以用同步的expect(() => render(...)).toThrow()，但点击事件的错误必须用异步方式处理。

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