Fantastic Bugs and Where to Find Them
summary
Concrete failures and concrete fixes: a parental-control bug gets prevented by a unit pure-function test that asserts state transitions; a forever-loader bug gets caught by component checks with react testing library or by higher-level integration / Cypress flows; a production outage from a busted Bootstrap bundle is diagnosed only by Cypress end-to-end with visual debugging and larger environment tests; Spotify runs ~1,000 front-end tests under 15 minutes, uses an in-house visual regression on every branch (alternatives: Percy, Loki, Storyshots, BackstopJS).
AI-written summary · about
chapters (9)
- 0:00Introduction to testing
- 2:36The bug-finding pyramid
- 5:42Unit testing pure functions
- 7:26Testing React components
- 10:53Integration testing
- 13:31Cypress and visual debugging
- 15:34End-to-end testing
- 18:54Visual regression testing
- 22:15Q&A and concluding thoughts
related talks
27mFantastic Bugs And Where To Find Them by Iris Schaffer (Eng) | JSConfAM19
08mHow Big Buck Bunny helped track down bugs
26mModern Testing Practices in Frontend Applications
42mWait, I have to test the front end too?
38mFrontend Tests: what nobody said to you
07mHow to Catch a11y Defects During Unit and E2E Testing
29mBlink and you’ll miss it: Stories from discovering most annoying bugs and test flakes
30mIt's a (testing) trap! - Common end-to-end pitfalls and how to solve them