I am studying RTL. The documentation says: "If you find yourself using container to query for rendered elements then you should reconsider! The other queries are designed to be more resilient to changes that will be made to the component you're testing. Avoid using container to query for elements!" Can someone use an example to explain what is being discussed here? Thanks.
When accessing elements within your tests, RTL gives you the property of container
that will allow you to query the nodes just like you would with javascript. These should be used only as a last resort if recommended queries do not meet your needs.
e.g.
container.querySelector(".some-class-name")
This is not suggested because of how it will likely go against the guiding principle:
The more your tests resemble the way your software is used, the more confidence they can give you.
By using javascript queries, one often will access the DOM in a way that a user will not or cannot access it, which will not resemble how the software is used. For example, a user would likely not ever look for a class name to find a button on a webpage.
Alternatively, the library give you access to the screen
where you access visible and user-accessible nodes through queries such as getByText
and getByRole
which more closely resembles how a user would interact with the software.
e.g.
screen.getByRole("button")
The complete explanation of recommended queries within RTL are found here.