storybook-journeys

Create end-to-end Storybook journeys by building a page-level story harness with routing and providers, attaching MSW handlers for mocked APIs, and scripting interactive play functions to simulate user flows like signup and checkout.

Yes, you can attach MSW-driven API mocks per story to demonstrate multiple states, then use Storybook's play function to automate user interactions across those mocked states within your journey stories.

Validate Storybook play function scripts in CI by integrating the optional Storybook Test Runner, which executes your journey stories and play functions to ensure interactive flows like checkout and onboarding pass automated validation.

Before building page-level Storybook stories, you need a configured Storybook environment, MSW integration for API mocking, and a reusable journey harness that includes React router and providers to render full pages.

This approach works for full page and screen flows, not just individual components. It targets end-to-end user journeys across entire pages using a harness with routing and providers to render complete application contexts.

The best way to simulate signup and checkout flows in Storybook is creating page-level journey stories with MSW-mocked APIs and interactive play scripts that automate the user actions required to complete those specific flows.