Hidden elements should not be queriable

[matheus1lva]

• DOM Testing Library version: 7.1.1
• node version: 12

Relevant code or config:

All the code and test can be found here:
https://codesandbox.io/s/sad-dijkstra-fx8i8

What you did:

I have a hidden element on my screen (either via visibility: hidden or display: none), when trying to query for something that is inside this element, it is being found! Which is technically "wrong" because the user is not seeing it!

Suggested solution:

Ideally (in the most ideal scenario) would be to now show this. I saw that are few implementations of this on cypress and other E2E libs, but not specifically here! This would be great, because we are testing what the user is seeing, not how the dom is being written!

[eps1lon]

Which is technically "wrong" because the user is not seeing it!

This needs to be fleshed out more. In JSDOM we could only query for display and visibility styles. This does not cover every method that makes an element not "seeable".

The only implementation we do have currently is using the accessibility tree (which considers display and visibility). This means getByRole('button', { name: 'Test 123' }) will throw if the only button with text Test 123 is display: none or visibility: hidden. However, this only works for semantic elements not for generic ones like <div> or <span>.

I think it makes more sense to add a custom filter locally. That way you have control over what is considered "seeable" for you. Any implementation we would use would leave out a lot of edge cases that might lead to frustrating test results.

[leonardovillela]

Hey @eps1lon, I was thinking about trying to take this issue. How is this custom filter you mentioned? Every query method can receive it as an option? or maybe configure it in a "global" way for testing-library, using configure function?

[karthik20]

Doesn't the https://github.com/testing-library/jest-dom provide a solution already?
Instead of checking if the element is truthy or falsy, it can be queried for visibility. Forked repo of the OP:

https://codesandbox.io/s/boring-dew-6glzs

@playma256 , you can use toBeVisible matcher to achieve this as follows:

expect(getByText("Test 123")).not.toBeVisible();

This works coz, this doesn't rely on semantic tags and rather window.getComputedStyle(element).

[eps1lon]

Closing this due to inactivity. We already exclude elements in ByRole if they're not part of the accessibility tree. Since this has some negative performance implications and does not affect the results in 99% of the test cases we're not including this check in every method (yet).

So

1. if you want to make sure the queried element is in the a11y tree: use ByRole
2. If you want to make sure the queried element is perceivable: use visual testing tools (e.g. screenshot diffing)

[arturohernandez10]

That may work for unit testing but not for end to end testing. The "ideal" of usability testing, at least in my mind. Even if there is a performance penalty, there should be a good option out of the box. I am dealing with a website that has multiple HTML portions enabled and disabled depending on media queries. It's extremely fast and responsive but hard to test. This library is ideal. But I may have to implement a quick "least performant" workaround. When this library is best positioned to include the best code for my case.

[kentcdodds]

Luckily for those cases, you can create your own custom queries which could do this kind of thing for you: https://testing-library.com/docs/react-testing-library/setup#add-custom-queries

Good luck!

[mhelvens]

1. if you want to make sure the queried element is in the a11y tree: use ByRole

That would be ideal, except as you've mentioned, it can only query by role, and many elements won't have a defined role. Is there any way to limit queries to the accessibility tree when using getByText?