Testing

Storybook

A workshop for UI components: develop, document and test in isolation from the app.

Official siteRepository

What it is

Storybook appeared in 2016. It runs components separately from the app, each in different states called stories. That lets you develop and review UI without a backend or complex flows.

It supports React, Vue, Angular, Svelte, Web Components and others. Addons provide auto-documentation (props and examples), accessibility checks, interaction tests (clicks and typing inside a story) and visual regression tests through Chromatic.

Storybook acts as a living design system for the team: designers, testers and developers see the same components. Stories can run as tests through Vitest or Playwright.

Use it when

  • A component library or design system.
  • Many UI states (loading, error, empty) that are hard to reproduce in the app.
  • You need visual regression tests for components.

Avoid it when

  • A small project with a few components: the cost of maintaining stories is not justified.
  • You only need end-to-end tests of full flows.

Key concepts

Story
One state of a component with specific props.
CSF (Component Story Format)
The standard *.stories.ts file format with meta and named exports.
Controls and Docs
Interactive prop editing and automatic documentation.
Interaction tests
A play function simulates user actions and checks the result.
Visual testing
Comparing story screenshots between changes, usually through Chromatic.

Example

Two button states in CSF format.

Interview questions

  1. 1. What is Storybook for?

    To develop and check components separately from the app in all states, document them and share them with the team. It is also the base for visual regression tests.

  2. 2. What is a story?

    A named export in a *.stories file that describes one state of a component through a set of args (props).

  3. 3. How do you test interaction in Storybook?

    With a play function in a story: it runs testing-library actions (userEvent.click, expect). You can run them in the Storybook UI or in CI.

  4. 4. What are visual regression tests?

    Automatic comparison of component screenshots between changes to catch unintended look changes. Chromatic is often used for it.

Related technologies

Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).

Explore the platform