使用Testing Library时，userEvent.click为何无法触发<tr>的onClick事件？

核心区别：fireEvent 与 userEvent #

• fireEvent是直接触发DOM事件，完全不模拟真实用户的交互逻辑，只要元素绑定了对应事件，无论它是否具备可交互性，都会直接触发事件回调。
• userEvent则是模拟真实用户的操作流程，会先校验目标元素是否属于用户可交互的范畴（比如能否被点击、聚焦），只有符合条件的元素才会触发对应的事件行为。

为什么的click不被userEvent识别 #

你给<tr>添加了role="button"，但这只是语义层面的标记，并没有让它成为真正符合用户交互逻辑的可点击元素：

1. <tr>默认不是可聚焦元素，真实用户无法通过键盘聚焦它，userEvent模拟这一真实行为时，会判定它不是一个合格的可点击目标。
2. userEvent的click方法针对非原生可点击元素（如<tr>、<div>这类），要求同时满足两个条件才会触发点击：
   • 带有语义化的交互角色（如你已添加的role="button"）
   • 具备可聚焦性：需要添加tabIndex="0"，让元素可以被键盘聚焦

验证与解决方法 #

给<tr>加上tabIndex="0"后，userEvent.click就能正常触发了：

<tr
  title="Show details"
  onClick={showDetails}
  role="button"
  tabIndex="0"
>
  <td>....
</tr>

你的测试代码无需修改，此时userEvent.click(row)会模拟真实用户的点击流程（先聚焦元素，再触发点击），就能正常调用showDetails函数。

内容的提问来源于stack exchange，提问作者Andreas Köberle