Tame the Component Multiverse

on YouTube ↗31m

" summary

Claim: using component-driven visual testing automates the combinatorial UI problem so teams catch visual regressions before release. The pipeline uses Storybook to isolate variants, Chromatic to capture visual snapshots and CI-driven diffs, plus tools like TypeScript, Testing Library, jsdom, MSW and interaction tests in browser. One view multiplies into 34,560 states in the example, so automated visual diffs and CI gates replace slow Cypress flows and manual breakpoint fiddling, and the system demonstrates practical, incremental adoption.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 1:28The state of web UI
3. 3:24Speaker background
4. 5:54The testing trophy
5. 8:35The UI multiverse
6. 12:56Combinatorial explosion
7. 15:03Testing gaps
8. 17:53Storybook solution
9. 22:57Chromatic automation
10. 25:40Conclusion and Q&A

" related talks

• 04mInterview with Michael ChanMichael Chan · React Advanced 2022
• 32mUI Development Made SimpleOvidiu Cherecheș · JSHeroes 2017
• 27mBuilding a Maintainable UI with StorybookNorbert de Langen · ReactNext 2018
• 31mA Beginner’s Guide To StorybookNiamh McCooey · JSworld Conference 2023
• 31mThe wild side of visual testsEran Shapira · Reversim Summit 2019
• 44mIt’s all about componentsDebbie O'Brien · jsday 2022
• 27mUp and Running with Universal ComponentsKurtis Kemple, Samantha Bretous · ReactEurope 2018
• 45mTesting Big in JavaScriptRobert Deluca · JSConf US 2018