Description
@testing-library/jest-dom
version:^5.16.1
node
version:v14.15.1
npm
(oryarn
) 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