I'm writing some tests with jest and am not able to get a click event to fire.

Here's the first test, which works:

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

The test successfully opens my "drawer" element with a click. The function works by removing the visibility: hidden style that's normally on this "drawer" element by default.

However, I'm having some trouble testing the "close" button, which adds that style back.

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

The DOM (with screen.debug) doesn't seem to be picking up the second click. Logging the DOM shows that the styles not being applied. This happens despite the functionality working, for example withing Google Dev-Tools, using these functions:

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

What's going wrong? Why is the second click event not firing?

Here's my full ponent:

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: "/mittees/senate" },
              { label: "House", link: "/mittees/house" },
            ]}
          />
        </Drawer>
      </nav>
    </header>
  );
});

export default Header;

I'm writing some tests with jest and am not able to get a click event to fire.

Here's the first test, which works:

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

The test successfully opens my "drawer" element with a click. The function works by removing the visibility: hidden style that's normally on this "drawer" element by default.

However, I'm having some trouble testing the "close" button, which adds that style back.

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

The DOM (with screen.debug) doesn't seem to be picking up the second click. Logging the DOM shows that the styles not being applied. This happens despite the functionality working, for example withing Google Dev-Tools, using these functions:

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

What's going wrong? Why is the second click event not firing?

Here's my full ponent:

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: "/mittees/senate" },
              { label: "House", link: "/mittees/house" },
            ]}
          />
        </Drawer>
      </nav>
    </header>
  );
});

export default Header;

• javascript
• reactjs
• testing
• jestjs
• react-testing-library

• Does @material-ui/core animate the ponent with Javascript? Have you tried wrapping your fireEvent.click calls inside an act(() => {} )? – cbr Commented Aug 18, 2020 at 23:25

1 Answer 1

Per the docs#waiting-for-disappearance, I think you will need to use the waitForElementToBeRemoved() async helper due to the animation that happens.

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

});

The queryByTestId is not needed, but just to show absolutely it has gone.

I have got a working example with your code here: