A Story(book) About Testing

Malde uses a story about developer Ella to show how Storybook helps teams build, test, and document UI components outside the full app. Stories capture a component’s rendered state, and controls and actions let developers vary props and check callbacks. The React Native Web add-on makes React Native components available in Storybook for the web, where teams can use web features such as interaction tests.

Storybook’s Jest-powered test runner can check that stories render without errors and validate assertions in their play functions. Malde says tests can run locally, in CI, or against a deployed Storybook, with coverage tracking. Interaction tests use a play function to simulate actions, such as pressing a login button and checking that the displayed state changes.

Chromatic pairs with Storybook to automate visual and interaction testing. Its pixel-based snapshots help teams compare component appearance across builds, branches, and commits; Malde distinguishes these from Jest snapshots, which compare rendered output. Chromatic also makes components searchable and documented, supports UI review with teammates, and can connect Storybook implementations to Figma variants.

Storybook can reduce the cost of testing individual components, make edge cases easier to check, and let frontend teams work independently of backend functionality. It can also help design system maintainers share components and help teams prototype flows. Malde notes setup overhead, differences between web and device rendering, limited parity between native and web features, and the challenge of making Storybook the app entry point.

For device-specific checks, Malde suggests running Maestro tests against Storybook on a device. She also describes using Turborepo to keep Storybook in a separate app, preserving the main app’s entry point, and a setup that runs the emulator and web version together. These approaches let teams use web-based Storybook features while retaining options for native testing.