Why toBeVisible doesn't work with getByRole?

[felipecesr]

Hi guys! Recently I needed to use the toBeVisible assertion with an element that I got using getByRole.

expect(getByRole('button', { name:  'Visible Example' })).toBeVisible()

It doesn't work. I read the docs and all the examples are using ByText queries.

expect(getByText('Visible Example')).toBeVisible()

Are there any reasons for that?

[gnapse]

The fact that it works or not is most likely unrelated to whether you used getByRole or getByText to find the element. toBeVisible has no knowledge of what means were used to query for that element. It merely receives the element found by whatever means, and asserts that it is visible or not.

The documentation only using getByText is also irrelevant. The documentation in our README uses placeholder names for helpers, but in practice those helpers are part of a different library (react-testing-library). And also, it is likely that when our README was written, getByRole did not exist yet. It was not part of react-testing-library at first.

Lastly, if you can find a situation where using a different query function changes the outcome of toBeVisible, then that sounds more like a bug. Is that what you've found?

[felipecesr]

Sure! You can fork this codesandbox repository and run pnpm test. Let me know if you have any questions.

[gnapse]

Exactly. This confirms what I say. toBeVisible has nothing to do with this. It's the getBy* function used what changes the behavior.

• getByText searches the DOM without any other consideration about whether the element should be included in the search or not. Since the element exists, it returns it.
• getByRole takes into account a lot more stuff, including being "blind" to elements that do not exist from the accessibility tree POV. Being an element with the display: none style, getByRole does not consider it, and fails the search, returning null.

So this is not a "toBeVisible does not work with getByRole". This is more like .toBeVisible returns false if it is given null for input instead of an element.

[felipecesr]

So this is the expected behavior for the ByRole query, right? It shouldn't consider invisible elements like that, even with hidden: true, right?

[gnapse]

I think so, but I'm not a 100% sure. Also, those helpers are not part of jest-dom. I suggest you ask in https://github.com/testing-library/react-testing-library or https://github.com/testing-library/dom-testing-library, which is where these DOM querying helpers come from.

[felipecesr]

Ok! Thank you for your help.