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?
Instead of using fireEvent.mouseOver()
, you need to use fireEvent.focus()
to activate the tooltip.