reactjs - MouseEnter/MouseOver 不适用于 react-testing-library。如何使用 react-testing-library 测试悬停事件

Question

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

提前致谢

标签： reactjsantdreact-testing-library

Answer 1

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

MyDropdown.tsx

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>
  )
}

MyDropdown.test.tsx

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()
    });
});