waitForElementToBeRemoved报错：指定元素已被移除问题排查

可能的原因及解决方法： #

• 错误的元素引用传递方式：
  如果你提前获取Popover元素的引用再传给waitForElementToBeRemoved，当组件重新渲染或DOM结构变化时，这个引用会失效，导致报错。正确做法是传入一个返回元素的查询函数，让测试工具每次检查时重新查询DOM：

  // 错误写法
  const popover = screen.getByText('Popover内容');
  await waitForElementToBeRemoved(popover);
  
  // 正确写法
  await waitForElementToBeRemoved(() => screen.queryByText('Popover内容'));
  

• 测试环境的hover模拟未持续生效：
  userEvent.hover在部分场景下可能无法持续保持hover状态，导致Popover意外关闭。可以改用fireEvent手动触发鼠标事件：

  const trigger = screen.getByRole('button', { name: '触发按钮' });
  // 触发hover
  fireEvent.mouseOver(trigger);
  // 验证Popover存在
  expect(screen.getByText('Popover内容')).toBeInTheDocument();
  // 触发取消hover
  fireEvent.mouseOut(trigger);
  // 等待Popover移除
  await waitForElementToBeRemoved(() => screen.queryByText('Popover内容'));
  

• Popover的自动关闭配置异常：
  检查Popover组件是否误设了autoHide={true}或错误的延迟参数。hover模式下React Bootstrap Popover默认不会自动关闭，但手动配置autoHide或delay可能导致未取消hover时就关闭：

  // 确保hover模式的正确配置
  <Popover trigger="hover" autoHide={false} delay={{ show: 0, hide: 0 }}>
    {/* Popover内容 */}
  </Popover>
  

• 异步渲染的时机未把控：
  Popover的显示/隐藏是异步过程，要确保hover后先验证Popover已存在，再执行后续的移除等待：

  const trigger = screen.getByRole('button');
  await userEvent.hover(trigger);
  // 先确认Popover已渲染
  expect(screen.getByText('Popover内容')).toBeInTheDocument();
  // 再取消hover并等待移除
  await userEvent.unhover(trigger);
  await waitForElementToBeRemoved(() => screen.queryByText('Popover内容'));
  

内容的提问来源于stack exchange，提问作者MD Jahid Hasan