Tooltip hover in Jest/JSDOM requires prior mouse interaction

[hoshki-ic]

We’re using React Aria hooks (useTooltipTrigger / useTooltip / usePopover) via our wrapper. In Jest, hover does not show a tooltip until after any mouse interaction (click or mouseMove). Tab-to-trigger works.

test('hover opens tooltip', async () => {
  const user = userEvent.setup();
  render(
    <TooltipTrigger>
      <button>Trigger</button>
      <Tooltip>Tip</Tooltip>
    </TooltipTrigger>
  );

  const btn = screen.getByRole('button', {name: 'Trigger'});

  // Without a prior click, the test fails
  await user.hover(btn);
  expect(screen.getByRole('tooltip')).toBeInTheDocument();

  // After a click anywhere, hover opens the tooltip
  await user.click(document.body);
  await user.hover(btn);
  expect(screen.getByRole('tooltip')).toBeInTheDocument();
});

Expected

• On desktop, hovering the trigger should display the tooltip even if the user hasn't clicked yet.
• In tests, there should be a recommended way to simulate mouse activity/context without needing a mouse interaction.

Question

• In unit tests, what's the recommended way to simulate mouse context? Is clicking document.body the right approach?

Refs

• React Spectrum tests using mouseMove
  • https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/tooltip/test/useTooltip.test.js#L44
  • https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/test/Tooltip.test.js#L49

Env

• react: 18.2.0
• react-aria: 3.38.1
• @testing-library/react: 16.3.0

[snowystinger]

Thanks for the discussion.

It's due to this line here

react-spectrum/packages/@react-aria/tooltip/src/useTooltipTrigger.ts

Line 86 in 6d8af92

if (getInteractionModality() === 'pointer') {

This is expected and as you pointed out, we do it in our own tests.

Hopefully Chrome will update at some point not to need this.

We will also eventually have testing utils for Tooltip and Popover much like we have for other components such as Menu https://react-spectrum.adobe.com/react-aria/Menu.html#test-utils-

[hoshki-ic]

Got it. Thank you for the reply! The testing util for it would be awesome 🙏