Testing design systems using storybook + Storybook 7.0 sneak peeks
summary
Demonstrates using Storybook stories as tests by adding play function handlers that run in a browser via Playwright and testing library, plus an interactions add-on that shows step-by-step progress and lets the tester time-travel by remounting states. A test runner automates all stories, surfaces failing-story links into Storybook, and supports snapshots and accessibility hooks. Storybook 7.0 goes “modern first” with ESBuild and Vite support, lazy-loading stories, and reports dramatic build speed-ups (example drop from ~30s to ~2s).
AI-written summary · about
chapters (19)
- 0:00Introduction and speaker background
- 1:59Challenges in building and testing UIs
- 3:23Anatomy of a UI interaction test
- 5:52What is Storybook and its benefits
- 9:31Writing stories in Storybook 7
- 10:58Reusing stories in tests for efficiency
- 12:25Visual feedback in UI testing with Storybook
- 13:09Storybook testing with Play functions
- 15:21Time-travel debugging in Storybook tests
- 16:45Automated test runner for Storybook stories
- 17:50Debugging failed tests with Storybook links
- 18:52Extending tests with add-ons and snapshots
- 19:33Stories as comprehensive test cases
- 20:36Storybook 7 modernizes with ESM and Vite
- 22:19Performance improvements in Storybook 7
- 23:26Stories everywhere and framework support
- 24:30Embedding stories in documentation
- 25:13Future of Storybook and community collaboration
- 26:14Closing remarks and Q&A
