shadcnui

Shadcn: how do I activate a tooltip for testing?


I have a Shadcn tooltip, and I want to test that the correct text is shown when the tooltip is triggered. Here's my example tooltip code:

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

and here is my test code:

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

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

The test fails on getByText("Tooltip text") because it seems the Tooltip is not present in the DOM, even though I've used fireEvent.mouseOver(trigger). How do I test that a Tooltip text is present on hover?


Solution

  • Instead of using fireEvent.mouseOver(), you need to use fireEvent.focus() to activate the tooltip.