如何测试Shadcn Tooltip在悬停时的文本显示功能？

我使用Shadcn实现了一个Tooltip组件，希望测试其在悬停触发时是否显示正确的文本。

示例代码：

export default function TooltipExample() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger className="cursor:default">Trigger text</TooltipTrigger>
        <TooltipContent>
          <p>Tooltip text</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

测试代码：

it('displays tooltip on hover', () => {
  render(<TooltipExample/>);
  
  const trigger = screen.getByText("Trigger text");
  fireEvent.mouseOver(trigger);

  expect(screen.getByText("Tooltip text")).toBeTruthy();
});

测试在执行getByText("Tooltip text")时失败，因为Tooltip似乎未出现在DOM中，即使我已经使用fireEvent.mouseOver(trigger)触发了悬停。请问如何正确测试Tooltip在悬停时的文本显示？

Shadcn的Tooltip基于Radix UI的Tooltip组件，它的显示逻辑有几个关键点需要注意，以下是修正测试的步骤：

• 使用userEvent模拟真实悬停行为
  fireEvent.mouseOver仅触发单个事件，而真实用户悬停会触发mouseenter等一系列事件，userEvent.hover能更准确地模拟这一过程。需要先安装@testing-library/user-event（如果未安装）。

• 用waitFor等待Tooltip渲染
  Radix Tooltip默认有显示延迟（默认300ms），所以需要等待DOM更新后再查询元素，避免因渲染时机问题导致查询失败。

修改后的测试代码：

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import TooltipExample from './TooltipExample';

it('displays tooltip on hover', async () => {
  const user = userEvent.setup();
  render(<TooltipExample/>);
  
  const trigger = screen.getByText("Trigger text");
  await user.hover(trigger);

  await waitFor(() => {
    expect(screen.getByText("Tooltip text")).toBeInTheDocument();
  });
});

额外说明：

• 如果你的Tooltip自定义了延迟时间，需要调整waitFor的超时时间（默认1000ms，足够覆盖大多数场景）。
• 确保TooltipProvider正确包裹了Tooltip组件，这是Shadcn Tooltip正常工作的前提。

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