如何使用反应测试库测试到达 UI 菜单按钮

Question

在测试到达 UI 菜单按钮时，它显示为通过 RTL 无法单击通过反应门户显示的菜单项。调用userEvent.click时可以找到元素但没有触发任何事件。

我有一个最小的repo here 重现该问题。

Answer 1

从test case source code 开始，MenuItem 组件的onSelect 事件处理程序将由以下辅助函数触发：

function simulateSpaceKeyClick(element, opts) {
  let { fireClick } = opts || {};
  fireEvent.keyDown(element, { key: " " });
  fireEvent.keyUp(element, { key: " " });
  if (fireClick) {
    fireEvent.click(element);
  }
}

userEvent.click 不起作用。

完整示例：

menu.js:

import React, { useState, Fragment } from "react";
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  MenuLink
} from "@reach/menu-button";

export default function () {
  const [isDownloading, setIsDownloading] = useState(false);
  return (
    <Fragment>
      <Menu>
        <MenuButton data-testid="action-button">
          Actions <span aria-hidden>▾</span>
        </MenuButton>
        <MenuList>
          <MenuItem
            data-testid="action-button-download"
            onSelect={() => {
              console.log("?");
              setIsDownloading(true);
            }}
          >
            Download
          </MenuItem>
          <MenuLink as="a" href="https://reach.tech/workshops">
            Attend a Workshop
          </MenuLink>
        </MenuList>
      </Menu>
      {isDownloading && <p data-testid="downloading">Downloading...</p>}
    </Fragment>
  );
}

menu.spec.js:

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

import Menu from "../menu";

function simulateSpaceKeyClick(element, opts) {
  let { fireClick } = opts || {};
  fireEvent.keyDown(element, { key: " " });
  fireEvent.keyUp(element, { key: " " });
  if (fireClick) {
    fireEvent.click(element);
  }
}

test("should be able to click a menu item when open", async () => {
  render(<Menu />);

  simulateSpaceKeyClick(screen.getByText(/actions/i));
  expect(screen.getByText(/download/i)).toBeTruthy();
  simulateSpaceKeyClick(screen.getByText(/download/i));
  expect(await screen.findByTestId("downloading")).toBeTruthy();
});

codesandbox