Run Storybook build and smoke tests in CI #1526
Conversation
WalkthroughAdds a GitHub Actions workflow to build and smoke-test Storybook on PRs and main pushes, adds a Storybook test-runner that renders each story and clicks the first button in the canvas, and adds an npm script to run the Storybook test-runner against the generated index JSON. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant GH as GitHub Actions
participant Job as storybook job
Dev->>GH: Push to main / Open PR
GH->>Job: Trigger workflow
Job->>Job: actions/checkout@v4
Job->>Job: actions/setup-node@v3 (Node 18, npm cache)
Job->>Job: npm ci
Job->>Job: npx playwright install --with-deps chromium
Job->>Job: npm run build-storybook
Job->>Job: npm run test-storybook
Note over Job: Runs `npx @storybook/test-runner --index-json ./storybook-static/index.json`\nPermissions: contents: read
sequenceDiagram
autonumber
participant SB as Storybook Test Runner
participant Canvas as canvasElement
participant DOM as Story DOM
SB->>Canvas: within(canvasElement)
SB->>DOM: queryAllByRole('button')
alt Button found
SB->>DOM: userEvent.click(first button)
else No button
SB->>SB: Complete without action
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
Codex Review: Here are some suggestions.
Reply with @codex fix comments to fix any unresolved comments.
About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you open a pull request for review, mark a draft as ready, or comment "@codex review". If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex fix this CI failure" or "@codex address that feedback".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
package.json (1)
68-77: Unify Storybook to v8Mismatched v7 and v8 packages detected (e.g.
@storybook/[email protected],@storybook/[email protected]vs@storybook/[email protected]). Align all Storybook deps to v8 and add the test runner:- "@storybook/addon-a11y": "^7.6.17", - "@storybook/addon-essentials": "7.6.17", - "@storybook/addon-interactions": "8.0.9", - "@storybook/addon-links": "8.6.12", - "@storybook/blocks": "8.1.10", - "@storybook/react": "7.6.17", - "@storybook/react-webpack5": "7.6.17", + "@storybook/addon-a11y": "^8.6.12", + "@storybook/addon-essentials": "^8.6.12", + "@storybook/addon-interactions": "^8.6.12", + "@storybook/addon-links": "^8.6.12", + "@storybook/blocks": "^8.6.12", + "@storybook/react": "^8.6.12", + "@storybook/react-webpack5": "^8.6.12", + "@storybook/test-runner": "^0.20.0", - "storybook": "^8.6.11", + "storybook": "^8.6.12",
♻️ Duplicate comments (1)
.storybook/test-runner.js (1)
7-7: Past concern addressed: no more multi-match throwSwitch to queryAllByRole resolves the earlier false failures when multiple buttons exist. Nice.
🧹 Nitpick comments (2)
.storybook/test-runner.js (1)
7-11: Reduce flakiness: use userEvent.setup with relaxed pointer events and add step contextAvoids failures on covered elements and gives clearer test output.
-export const run = async ({ canvasElement }) => { +export const run = async ({ step, canvasElement }) => { const canvas = within(canvasElement); const [button] = canvas.queryAllByRole('button'); if (button) { - await userEvent.click(button); + const ue = userEvent.setup({ pointerEventsCheck: 0 }); + await (step ? step('click first button', async () => ue.click(button)) : ue.click(button)); } };.github/workflows/storybook.yml (1)
21-23: Playwright install is fine; consider caching to speed up CI (optional)Cache browsers between runs to cut minutes off CI.
# Example: - name: Cache Playwright uses: actions/cache@v4 with: path: ~/.cache/ms-playwright key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/storybook.yml(1 hunks).storybook/test-runner.js(1 hunks)package.json(1 hunks)
🧰 Additional context used
🪛 actionlint (1.7.7)
.github/workflows/storybook.yml
16-16: the runner of "actions/setup-node@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: storybook
- GitHub Check: build
| - uses: actions/setup-node@v3 | ||
| with: | ||
| node-version: '18' | ||
| cache: 'npm' |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use setup-node v4 and current LTS
Node 18 reached EOL in April 2025; move to Node 20 (or 22) and the latest action.
- - uses: actions/setup-node@v3
+ - uses: actions/setup-node@v4
with:
- node-version: '18'
+ node-version: '20'
cache: 'npm'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - uses: actions/setup-node@v3 | |
| with: | |
| node-version: '18' | |
| cache: 'npm' | |
| - uses: actions/setup-node@v4 | |
| with: | |
| node-version: '20' | |
| cache: 'npm' |
🧰 Tools
🪛 actionlint (1.7.7)
16-16: the runner of "actions/setup-node@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
🤖 Prompt for AI Agents
.github/workflows/storybook.yml around lines 16 to 19 currently pins
actions/setup-node@v3 and node-version: '18'; update the workflow to use
actions/setup-node@v4 and bump the node-version to a current LTS (e.g., '20' or
'22') in those lines, keeping the cache setting as needed (cache: 'npm'); ensure
any other steps relying on Node 18 are compatible or adjusted accordingly.
package.json
Outdated
| "sb": "storybook dev -p 6006", | ||
| "storybook": "storybook dev -p 6006", | ||
| "build-storybook": "storybook build", | ||
| "test-storybook": "storybook test --index-json ./storybook-static/index.json", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Make Storybook tests hermetic (avoid registry hits) and resilient in CI
- Run the local CLI and disable telemetry/update checks to prevent the 403 registry fetch during CI.
Apply:
- "test-storybook": "storybook test --index-json ./storybook-static/index.json",
+ "test-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 NO_UPDATE_NOTIFIER=1 storybook test --index-json ./storybook-static/index.json",
+ "pretest-storybook": "npm run build-storybook",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "test-storybook": "storybook test --index-json ./storybook-static/index.json", | |
| "scripts": { | |
| // … other scripts … | |
| "test-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 NO_UPDATE_NOTIFIER=1 storybook test --index-json ./storybook-static/index.json", | |
| "pretest-storybook": "npm run build-storybook", | |
| // … other scripts … | |
| } |
🤖 Prompt for AI Agents
In package.json around line 17, the "test-storybook" script invokes the global
Storybook CLI which can hit registries in CI; change it to run the local CLI
binary and disable telemetry/update checks to avoid network calls. Update the
script to call the local binary (./node_modules/.bin/storybook or use npm run
resolution via npx --no-install) and prefix it with environment variables to
suppress updates/telemetry (e.g., NO_UPDATE_NOTIFIER=1 and
STORYBOOK_DISABLE_TELEMETRY=1 or the Storybook-specific env var your version
supports) so the command becomes hermetic and CI-resilient.
CoverageThis report compares the PR with the base branch. “Δ” shows how the PR affects each metric.
Coverage improved or stayed the same. Great job! Run |
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
.github/workflows/storybook.yml (1)
16-19: Upgrade to setup-node@v4 and current LTS Node (20/22) to fix actionlint and EOL.Node 18 is EOL (April 2025) and actionlint flags v3 as too old. Move to v4 and LTS Node.
- - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: - node-version: '18' + node-version: '20' cache: 'npm'
🧹 Nitpick comments (6)
.github/workflows/storybook.yml (6)
12-14: Set job-level env to disable Storybook telemetry/update checks and harden CI.Reduces network calls (helps the prior 403) and standardizes CI behavior.
storybook: runs-on: ubuntu-latest + env: + CI: 'true' + STORYBOOK_DISABLE_TELEMETRY: '1' + NO_UPDATE_NOTIFIER: '1'
22-23: Prefer the official Playwright action for installs and system deps.It handles browser caching and OS deps more robustly than raw npx.
- - name: Install Playwright - run: npx playwright install --with-deps chromium + - name: Install Playwright + uses: microsoft/playwright-github-action@v1 + with: + install-deps: true + # browsers: 'chromium' # uncomment to restrict
13-14: Add a timeout to prevent hung CI.Guardrails for network stalls during install/build.
storybook: - runs-on: ubuntu-latest + runs-on: ubuntu-latest + timeout-minutes: 30
24-27: Upload artifacts on failure for faster triage (static build, logs).Keeps storybook-static and test output for inspection.
- name: Build Storybook run: npm run build-storybook - name: Storybook smoke tests run: npm run test-storybook + - name: Upload Storybook static (on failure) + if: failure() + uses: actions/upload-artifact@v4 + with: + name: storybook-static + path: storybook-static + if-no-files-found: ignore + - name: Upload test results (always) + if: always() + uses: actions/upload-artifact@v4 + with: + name: storybook-tests + path: | + ./**/playwright-report/** + ./**/test-results/** + if-no-files-found: ignore
16-21: Optional: pin npm registry if a custom .npmrc could cause 403s.If your org enforces a private registry for scoped packages, explicitly set npmjs registry for CI.
- - uses: actions/setup-node@v4 + - uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' + registry-url: 'https://registry.npmjs.org'
24-25: Optional: increase memory for Storybook build to avoid OOM on large catalogs.- - name: Build Storybook - run: npm run build-storybook + - name: Build Storybook + run: NODE_OPTIONS="--max-old-space-size=4096" npm run build-storybook
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.github/workflows/storybook.yml(1 hunks).storybook/test-runner.js(1 hunks)package.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- .storybook/test-runner.js
- package.json
🧰 Additional context used
🪛 actionlint (1.7.7)
.github/workflows/storybook.yml
16-16: the runner of "actions/setup-node@v3" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: coverage
- GitHub Check: storybook
🔇 Additional comments (1)
.github/workflows/storybook.yml (1)
8-10: Minimal permissions look good.You added contents: read, addressing the prior security bot warning. No further perms needed for this job.
Any idea why this is failing? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain@kotAPI The issue is that the Storybook test runner is trying to connect to a running Storybook server instead of using the static build. Let me investigate the current setup to identify the root cause. 🏁 Script executed: Length of output: 700 @kotAPI The issue is that the Let me check the CI workflow and test the build process: 🏁 Script executed: Length of output: 839 @kotAPI Now I see the root issue! The 🏁 Script executed: Length of output: 8705 @kotAPI I found the issue! The problem is that the dependencies haven't been installed. The error shows many 🏁 Script executed: Length of output: 87331 @kotAPI Perfect! The build is now working correctly after installing dependencies with Let me check the test runner configuration: 🏁 Script executed: Unrecoverable error: Request timed out after 300000ms (requestId=160654d9-cce6-43b4-a574-21ef07fc6c41) @kotAPI The issue is clear now. The Storybook test runner's The ProblemThe The SolutionYou need to either:
Let me provide you with the corrected approach: Fix the package.json scripts:{
"scripts": {
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"serve-storybook": "npx http-server storybook-static -p 6006 -s",
"test-storybook": "npx @storybook/test-runner",
"test-storybook:ci": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static -p 6006 -s\" \"npx wait-on http://127.0.0.1:6006 && npx @storybook/test-runner\""
}
}Update the CI workflow:name: Storybook Build and Test
on:
pull_request:
push:
branches: [main]
permissions:
contents: read
jobs:
storybook:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Install Playwright
run: npx playwright install --with-deps chromium
- name: Build Storybook
run: npm run build-storybook
- name: Install additional packages for CI
run: npm install --no-save concurrently http-server wait-on
- name: Storybook smoke tests
run: npm run test-storybook:ciThe key changes:
This approach:
Would you like me to create a shell script to test this approach before you update your files? |
@coderabbitai , give me a prompt for AI agents |
|
Tip For best results, initiate chat on the files or code changes. @kotAPI Here's a comprehensive prompt you can use with AI agents for similar CI/testing troubleshooting scenarios: AI Agent Prompt for CI/Testing Issue ResolutionFor your specific Storybook case, the filled version would be: This prompt structure works well because it:
|
Summary
Testing
npm testnpm run build-storybooknpm run test-storybook(fails: 403 403 Forbidden - GET https://registry.npmjs.org/@storybook%2fcli)Summary by CodeRabbit
Chores
Tests