userEvent.hover doesn't work: The provided value is not of type 'Element' (v14.2.1)

[epodgaetskiy]

userEvent.hover doesn't work: The provided value is not of type 'Element

Component:

<div>
      <div className="path" data-testid="path">
        Path{" "}
        <div className="edit" data-testid="edit">
          Edit icon
        </div>
      </div>
    </div>

CSS:

.edit {
 display: none;
}
.path:hover .edit {
 display: block;
}

Test:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

it("should show edit", async () => {
 const user = userEvent.setup();
 render(<App />);

 expect(screen.getByTestId("edit")).toHaveStyle(`
   display: none;
 `);

 await user.hover(screen.getByTestId("path"));

 expect(screen.getByTestId("edit")).toHaveStyle(`
   display: block;
 `);
});

https://codesandbox.io/s/solitary-wildflower-0h4f5o?file=/src/app.test.js

[ph-fritsche]

This is a problem with shadowed globals in the test environment. See #892
You need to setup user-event with the document that is also used by render, otherwise it falls back to globalThis.document which is a different one:

const user = userEvent.setup({document})

Testing pseudo-classes like this is, unfortunately, impossible because they can not be controlled programmatically.