Testing React Components Without Mocking Everything
Testing Library's guiding principle: test the way users interact with your UI, not implementation details.
If your tests break every time you refactor a component's internals — rename a state variable, extract a helper, change the JSX structure — your tests are testing implementation, not behavior. Testing Library's philosophy: query the DOM the way a user would (by role, label, text), interact the way a user would (click, type), assert on what a user would see.
The Right Queries
Prefer getByRole over getByTestId. Accessible roles mirror how screen readers and users perceive the page. If you can't query by role, your component likely has an accessibility problem. Test IDs are a last resort — they create a parallel addressing system that drifts from the real UI.