“点击”事件没有开玩笑

问题描述

我正在使用jest编写一些测试，但无法触发click事件。

这是第一个有效的测试：

  it("should open drawer",() => {
    const { getByTestId } = render(<Header />);
    fireEvent.click(getByTestId("menuButton"));
    expect(getByTestId("drawer")).toBeVisible();
  });

该测试通过单击成功打开了我的“抽屉”元素。该功能通过删除默认情况下通常在此“抽屉”元素上的visibility: hidden样式来起作用。

但是，我在测试“关闭”按钮时遇到了一些麻烦，该按钮又增加了该样式。

  it("should close drawer",() => {
    const { getByTestId } = render(<Header />);
    fireEvent.click(getByTestId("menuButton"));
    fireEvent.click(getByTestId("close"));
    expect(getByTestId("drawer")).not.toBeVisible(); // This doesn't work...
  });

DOM（带有screen.debug）似乎没有引起第二次点击。记录DOM显示未应用样式。尽管可以使用以下功能，但仍可以正常运行该功能，例如与Google Dev-Tools一起使用：

// These both work....
$("button[data-testid='menuButton']").click()
$("button[data-testid='close']").click()

出了什么问题？为什么第二点击事件没有触发？

这是我的全部内容：

import React,{ useState } from "react";
import { Drawer,IconButton } from "@material-ui/core";
import Close from "@material-ui/icons/Close";
import Menu from "@material-ui/icons/Menu";
import history from "../../history";

import Links from "./links";

import "./style.scss";

const Header = React.memo(function Header(props) {
  const [mobileOpen,setMobileOpen] = useState(false);

  const handleGoHome = () => {
    history.push("/");
  };

  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }

  return (
    <header className="header shadow">
      <nav>
        <IconButton
          data-testid="menuButton"
          onClick={handleDrawerToggle}
          className="menuButton pointer"
        >
          <Menu />
        </IconButton>
        <h1 onClick={handleGoHome} className="mainTitle pointer">
          Cloture
        </h1>
        <Drawer
          className="drawer"
          data-testid="drawer"
          anchor={"left"}
          open={mobileOpen}
          onClose={handleDrawerToggle}
        >
          <IconButton
            data-testid="close"
            className="close"
            onClick={handleDrawerToggle}
          >
            <Close />
          </IconButton>
          <Links
            setMobileOpen={setMobileOpen}
            links={[
              { label: "Calendar",link: "/calendar" },{ label: "Senate",link: "/committees/senate" },{ label: "House",link: "/committees/house" },]}
          />
        </Drawer>
      </nav>
    </header>
  );
});

export default Header;

解决方法

根据docs#waiting-for-disappearance，由于发生的动画，我认为您将需要使用waitForElementToBeRemoved()异步帮助器。

it("should close drawer",async () => {
  const { getByTestId,queryByTestId } = render(<Header />);

  fireEvent.click(getByTestId("menuButton"));
  expect(getByTestId("drawer")).toBeVisible();

  fireEvent.click(getByTestId("closeButton"));
  await waitForElementToBeRemoved(getByTestId("drawer"));

  expect(queryByTestId("drawer")).toBeNull();

});

queryByTestId不是必需的，只是为了表明它已经消失了。

我在这里有一个有关您代码的有效示例：