Lesson 13 / 25

CI/CD Integration

Integrate Storybook tests into your CI/CD pipeline.

CI/CD workflow

Integrate Storybook tests into your CI/CD pipeline to ensure component quality on every commit. Run interaction tests, accessibility tests, and visual tests automatically.

GitHub Actions example

Here's how to run Storybook tests in GitHub Actions.

name: Storybook Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - run: npm run build-storybook
      - run: npm run test-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Test automation benefits

CI/CD integration catches component regressions early, ensures accessibility compliance, and maintains design consistency across deployments.

Running tests locally before push

Run Storybook tests locally to catch issues before pushing to CI.

# Run interaction tests
npm run test-storybook

# Run visual tests against local build
npm run build-storybook
npx chromatic --local