Component-Driven Development & Visual Test Coverage
summary
Argues that building UI components in isolation yields test coverage for free by pairing Storybook stories with visual regression; shows a working service called Chromatic that snapshots stories and runs 2,000 tests in 45 seconds across browsers and viewports, highlighting real speed and determinism gains. Demonstrates a prototype story coverage tool that maps unexercised component lines to missing stories so teams can see what states to add. Shows concrete tooling, a performance metric, and a prototype that actually updates when stories change.
AI-written summary · about
chapters (21)
- 0:00Start
- 1:45Nobody wants to write tests.
- 2:37Nobody knows what to test.
- 3:04Nobody else understands tests.
- 3:56Ul code is really complex.
- 5:51Every UI test is an integration test.
- 7:28What's a component?
- 10:04We decompose each screen into components.
- 10:53Build out components in isolation
- 11:41Combine into higher-level components.
- 13:06Every component state is called a story.
- 13:25Each story is a simple JS function.
- 13:59Modern front-end engineers depend on it.
- 14:27Twitter design overhauled with Storybook.
- 14:40Slack UI built with Storybook.
- 14:55Teams write 1000's of stories.
- 15:24Stories are crafted.
- 16:00Minor tweaks can cause major regressions.
- 16:27But every spec is testable!
- 18:04Changes summarized on each commit.
- 18:22Test 1000's of stories in minutes.
related talks
24mCost-Effective Testing with Storybook and Playwright in Vue Applications
24mStorybook Vitest
30mTesting presentation components visually
31mReinforcing your blocks: A practical guide to UI component testing
26mVisually Testing Your Components
40mLove Story: Testing angular components with Storybook and Playwright
31mContinuous Testing in a DevOps World
27mTesting design systems using storybook + Storybook 7.0 sneak peeks