为何fireEvent可触发点击而userEvent无法触发？

以下是几种常见的原因，结合userEvent模拟真实用户行为的特性来分析：

• 目标元素不是可交互角色
  userEvent的click会模拟真实用户操作，要求目标元素是可交互的（比如具备button、link等ARIA角色，或者本身是默认可点击元素如<button>、<a>）。而<tr>默认不属于可交互元素，如果没有给它添加role="button"或确保它能被识别为可交互元素，userEvent会跳过点击操作。fireEvent则不会做这些校验，直接触发click事件。

• 元素不在视口范围内
  userEvent会模拟用户点击前的行为，比如自动滚动元素到视口内，但如果元素完全不在视口且滚动逻辑有问题，或者元素被设置为不可见（如display: none、visibility: hidden），userEvent不会触发点击。fireEvent不管元素位置，直接触发事件。

• 前置事件被拦截
  userEvent触发点击时会依次触发mousedown、mouseup、click等完整事件链，如果在mousedown或mouseup阶段有事件处理函数调用了preventDefault()或stopPropagation()，会中断后续的click触发。而fireEvent直接触发click事件，不会经过前面的事件阶段，因此不受影响。

• userEvent版本或使用方式错误
  如果你使用的是@testing-library/user-event v14及以上版本，正确的用法应该先调用setup()初始化：

  const user = await userEvent.setup();
  await user.click(row);
  

  若仍使用旧版本的直接调用方式（await userEvent.click(row)），可能会出现兼容性问题，导致点击失效。

• 元素被其他元素遮挡
  userEvent会检查点击位置是否被其他元素（哪怕是透明的）覆盖，如果有遮挡，不会触发目标元素的点击。fireEvent则直接作用于目标元素，忽略遮挡情况。

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