Javascript &引用；点击"；不开玩笑的事件

我正在用

jest

编写一些测试，但无法获得要触发的

单击事件

这是第一个测试，它可以工作：

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

DOM（带有
屏幕。debug
）似乎没有拾取第二次单击。记录DOM显示未应用样式。尽管功能正常工作，例如使用Google Dev工具，使用以下功能，仍会发生这种情况：

// 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;

import React，{useState}来自“React”；
从“@material ui/core”导入{Drawer，IconButton}”；
从“@物料界面/图标/关闭”导入关闭；
从“@物料界面/图标/菜单”导入菜单；
从“../../history”导入历史记录；
从“/Links”导入链接；
导入“/style.scss”；
const Header=React.memo（函数头（props）{
const[mobileOpen，setMobileOpen]=useState（false）；
const handleGoHome=（）=>{
历史。推送（“/”）；
};
函数handleDrawerToggle（）{
setMobileOpen（！mobileOpen）；
}
返回(
讨论终结
);
});
导出默认标题；
根据，我认为您需要使用
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();

});

it（“应该关闭抽屉”，异步（）=>{
常量{getByTestId，queryByTestId}=render（）；
单击（getByTestId（“菜单按钮”）；
expect（getByTestId（“抽屉”））.tobevible（）；
firevent.click（getByTestId（“closeButton”）；
等待waitForElementToBeRemoved（getByTestId（“抽屉”）；
expect（queryByTestId（“抽屉”））.toBeNull（）；
});

不需要
queryByTestId
，只是为了显示它已经消失了

我这里有一个使用您的代码的工作示例：

是否使用Javascript为组件设置动画？您是否尝试过包装您的
fireEvent。在
动作（（）=>{}）中单击
调用
？
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();

});