Added id and class name selectors

[chuntley]

What: Added id and class name selectors.

Why: To allow testing of class names being applied to elements. We hit a blocker with this library without having the ability to query by a class name. In our case, we have a tabbed view that shows content when a tab is clicked. We can test for content being displayed, however we have no way of testing that the selected tab is showing the correct CSS. This fixes that.

How: grit

Checklist:

• Documentation added to the docs site
• Typescript definitions updated
• Tests
• Ready to be merged

[chuntley]

I only intended to create a PR on my fork for my team to review, however since I accidentally opened this on the main repo I think it would be worth at least having a discussion about adding these selectors.

[kentcdodds]

Hi @chuntley,

Sorry, no. These enable people to test implementation details which we want to discourage. It's simple enough to write tests that use the built-in queries and results in a more maintainable testbase. And for situations where a class name or id somehow makes more sense, you can use the container. The fact that it's "harder" is a feature.

[chuntley]

@kentcdodds, why would such an important aspect of our application be intentionally more difficult to test? The content displayed in the tab is equally as important as showing which tab is selected. Making it harder to test is actively encouraging people to not test critical aspects of their application, which is something I do not understand.

[bcarroll22]

@chuntley you should check this out, I think it'll really help.

Try to select the elements on the screen by something your user can see (they can't see class names), and then assert that it has the classes you expect so that you're confident things are working as expected for them.

[molvqingtai]

@chuntley you should check this out, I think it'll really help.

Try to select the elements on the screen by something your user can see (they can't see class names), and then assert that it has the classes you expect so that you're confident things are working as expected for them.

Now, I have created this testing-library-extra that can match any dom.