React Hooks broke my tests, now what?
summary
Migration from classes to hooks leaves the app working but half the tests fail because tests assert implementation details like state or internal props. The fix is concrete: migrate tests from Enzyme to React Testing Library + user-event, use render/getBy/queryBy/findBy/waitFor/within/screen, prefer accessible queries, use testing playground and the RTL ESLint plugin, and rely on waitForElementToBeRemoved and user-event for realistic interactions. After migrating, tests survive refactors and accessibility improves.
AI-written summary · about
chapters (20)
- 0:00Start
- 1:53Who am I?
- 2:23What is this talk about?
- 3:36Why hooks?
- 5:07Migrating our codebase to React Hooks
- 7:50Why migrate from Enzyme?
- 9:58React Testing Library
- 11:08Render
- 11:46Queries Variants
- 16:30Semantic Queries Make use of HTMLS and ARIA compliant selectors
- 20:57Firing Events
- 22:58Async Utilities
- 24:25Helpers
- 26:59Common mistakes
- 28:18Using getBy with expect .not.toBeInThe Document
- 28:55Using await with fireEvent or non async queries
- 29:38Using await waitfor()
- 30:15Using cleanup
- 30:40Using wait For with synchronous queries
- 31:01eslint-plugin-testing-library
related talks
26mMigrating from Enzyme to React Testing Library
27mReact Hook Pitfalls
24mUsing React Testing Library to Write Stronger Tests
33mA year in the React World
17mReact hooks: the good, the bad and the ugly
22mElizabeth Funk - An Introduction to React Testing Library
18mTesting React in a Right Way
32mRefactoring React