Summary
Highlights
The discussion moves to unit tests, explaining their traditional role and limitations for UI components. It's highlighted that TypeScript significantly reduces the need for many unit tests by performing static analysis, offering faster feedback loops. Unit tests are still valuable for complex logic and frequently refactored code but are no longer the primary testing method.
Storybook stories are presented as powerful integration tests. They run live, offering fast feedback, and can cover view logic, visual rendering, accessibility, localization, and UI interactions more comprehensively and affordably than traditional integration or unit tests, leading to 80-90% of test code being Storybook stories on new projects.
Demonstrations in a real Storybook instance show full page examples, interactive components, responsive viewport testing, right-to-left language layouts, and integrated accessibility checks. The interaction tests feature allows for scripted user interactions, providing a robust testing and development environment.
Chromatic, a paid service, is introduced for visual snapshot testing within Storybook. It integrates with GitHub, providing visual diffs in pull requests and static hosting for Storybooks, streamlining the visual review workflow and involving designers in the approval process.
The structure of Storybook stories using Component Story Format (CSF) is explained, including default exports for configuration and named exports for individual stories. Advanced configurations are shown, such as using the Next.js add-on for router stubbing and dynamically generating props, highlighting the flexibility of JavaScript in story definitions.
Further exploration of interaction tests demonstrates how to programmatically open menus upon story load using the `play` key. This ensures that visual states, like open dropdowns, are captured by tools like Chromatic, providing more complete test coverage.
The challenge of testing components that fetch backend data is addressed using Mock Service Worker (MSW) to define mock HTTP responses. This section also introduces Pact, a contract testing toolkit, integrated with Storybook to verify that mocked API requests align with the actual backend service, bridging the gap towards end-to-end test guarantees.
The speaker discusses Culture Amp's experimental approach to end-to-end tests, suggesting they might be unnecessary due to the high confidence provided by Storybook. While acknowledging the 'YOLO' (You Only Live Once) strategy for UI codebases, they maintain synthetic and smoke tests for production.
A final summary of the 'testing trophy' model is presented: a broad base of static types provided by TypeScript, targeted unit tests (with a positive nod to 'Vite' as a potential alternative to Jest), and a vast majority of testing handled by comprehensive Storybook stories, with a minimal or absent layer of traditional end-to-end tests.
The speaker, Kevin Yank, introduces Storybook as a crucial tool that has enabled Culture Amp to shift their front-end testing strategy from the traditional test pyramid to Kent C. Dodds's testing trophy. He acknowledges Jakob for pioneering this work at Culture Amp.
Storybook is presented as a versatile tool that can run components in isolation, deploy to static sites, and act as a test suite in CI pipelines. An example of its extensibility is shown through an integration with Smartling for high-quality translations, where Storybook captures screenshots to provide visual context to translators.