Reactjs MouseEnter/MouseOver不能与react测试库一起使用。如何使用react测试库测试悬停事件

我有一个ant design下拉列表，其中显示了悬停元素的列表。我想测试下拉菜单中的列表。我正在使用fireEvent.mouseOver，但它不起作用。screen.debug不显示菜单。如何测试悬停元素

提前感谢

这是我的测试代码。 使用wait并等待菜单出现很重要

MyDropdown.tsx

MyDropdown.test.tsx

这是我的测试代码。 使用wait并等待菜单出现很重要

MyDropdown.tsx

MyDropdown.test.tsx

---

谢谢@rokki。使用async await，它工作得非常完美谢谢@rokki。使用async await，它可以完美地工作

import React from 'react'
import { Menu, Dropdown, Button } from 'antd';

const menu = (
  <Menu data-testid="dropdown-menu">
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);

export const MyDropdown: React.FC = () => {
  return(
    <Dropdown overlay={menu} placement="bottomLeft" arrow>
      <Button>bottomLeft</Button>
    </Dropdown>
  )
}

import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { MyDropdown } from "./MyDropdown";

describe("<MyDropdown />", () => {
    it("check dropdown menu item", async () => {
        render(<MyDropdown />);

        fireEvent.mouseOver(screen.getByText('bottomLeft'));

        await waitFor(() => screen.getByTestId('dropdown-menu'))
        expect(screen.getByText('1st menu item')).toBeInTheDocument()
        expect(screen.getByText('2nd menu item')).toBeInTheDocument()
        expect(screen.getByText('3rd menu item')).toBeInTheDocument()
    });
});