Docs: Add e2e test for useArgs inside a Stories block

[TheSeydiCharyyev]

What I did

Adds an end-to-end regression test for #28333 — useArgs called from a story rendered inside a <Stories> block used to update the page's primary story instead of the story it was called from. The bug no longer reproduces on next, so this guards against a regression.

• New React template fixture renderers/react/template/stories/use-args.stories.tsx: a controlled component that updates its own value arg through useArgs, with two stories (StoryA, StoryB) shown on the autodocs page.
• New e2e test in e2e-tests/addon-docs.spec.ts (React sandboxes only): triggering updateArgs from Story B inside the <Stories> block must route the update to Story B, not the primary story. The <Stories> renders are static snapshots, so the test asserts on the storyId of the UPDATE_STORY_ARGS channel event — deterministic, and a direct check of which story the update targets.

Invited by @Sidnioulz in #28333.

Manual testing

Against a react-vite/default-ts sandbox (yarn storybook in the sandbox, then from code/):

STORYBOOK_URL=http://localhost:6006 STORYBOOK_TEMPLATE_NAME=react-vite/default-ts \
  yarn playwright test addon-docs --project=chromium -g "useArgs updates the correct story"

Or open the stories/renderers/react/use-args autodocs page: clicking the Story B button in the <Stories> block updates Story B's args, leaving the primary story untouched.

Closes #28333

Summary by CodeRabbit

• Documentation

  • Added an interactive Storybook example demonstrating argument-driven interactions: a button that tracks and displays which story-specific markers have been clicked, with autodocs enabled and visual snapshotting disabled.

• Tests

  • Added a regression test that verifies argument updates affect only the intended story instance within multi-story layouts (ensuring isolated state updates).

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a reusable React Storybook story that uses useArgs to set dynamic clicked${name} markers and a Playwright regression that verifies arg updates are scoped to the intended story inside a <Stories> block.

Changes

useArgs Regression Test

Layer / File(s)	Summary
Marker-driven useArgs story code/renderers/react/template/stories/use-args.stories.tsx	Creates a reusable story that tracks clicks via dynamic clicked${name} boolean args. A markerList helper enumerates and displays active markers. Two named exports (StoryA and StoryB) with distinct name args allow independent click tracking in multi-story layouts. Autodocs enabled, Chromatic snapshots disabled.
Playwright regression test code/e2e-sandbox/addon-docs.spec.ts	Adds a React-only e2e test that navigates to the use-args docs page, clicks Story B inside a <Stories> block, then clicks the primary story, and asserts the primary story shows only clickedA without cross-contamination from clickedB.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#35052: Updates Playwright and e2e-sandbox test discovery/execution infrastructure that may govern how the new regression spec is run in CI.

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/e2e-tests/addon-docs.spec.ts`:
- Around line 176-186: The test is racy because awaiting storiesB.click()
doesn't guarantee async updateArgs (channel.emit(UPDATE_STORY_ARGS) →
Preview.onUpdateArgs) has finished before primary.click(); after calling
storiesB.click() add a deterministic "settled" gate that waits for the args
propagation to complete (for example await a channel/ack event, await a stable
DOM change tied to the updated args, or await a Preview.onUpdateArgs completion
signal) before calling primary.click(); reference the existing update flow
(updateArgs, UPDATE_STORY_ARGS, Preview.onUpdateArgs) and ensure the new wait
causes the test to fail on the pre-fix commit.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ddb91f00-caf5-4c2f-b10d-d47327dd71c1

📥 Commits

Reviewing files that changed from the base of the PR and between c91f986 and 9d0defa.

📒 Files selected for processing (2)

• code/e2e-tests/addon-docs.spec.ts
• code/renderers/react/template/stories/use-args.stories.tsx

[Sidnioulz]

Thanks @TheSeydiCharyyev! I don't think I've seen E2E tests before where we attempt to monitor or mock SB internals. Our goal for E2E tests is specifically to avoid doing these things so we catch broader issues as seen by end users (e.g. maybe what's emitted on the channel won't be how ArgsTable updates in a future major version).

Could you please check if there's another way to do this? Thanks!

[Sidnioulz]

Force pushing to your branch to resolve merge conflicts!

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]

Generated by 🚫 dangerJS against 31fb001