userEvent.hover()在测试react组件时不与mouseEnter事件一起工作?

Question

我使用tippy js库来处理我的应用程序中的工具提示。现在我想测试组件在悬停在元素上时是否显示工具提示内容。tippy js库说工具提示是由mouseEnter或focus事件触发的。

测试时，我使用fireEvent.mouseEnter()事件来触发工具提示。这足够好，可以通过。但是当我使用userEvent.hover()时，它不起作用。userEvent.hover()不支持mouserEnter事件吗?或者帮我理解为什么它在这里不起作用。

注意:fireEvent.mouseOver()在这里不起作用。

我知道tippy js库已经测试过了。我只是好奇为什么它不能与userEvent.hover()一起工作。

下面是人为的/可复制的代码。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();
});

Answer 1

hover(element: Element): Promise<void>

返回一个promise;试着等待承诺。下面的代码传递给你的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();
});