`toBeVisible` not working as expected with `visibility` property

[lhnrd]

• @testing-library/jest-dom version: v5.1.1
• @testing-library/react version: v9.4.0
• node version: v12.14.1
• npm (or yarn) version: v1.21.1

Relevant code or config:

import styled from 'styled-components';

const Container = styled.div`
	visibility: hidden;

	&:hover {
		visibility: visible;
	}

	> input:checked {
		visibility: visible;
	}
`;


const { getByTestId } = render(
	<Container>
		<input data-testid="checkbox" type="checkbox" checked />
	</Container>
);

expect(getByTestId('checkbox')).toBeVisible();

What you did:

Tried to test a checkbox that must be visible when it has been checked with toBeVisible.

What happened:

Even though the checkbox is visible toBeVisible throws an error because it detects that the parent has visibility: hidden.

Reproduction:

https://codesandbox.io/s/kind-rain-62otm?fontsize=14&hidenavigation=1&previewwindow=tests&theme=dark

Problem description:

My code has a checkbox that must be visible when the user checks it. The visibility property is perfect for this because it overrides its parents' values.

So, if the checkbox has visibility: visible property, it will be shown regardless of the parent value.

Suggested solution:

Not sure :( will come up with something if this is really an issue.

[eps1lon]

The codesandbox does not use any of the code you described. Don't forget to save and freeze the codesandbox after submission.

I suspect this is an issue with jsdom not implementing CSS cascade. I need a repro to verify though.

[lhnrd]

@eps1lon thanks for letting me know, just included a test example there.

[eps1lon]

Perfect. This is indeed a bug.

We're currently assuming that visibility acts like display. While display: none hides any child even if they do set display: block, visibility: hidden can be overridden. The difference between display and visibility is that visibility is an inherited CSS property while display is not.

We need to account for that now that JSDOM implements CSS inheritance.

[lhnrd]

I've tried to implement but I think JSDOM CSS inheritance doesn't work correctly. By default all elements have visibility: visible, so:

<section style="display: block; visibility: hidden">
    <p>Hello <strong>World</strong></p>
</section>

getComputedStyle brings visible for the strong and p elements even if the property is not set. It should've brought hidden because it inherits.

[eps1lon]

getComputedStyle brings visible for the strong and p elements even if the property is not set. It should've brought hidden because it inherits.

Which jsdom version are you using? It should be working with ^15.2.0. If you have the implementation ready then you could go ahead an open a PR and I'll have a look at it.

[lhnrd]

@eps1lon are you sure CSS inheritance is working? Check this code.
I've tried to replicate what's being done in the project, see that what's written on the page.

It should be

hidden
hidden
hidden

because of inheritance.

jsdom/jsdom#2160

[eps1lon]

@eps1lon are you sure CSS inheritance is working?

For visibility, yes. Seems to be that inline styles are ignored for inheritance. For declaration it's working: https://runkit.com/eps1lon/5e4ea8c4d54b2400136cd768

[lhnrd]

Oh ok, thanks for explaining @eps1lon . Do you think it's ok if I change this test to use style declaration instead of inline styles?

[eps1lon]

I prefer additional tests over changing existing ones. This way we make sure we don't regress.

[lhnrd]

The problem is that implementing this functionality as if the inheritance works will break these tests because it relies on inline styles instead of declared ones.

[eps1lon]

Write two tests then and comment the wrong one properly so that it is obvious that it will break once jsdom is fixed.

[Smolations]

I don't currently have time to set up a sandbox repro, but this same assertion is failing for me when opacity: 0 (using stylesheet styles). I'm only commenting because it seems this assertion may need more refining.

Stylesheet (imported directly into component definition file):

.Dialog {
  opacity: 0;
  // ...

  .Dialog--open {
    opacity: 1;
    // ...
  }
}

And test output failure (verified other classes not setting opacity: 1):

    expect(element).not.toBeVisible()

    Received element is visible:
      <div aria-labelledby="h9FY4ou1e5jp_LqptbvKB" aria-modal="true" class="Dialog Dialog--with-close-icon ModalDialog" data-component="ModalDialog" data-focus-lock-disabled="disabled" role="dialog" tabindex="-1" />

• @testing-library/jest-dom version: v5.7.0
• @testing-library/react version: v10.0.4
• node version: v10.18.0
• npm version: v6.13.4

[simonolubhaing]

Is there any update on this, or a workaround. I've posted a CodeSandbox with minimal code on StackOverflow reproducing the issue
https://stackoverflow.com/questions/62427793/isvisible-doesnt-work-in-jest-test-using-jest-dom

[eps1lon]

Is there any update on this, or a workaround. I've posted a CodeSandbox with minimal code on StackOverflow reproducing the issue
stackoverflow.com/questions/62427793/isvisible-doesnt-work-in-jest-test-using-jest-dom

That stackoverflow question is about opacity not visibility.