testing-library

To test React components like a user, query elements by accessible roles, text, and labels rather than testing internal implementation details. This approach ensures your UI tests are robust, accessible, and resistant to refactoring.

The best way to write refactor-resistant UI tests is to focus on component behavior and query elements by accessible roles, text, and labels. This keeps tests stable even when internal implementation details change.

Yes, testing-library works with Vitest and happy-dom. The setup integrates @testing-library/react, @testing-library/jest-dom, and @testing-library/user-event with Vitest to facilitate user-centric UI component testing.

To test a React login form, simulate user input for email and password using @testing-library/user-event, then click the sign-in button. Query elements by accessible labels and text to verify the expected form behavior.

Querying elements by accessible roles instead of test IDs catches accessibility issues by default and ensures your tests interact with components exactly as users do, making them robust against internal refactoring.