How can I check whether an element is visible with Jest?

Question

I have a straight forward react-comp. which I want to test the styling depending on the react state. The comp looks like the following:

React-comp.

const Backdrop = ({ showBackdrop }) => {
    const backdropRef = useRef();

    function getBackdropHeight() {
        if (typeof window !== 'undefined') {
            return `calc(${document.body.clientHeight}px -
            ${backdropRef.current?.offsetTop || 0}px)`;
        }

        return 0;
    }

    return (
        <div
            data-testid="backdrop"
            className={classNames(styles.backdrop, showBackdrop ? styles.show : styles.hide)}
            ref={backdropRef}
            style={{ height: getBackdropHeight() }}
        />
    );
};

Styling

.backdrop {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 156px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3;
    ...
}

.show {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.25s, opacity 0.25s ease-out;
}

.hide {
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.25s ease-in;
}

And the error that I always get from the test is, that the element is visible:

Received element is visible:
  <div class="backdrop hide" data-testid="backdrop" style="height: calc(0px -
            0px);" />

  21 |         const { getByTestId } = renderWithIntl(<Backdrop showBackdrop={false} />);
  22 | 
> 23 |         expect(getByTestId('backdrop')).not.toBeVisible();
     |                                             ^
  24 |     });
  25 | });
  26 | 

Test

it("should not render visible backdrop on falsy state", () => {
    const { getByTestId } = render(<Backdrop showBackdrop={false} />);

    expect(getByTestId('backdrop')).not.toBeVisible();
});

Any way on how to get the element as not visible without using react inline styling!?

Foliolate

You may try toHaveStyle() assertion, passing 'visibility: hidden' as parameter – Decent

Does not work...the received value is also still visible – Foliolate

Hi. There's a non-straightforward issue with the expectation that css styles coming from a stylesheet are recognized at run time in a jest/jsdom test env. See this comment I once left about it in a jest-dom issue: github.com/testing-library/jest-dom/issues/… – Ameliorate

Answer 1

You can use toBeVisible() function from RTL. Here you have docs: https://github.com/testing-library/jest-dom#tobevisible

Example:

// element should not be visible on screen
expect(screen.queryByText('1')).not.toBeVisible();

Lockyer

As a note, I had to add import '@testing-library/jest-dom'; to my test imports for this to work. – Parallelism

Answer 2

To check element does not exist, you can use queryBy to avoid throwing an error with getBy.

with screen.getBy* you would get an 'unable to find element' error while using screen.queryBy* will return 'null' if the element is not found.

example -

const backDrop = screen.queryByTestId('backdrop');
expect(backDrop).toBeNull();

Ref - https://testing-library.com/docs/guide-disappearance/#nottobeinthedocument

Jermaine