react-testing-library两次click未触发Popper toggle的测试问题

这个问题不是业务代码的toggle逻辑写错，是jsdom环境下同步事件执行时序和ClickAwayListener的监听机制产生的冲突，整个触发过程拆解开非常明确：

1. 第一次调用fireEvent.click时，组件触发状态更新，从Popper隐藏的初始状态切换为打开状态，ClickAwayListener会在Popper挂载完成后，把全局点击的监听绑定到document对象上。
2. 原测试代码里两次fireEvent.click是完全同步连续执行的，jsdom不会主动模拟两次真实点击之间的用户反应间隔，第二次点击的完整事件流（mousedown → mouseup → click）会立刻跟着第一次点击的流程执行。
   • 第二次点击的事件流走到mouseup阶段时，已经绑定好的ClickAwayListener会优先收到事件，触发handleClose回调，把open状态更新为false；
   • 等事件流走到后续的click阶段，才轮到IconButton绑定的handleToggle执行，此时回调拿到的还是上一个版本的旧状态，直接把刚改成false的open又切回了true。
     两个回调前后覆盖状态，最终结果就是Popper始终处于打开状态，没有被卸载。
3. 原测试里fireEvent.doubleClick能跑通，是因为doubleClick的事件触发逻辑天然带两次点击的事件间隔，刚好避开了状态覆盖的时序问题，但这种模拟方式完全不符合真实用户的交互行为，属于临时取巧的方案。
4. 真实浏览器里不会出现这个问题，是因为用户两次点击之间必然存在足够的时间间隔，等第一次点击触发的Popper挂载、监听器绑定、状态渲染全部完成后，第二次点击的事件才会触发，不会出现jsdom里连续同步执行事件导致的状态值过期问题。

核心逻辑是补全两次点击之间的异步渲染等待，等第一次点击的所有DOM更新、监听器绑定流程完全落定之后，再触发第二次点击，完全对齐真实用户的交互节奏：

import { render, screen, fireEvent, waitFor } from '@testing-library/react';

it('点击帮助按钮时，帮助菜单可以正常切换显示状态', async () => {
  render(<HelpButton />);
  // 校验初始状态：Popper未挂载
  expect(screen.queryByTestId('HelpIconPopper')).not.toBeInTheDocument();

  // 第一次点击按钮打开Popper
  fireEvent.click(screen.getByTestId('HelpIconButton'));
  // 等待Popper完全挂载到DOM、ClickAwayListener完成监听绑定
  await waitFor(() => {
    expect(screen.getByTestId('HelpIconPopper')).toBeInTheDocument();
  });

  // 所有流程稳定后触发第二次点击
  fireEvent.click(screen.getByTestId('HelpIconButton'));
  // 等待Popper从DOM卸载
  await waitFor(() => {
    expect(screen.queryByTestId('HelpIconPopper')).not.toBeInTheDocument();
  });
});

补充优化建议 #

• 测试环境下可以给Popper临时加transition={false}配置，关掉内置的Grow过渡动画，避免因为动画异步延迟导致的DOM等待逻辑，简化测试流程。
• 不要依赖fireEvent.doubleClick模拟两次点击的交互，这种方式和真实用户“点一次、等一下、再点一次”的行为逻辑差异很大，测试结果无法准确复现真实场景下的交互表现。

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