Skip to content

toBeVisible not working as expected with display:none set on parent component, when using material-ui Grid #444

Closed
@sorinpav

Description

@sorinpav
  • @testing-library/jest-dom version: ^5.16.1
  • node version: v14.15.1
  • npm (or yarn) version: 6.14.8
  • react-testing-library version: ^12.1.2

Relevant code or config:

//material-ui grid used
  <Grid
   {...gridProps}
    container
    className={clsx({
      [cssHidden]: condition, // sets display:"none" based on the condition
    })}
  >
      <Grid
        item
        className={clsx({
          //some additional CSS, not setting any display:none or anything to do with visibility
        })}
      >
        <Field
        label="One Field"
         {...fieldProps}
        />
      </Grid>
      </Grid>

What you did:

I tried to test the fact that the Field is hidden, using the .toBeVisible matcher. The assertion looked something like this:

      expect(
        screen.getByLabelText("One Field")
      ).not.toBeVisible()

The assertion fails even if I'm using getByRole.

What happened:

Received element is visible:
  <input aria-describedby="oneField-helper-text" aria-invalid="false" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" id="oneField" maxlength="50" name="oneField" readonly="" type="text" value="" />

I have also noticed that if instead of display:none, I use visibility:hidden or opacity:0, it works as expected, it's just with the display:"none" that it doesn't work. Unfortunately, it is impossible for me to change the code to use the any of the two options mentioned, as they have a different behaviour. I need display:none in this case.

Reproduction:

https://codesandbox.io/s/react-testing-library-tobevisible-69djj0

Problem description:

As per the documentation, .toBeVisible should be working even if display:none on a parent component is used, and it appears it is not.

Suggested solution:

This should just be working as per docs. I'm referencing the docs from https://github.com/testing-library/jest-dom#tobevisible

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions