Why are my React tests breaking on refactors?
Usually because you are testing implementation details: internal state, instance methods, or child structure. These change during refactors even when behavior is unchanged. Test behavior with role and text queries instead.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Common React Testing Mistakes That Make Tests Fragile
No. Class names tie tests to styling. When you change the styling, tests break even though behavior is the same. Use role and text queries instead, which test what the user experiences.
Better than class names, but still an implementation detail. Use them only when role and text queries are not available. The first choice should always be role and accessible name.
Usually because you forgot to await async actions like data fetching or timeouts. Asserting before the result is ready gives false failures or passes. Use findBy queries or waitFor to handle async correctly.
Still have questions?
Browse all our FAQs or reach out to our support team