React Testing Library中userEvent与fireEvent的使用场景及效率对比

优先选择userEvent——不管是测试编写效率还是测试稳定性，它都比fireEvent更适合模拟tooltip这类鼠标交互场景。

两者核心差异 #

• fireEvent是底层DOM事件触发工具，只会执行你指定的单个事件。比如模拟hover，你需要手动触发mouseenter和mouseover两个事件；模拟unhover，还要触发mouseleave和mouseout。步骤繁琐，容易遗漏关键事件，导致测试逻辑不完整。
• userEvent是模拟真实用户行为的工具，会自动处理完整的交互流程。比如userEvent.hover()会一次性触发所有和鼠标悬停相关的DOM事件，unhover()同理。不用手动拆分事件，代码更简洁，也更贴近真实用户的操作路径。

效率对比 #

1. 编写效率：userEvent一行代码就能完成完整的hover/unhover操作，fireEvent需要写多行代码触发多个事件，明显更耗时。
2. 运行效率：两者的性能差异微乎其微，但userEvent因为模拟完整用户行为，测试稳定性更高，减少了因事件触发不全导致的测试重试，反而让整个测试流程更高效。

对你的测试代码的小优化 #

你的示例代码用userEvent的思路完全正确，不过检查tooltip消失的部分可以优化：因为unhover后tooltip可能有动画延迟，直接用queryByRole可能因DOM未更新完成导致误判，建议用waitFor包裹断言，确保等待DOM状态更新：

test("hover / unhover element", async () => {
  const DOM = render();

  userEvent.hover(DOM.getByTestId("tool"));
  expect(await DOM.findByText("showing tool")).toBeInTheDocument();

  userEvent.unhover(DOM.getByTestId("tool"));
  await waitFor(() => {
    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
  });
});

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