Automating Storybook version upgrades in CI

[ghost]

Storybook upgrades often break configs. How can we automate upgrade testing in CI so breaking changes get caught earlier?

[manimovassagh]

Here's a practical approach that has worked well for me:

1. Use Renovate or Dependabot with a dedicated group

Renovate config example:

{
  "packageRules": [
    {
      "groupName": "storybook",
      "matchPackagePatterns": ["storybook", "@storybook/*"],
      "schedule": ["every monday"],
      "automerge": false
    }
  ]
}

This creates a single PR with all storybook-related updates grouped together.

2. Add a build + test step to CI

Make sure your CI runs build-storybook and (if you use it) test-storybook on every PR:

- run: npx storybook build
- run: |
    npx concurrently -k -s first -n "SB,TEST" \
      "npx http-server storybook-static --port 6006 --silent" \
      "npx wait-on http://127.0.0.1:6006 && npx test-storybook"

When Renovate opens the upgrade PR, your existing CI catches any breaking changes.

3. Optional: scheduled upgrade smoke test

For catching issues even earlier (before Renovate picks up the new version), add a scheduled workflow:

name: Storybook Upgrade Test
on:
  schedule:
    - cron: '0 9 * * 1'
jobs:
  test-upgrade:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx storybook@latest upgrade --yes
      - run: npx storybook build

4. Pin exact versions

Use exact versions (not ranges) in package.json so upgrades only happen through the automated PR, never silently during install.

The combination of Renovate + build-storybook + test-storybook in CI catches most breaking changes before they hit your main branch.