[Bug]: Unintended result of not.toBeVisible() when testing modal components using testing-library.

[maroKanatani]

Browser

No response

Package version

v3.0.407

React version

v18.2.0

Description

The following test code expect(modal).not.toBeVisible(); should not generate an error.

Source code

• test code

import "@testing-library/jest-dom";

import { render, within } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

import { screen, waitFor } from "@testing-library/react";
import { describe } from "node:test";
import { SampleModal } from "./SampleModal";

describe("SampleModal", () => {
    test("open modal and close", async () => {
        const tree = render(<SampleModal />)
        
        const button = screen.getByRole("button", { name: "Open" })

       const modal =  within(tree.container.ownerDocument.body).getByRole("dialog")
        // const modal = screen.getByRole("dialog")

        await userEvent.click(button)

        await waitFor(() => {
            expect(modal).toBeVisible();
        });

        const closeButton = within(modal).getByRole("button", { name: "Close" })

        await userEvent.click(closeButton)

        await waitFor(() => {
            expect(modal).not.toBeVisible();
            // - display: none;
            // + display: block;
            // expect(modal).toHaveStyle({ display: "none" });
        });
    })
})

• component

import Modal from "@cloudscape-design/components/modal";
import Box from "@cloudscape-design/components/box";
import SpaceBetween from "@cloudscape-design/components/space-between";
import Button from "@cloudscape-design/components/button";
import { useState } from "react";

export const SampleModal = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Open</Button>
      <Modal
        onDismiss={() => setVisible(false)}
        visible={visible}
        closeAriaLabel="Close"
        footer={
          <Box float="right">
            <SpaceBetween direction="horizontal" size="xs">
              <Button variant="link">Cancel</Button>
              <Button variant="primary">Ok</Button>
            </SpaceBetween>
          </Box>
        }
        header="Modal title"
      >
        Your description should go here
      </Modal>
    </>
  );
};

The entire source code is as follows:

• https://github.com/maroKanatani/cloudscape-modal-test-sample

Reproduction

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[johannes-weber]

Hello @maroKanatani, thank you for contacting us and the reproducible example.

You are using JSDOM for your testing which is not a visual browser, so some matchers, like toBeVisible() may not work correctly.

If the modal is not visible, it is present in the DOM and set to display: none.

The toBeVisible() matcher checks whether 1) the element is in the DOM and 2) whether the element is visible (link to source). When using not the opposite is expected - the element does not exist in the DOM and is not visible.
The modal is still present in the DOM, but not visible. This causes expect(modal).not.toBeVisible(); to fail.

This is why we recommend our modal.isVisible() test-util, which allows you to validate if you passed the visible prop to this component correctly. Here is an example of your test by using the testing utilities:

// other imports
import createWrapper from '@cloudscape-design/components/test-utils/dom';

describe("SampleModal", () => {
    test("open modal and close", async () => {
        render(<SampleModal />);
        const wrapper = createWrapper();
        const modal = wrapper.findModal()!;

        // Open Modal
        await userEvent.click(screen.getByRole("button", { name: "Open" }));
        expect(modal.isVisible()).toBeTruthy();

        // Close Modal
        await userEvent.click(modal.findDismissButton()!.getElement());
        expect(modal.isVisible()).toBeFalsy();
    });
});

[maroKanatani]

@johannes-weber Thanks for your reply.

However, I prefer to test using testing-library whenever possible. This is because testing-library makes it easy to write tests with accessibility in mind.

Aside from that, I have just one more question.
As you can see when I run it without commenting it out, the result of expect(modal).toHaveStyle({ display: "none" }); also fails. Is this expected behavior?
Personally, I would like to see display: none instead of display: block in this case...