Unable to close React Bootstrap Modal when button is clicked - React Testing Library

Question

I am using React Testing Library to test that a modal, from React Bootstrap, closes when the button is clicked. For some reason, I can't make the test pass, since the result of it keeps on showing the modal element.

Here is my React Component:

    import { HashLink as Link } from "react-router-hash-link";
    import { Modal } from "react-bootstrap";
    import styles from "./PledgeSubmittedModalCard.module.scss";
    import iconCheck from "../../icons/icon-check.svg";

    export const PledgeSubmittedModalCard = ({
      onCloseClick,
      confirmationPledgeText,
    }) => {
      return (
        <Modal
          show
          backdrop="static"
          keyboard={false}
          centered
          dialogClassName={styles.pledgesModal}
          data-testid="pledge-submitted-modal"
          onHide={onCloseClick}
        >
          <div className={styles.modalContainer}>
            <img
              className={styles.iconCheck}
              src={iconCheck}
              alt="completed action icon"
            />
            <h5 className={styles.sayThanks}>Thanks for your support!</h5>
            <p role="paragraph" className={styles.confirmationText}>
              {confirmationPledgeText}
            </p>
            <Link to="#top">
              <button onClick={onCloseClick} className={styles.confirmationBtn}>
                Got it
              </button>
            </Link>
          </div>
        </Modal>
      );
    };

Here it goes my test:

    import {
      prettyDOM,
      render,
      screen,
    } from "@testing-library/react";
    import userEvent from "@testing-library/user-event";
    import { BrowserRouter } from "react-router-dom";
    import { PledgeSubmittedModalCard } from "../index";

    const onClickMock = jest.fn();

    const MockPledgeSubmittedModalCard = () => {
      return (
        <BrowserRouter>
          <PledgeSubmittedModalCard onCloseClick={onClickMock} />
        </BrowserRouter>
      );
    };

    describe("PledgeSubmittedModalCard", () => {
      it("Should close modal when button clicked", () => {
        render(<MockPledgeSubmittedModalCard />);
        const modalElement = screen.queryByTestId("pledge-submitted-modal");
        const buttonElement = screen.getByRole("button", {
          name: "Got it",
        });
        console.log(prettyDOM(modalElement));
        userEvent.click(buttonElement);
        // PASSED
        expect(onClickMock).toBeCalledTimes(1);
        // FAILED
        expect(modalElement).not.toBeInTheDocument();
      });
    });

And finally the tests output:

     ● PledgeSubmittedModalCard › Should close modal when button clicked

        expect(element).not.toBeInTheDocument()

        expected document not to contain element, found <div class="modal-dialog pledgesModal modal-dialog-centered" data-testid="pledge-submitted-modal"><div class="modal-content"><div class="modalContainer"><img alt="completed action icon" class="iconCheck" src="icon-check.svg" /><h5 class="sayThanks">Thanks for your support!</h5><p class="confirmationText" role="paragraph" /><a href="/#top"><button class="confirmationBtn">Got it</button></a></div></div></div> instead

          38 |     expect(onClickMock).toBeCalledTimes(1);
          39 |     // expect(modalElement).toBeNull();
        > 40 |     expect(modalElement).not.toBeInTheDocument();
             |                              ^
          41 |   });
          42 | });
          43 |

          at Object.<anonymous> (src/components/PledgeSubmittedModalCard/__test__/PledgeSubmittedModalCard.test.js:40:30)


    Test Suites: 1 failed, 7 skipped, 1 of 8 total
    Tests:       1 failed, 26 skipped, 1 passed, 28 total
    Snapshots:   0 total
    Time:        3.544 s, estimated 4 s
    Ran all test suites with tests matching "PledgeSubmittedModalCard".

I have tried to assert with expect(modalElement).not.toBeInDocument(), expect(modalElement).toBeNull(), and await waitForElementToBeRemoved(() => modalElement), but none of them worked. Is there anything else I can try? Thanks!

Answer 1

The modal is closed by clicking a button named Got it and it triggers onCloseClick method, which is being passed as a prop from the parent component.

Since you are just passing a mock function as a prop, it won't do anything.

<PledgeSubmittedModalCard onCloseClick={onClickMock} />

If you want to test if modal is closed, you have to pass a real onCloseClick function to make it work.