Build and Test Components with Storybook
Your Storefront Next app includes Storybook. Storybook is an open-source frontend tool for building, viewing, testing, and documenting React UI components. With Storybook in Storefront Next, you can explore the built-in Storefront Next components, build components in isolation, run automated tests, and create component documentation. Using Storybook for component development leads to easier component discoverability, faster development, higher component quality, and reduced regressions.
Use Storybook to perform these tasks.
- Preview and learn about components in different rendered states, variants, and scenarios, such as light or dark mode and different screen sizes.
- Develop components in isolation without running the entire app or dealing with server and state logic.
- Run automated tests, including interaction tests, snapshot tests, and accessibility (a11y) tests.
- Create interactive documentation for designers and developers.
A story is a single, isolated rendered state of a UI component. It’s like an example component or a test case that shows how the component looks or behaves in different states. The component developer can provide multiple stories for each component. For example, stories for an address card can include a default address card, a preferred address card with a preferred badge, an address card with no action buttons, and an international address card.
To start Storybook in your Storefront Next app, run this command. Make sure to have install the project dependencies first with pnpm install.
After you run this command, a web page opens and shows the Storybook component library. In Storybook, browse each component, read its documentation, and check its stories to view how the component looks and behaves in different states.
To view the standard components that are available in the Storefront Next template, check out the public Storybook instance.
In this section: