jest-dom: `toBeVisible` not working as expected with `visibility` property

@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.

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 25
Comments: 38 (17 by maintainers)

Commits related to this issue

test(modal): fix invalid test case https://github.com/testing-library/jest-dom/issues/209 — committed to sungik-choi/bezier-react by sungik-choi 6 months ago

Most upvoted comments

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.

+13

eps1lon on Feb 18, 2020

Here’s an absolutely minimal example of how .toBeVisible() is failing for me, with inline SVG:

document.body.innerHTML = `
  <svg>
    <g id="my-element" visibility="hidden" />
  </svg>`;

// yep, this assertion fails.
expect(document.getElementById('my-element')).not.toBeVisible();

Also in Code Sandbox.

My best guess is that this is a bug in jsdom itself, because the computed style for visibility of my-element ends up being visible here: https://github.com/testing-library/jest-dom/blob/main/src/to-be-visible.js#L6

+10

jrnail23 on Jun 8, 2022

Same problem here with opacity.

Hai-San on Nov 14, 2023

@MarcoLeko you may be experiencing an additional issue where styles from a stylesheet are not loaded automatically in jest/jsdom test env where you load and test the component in isolation. Check this comment and let me know if that helps. To confirm if the stylesheet is loaded, can you confirm that you can assert toHaveStyles with other properties that should be there no matter what? For instance, based on the example in the SO question, does this assertion passes if you add it to your test right after rendering?

expect(screen.getByTestId('backdrop')).toHaveStyle({ position: 'absolute' })

gnapse on Sep 23, 2020

I’ve got a PR ready that fixes this issue: https://github.com/testing-library/jest-dom/pull/428

gnapse on Jan 13, 2022

Oh ok, sorry. The signal here got lost between all the noise of styled components and the concern about stylesheets being loaded or not.

Indeed, it is a mistake that we treat parent lack of visibility as final, when in fact visibility, as opposed to display: none, can be overridden by child elements.

gnapse on Jan 19, 2021

Is there any progress on this? I am also facing the same issue and put up a question with all relevant infos here: https://stackoverflow.com/questions/64026278/react-jest-rtl-check-if-element-is-not-visible

Btw. react testing library only reacts to styling changes when, I am using inline-styling in the react comp.

MarcoLeko on Sep 23, 2020

It’s working in styled-component v5.2.1, see this issue

tatinacher on Jan 19, 2021