Recharts+React Testing Library+Vitest中Tooltip悬浮测试失败排查

• Recharts Tooltip 的异步渲染特性
  Recharts 的 Tooltip 是实时计算鼠标位置后渲染的，测试环境里 userEvent.hover 不会像真实浏览器那样立刻触发所有状态更新。试试在 hover 之后用 waitFor 包裹断言逻辑：

await userEvent.hover(barElement);
await waitFor(() => {
  expect(screen.getByText('A: 0.06')).toBeInTheDocument();
});

• 柱状条元素定位不精准
  虽然控制台能拿到20个柱状条，但测试时可能选到了错误的元素（比如第一个而非目标条）。给每个 Bar 组件加上 data-testid={bar-${aminoAcid}}，测试时直接用 screen.getByTestId('bar-A') 定位目标元素，避免选择器歧义。

• Tooltip 文本匹配存在偏差
  检查 Tooltip 实际渲染的文本是否有额外空格、小数位数不同（比如实际是 A: 0.060 而非 A: 0.06）。可以用正则做模糊匹配：

expect(screen.getByText(/A: 0\.06/)).toBeInTheDocument();

或者直接查询 Tooltip 容器，验证其内容是否符合预期。

• 测试环境的布局模拟限制
  Recharts 依赖浏览器的鼠标事件和布局计算，jsdom 这类测试环境没法完全模拟真实浏览器的布局行为。确保用最新版的 @testing-library/user-event，同时在测试前等待图表完全渲染：

await waitFor(() => {
  expect(screen.getAllByRole('g')).toHaveLength(20); // 等所有柱状条渲染完毕
});

• Tooltip 触发配置错误
  确认 Recharts 中 Tooltip 的 trigger 属性是 'hover'（默认值，但可能被意外修改），别设置成了 'click' 或其他触发方式。

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