Does userEvent.hover() not works with mouseEnter event when testing react components?

Question

I am using tippy js library to handle tooltips in my app. Now I want to test whether the components shows a tooltip content when hover over an element. The tippy js library says that the tooltip is triggered by either mouseEnter or focus event.

When testing it, I use fireEvent.mouseEnter() event to trigger tooltip. That works fine enough to pass. But when I use userEvent.hover(), it didn't work. Doesn't userEvent.hover() support mouserEnter event? Or help me to understand why doesn't it works here.

Note: fireEvent.mouseOver() doesn't work here.

I know the tippy js lib is already been tested. I am just curious why it is not working with userEvent.hover().

The following is contrived/reproducible code. CodeSandbox

import React from "react";
import Tippy from "@tippyjs/react";

const App = () => (
  <Tippy content={<span>Tooltip</span>}>
    <button>My button</button>
  </Tippy>
);

export default App;

import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import user from "@testing-library/user-event";
import App from "./App";

test("first", async () => {
  render(<App />);

  const button = screen.getByRole("button", { name: /my button/i });

  expect(button).toBeInTheDocument();

  user.hover(button);
  expect(await screen.findByText(/tooltip/i)).toBeInTheDocument();
  screen.debug();
});


test("second", async () => {
  render(<App />);

  const button = screen.getByRole("button", { name: /my button/i });

  expect(button).toBeInTheDocument();

  fireEvent.mouseEnter(button);
  expect(screen.getByText(/tooltip/i)).toBeInTheDocument();
  screen.debug();
});

score 2 · Answer 1 · answered May 16 '23 at 14:58

hover(element: Element): Promise<void>

returns a promise; try awaiting the promise. The below passes on your codesandbox.

test("first", async () => {
  render(<App />);
  const user = userEvent.setup({ document });

  const button = screen.getByRole("button", { name: /my button/i });

  expect(button).toBeInTheDocument();
  await user.hover(button);
  expect(await screen.findByText(/tooltip/i)).toBeInTheDocument();
  screen.debug();
});

Does userEvent.hover() not works with mouseEnter event when testing react components?

1 Answers1