Chapter 7 of 8 · 4 practices · 2 min · 4-question quiz
Testing React code
Tests that give you confidence to refactor: test what users see and do, not how components are built inside.
Start: Test what the user sees, not component internals4 practices in this chapter
- 1Test what the user sees, not component internalsTests that check internal state or call component methods break every time you refactor, even when the app still works. Test through the rendered output instead:
- 2Wait for async UI with findBy queriesActions, transitions and data fetching update the screen after a delay, so asserting immediately makes tests flaky. Use
findByqueries, which retry until the element appears or a timeout passes… - 3Cover the critical user flows with end-to-end testsUnit and component tests cannot catch everything: routing, real network calls, cookies and browser quirks only show up in a real browser.
- 4Enforce the Rules of React with the hooks lint pluginThe
eslint-plugin-react-hookspackage checks: the Rules of Hooks; exhaustive dependencies; in its current presets, the compiler-powered rules that catch impure renders and other patterns React…
Check yourself on this chapter
4 questions, right here once you are signed in. Your progress is saved as you read.