Disabling all tooltip delay in unit tests?

[evadecker]

Right now, all of my tooltips from RAC have a default delay of 400ms. Works well in-app, but slows down tests using React Testing Library, which have to waitFor() the tooltip on hover.

Is there a way to automatically disable all tooltip delays when testing?

[snowystinger]

You can use fake timers and instantly advance the time to open or close.
Here's how to do it for jest

https://jestjs.io/docs/timer-mocks

[evadecker]

Thanks @snowystinger, that makes sense.

I'm using Vitest https://vitest.dev/guide/mocking.html#timers and can't seem to get the timer mocks to work with the tooltips.

For example...

it("shows tooltip on hover", async () => {
  vi.useFakeTimers();
  render(<MyButtonWithTooltip />);

  const button = screen.getByRole("button");
  await userEvent.hover(button);
  vi.advanceTimersByTime(5000);

  expect(screen.getByText("Tooltip text")).toBeInTheDocument();
  vi.useRealTimers();
});

...does not work.

This does work...

it("shows tooltip on hover", async () => {
  render(<MyButtonWithTooltip />);

  const button = screen.getByRole("button");
  await userEvent.hover(button);

  await waitFor(() => {
    expect(screen.getByText("https://example.com")).toBeInTheDocument();
  });
});

...but incurs 450ms wait time for the test to pass.

[snowystinger]

Probably need to configure user event to work with the fake timers as well, need to pass "delay: null" to the config object

I don't recall how it's done for older versions of user event exactly

[evadecker]

Thanks. Looks like there may be some issues between Vitest and Testing Library — will keep digging!