1

So I have an element that has a class that has display: none; but when I do expect(screen.getByTestId('header')).not.toBeVisible(); it tells me it's visible. I want to test that the user cannot see anything in this element.

<div className={classNames}>
  <header className={styles.header} data-testid="header">
    <div>
      <span className={styles.eventTime}>{timeText}</span>
    </div>
    <div className={styles.topright}></div>
  </header>
</div>

So based on some criteria that classNames variable can add a class that is will set the header class to have display none.

Improve this question
2
  • 1
    I assume it works with inline style instead of css classes? Sounds similar to the question I asked here. Basically seems like you cannot test against css properties set by css classes using RTL. Commented Apr 6, 2021 at 3:38
  • @srk gotcha. I am use to emberjs that uses qunit that could test this. Commented Apr 6, 2021 at 11:54
Related questions
1
react testing library render component conditionally
3
React testing library failed because of window undefined
0
tests failing in react testing library
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.