DEV Community

Discussion on: Testing a simple component with React Testing Library

Collapse
jantimon profile image
Jan Nicklas

data-testid is only for cases which are hard to solve with the recommended testing-library api..

In your case you can also use the following code instead: screen.getByRole('textbox', { placeholder: "Add word..." })

testing-playground.com/

Collapse
haaxor1689 profile image
Maroš Beťko

This solution seems much better. Cluttering your components with testing attributes looks like bad practice.

Collapse
mbarzeev profile image
Matti Bar-Zeev Author • Edited on

Yes, I am aware that this is what the recommendations suggest, but IMO tightly coupling language-based queries (byText, byLabelText, byAltText, byPlaceholderText, etc.) are more fragile and limiting when you wish to test other languages, for instance.
More so, when you write e2e automatons you find that having a non-dependent identifier makes life a lot easier. So If you're going to do that for e2e test, why not use the same data-testId for both purposes.
This is a discussion that also took place on twitter with Kent C. Dodds (twitter.com/mattibarzeev/status/14...) and I might submit a "call" just to make sure I understand what he's suggesting there.