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

Issue Analytics

State:
Created 4 years ago
Reactions:20
Comments:28 (13 by maintainers)

Top GitHub Comments

11reactions

eps1loncommented, Feb 18, 2020

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.

6reactions

jrnail23commented, Jun 8, 2022

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