How do I show a Shadcn Tooltip in a testing environment?

[Jasper-Nelligan]

I'm trying to open up my Shadcn Tooltip in my testing environment so I can test that it opens up on hover and displays the correct text.

As a simple example, I have this code to test:

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

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:

import { fireEvent, render, screen } from "@testing-library/react";
import TooltipExample from "./tooltip";

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

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

But getByText() always fails to find the Tooltip text, which appears to be because the Tooltip is never opened. How can I open a Tooltip in my testing environment?

[Jasper-Nelligan]

Found the answer.

Using fireEvent.focus() instead of fireEvent.mouseOver() is what fixed it for me.