Docs: Add experimental test syntax to main config features page #32664
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
📝 WalkthroughWalkthroughAdds documentation describing a new experimental CSF "test" syntax and how to enable it via Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant StoryAPI as Story (CSF)
participant TestHook as Test block
participant Runner as Test runner
Dev->>StoryAPI: define story
Dev->>StoryAPI: call .test(fn) %% configure test on story
StoryAPI->>TestHook: store test function
Runner->>StoryAPI: request tests for story
StoryAPI->>TestHook: invoke test function
TestHook->>Runner: return test results
note over Dev,Runner #DFF2E6: Requires features.experimentalTestSyntax = true
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit bef844b
☁️ Nx Cloud last updated this comment at |
- Remove irrelevant CSF 3 versions of snippet - Add `<Story>.test` section to CSF Next reference - Link to that section in `main-config-features` API reference
kylegach
approved these changes
Oct 7, 2025
Contributor
kylegach
left a comment
There was a problem hiding this comment.
Thanks for handling this!
I pushed some updates, and now it's good to go.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/_snippets/main-config-features-experimental-test-syntax.md(1 hunks)docs/api/csf/csf-next.mdx(1 hunks)docs/api/main-config/main-config-features.mdx(4 hunks)
⏰ 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). (1)
- GitHub Check: Core Unit Tests, windows-latest
Comment on lines
+237
to
+245
| // 👇 .test method: Attach tests to a story | ||
| // The test function can run the same code as the play function | ||
| PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => { | ||
| const button = await canvas.findByRole('button'); | ||
| await userEvent(button).click(); | ||
|
|
||
| await expect(button).toBeDisabled(); | ||
| await expect(args.onClick).not.toHaveBeenCalled(); | ||
| }); |
Contributor
There was a problem hiding this comment.
Fix userEvent usage in <Story>.test example
Inside test/play functions Storybook passes userEvent as the preconfigured Testing Library instance, so you call its methods directly (await userEvent.click(button);). Calling it as a function (userEvent(button).click()) will throw because userEvent isn’t callable. Please update the snippet accordingly.
-PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => {
+PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => {
const button = await canvas.findByRole('button');
- await userEvent(button).click();
+ await userEvent.click(button);
await expect(button).toBeDisabled();
await expect(args.onClick).not.toHaveBeenCalled();
});📝 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.
Suggested change
| // 👇 .test method: Attach tests to a story | |
| // The test function can run the same code as the play function | |
| PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => { | |
| const button = await canvas.findByRole('button'); | |
| await userEvent(button).click(); | |
| await expect(button).toBeDisabled(); | |
| await expect(args.onClick).not.toHaveBeenCalled(); | |
| }); | |
| // 👇 .test method: Attach tests to a story | |
| // The test function can run the same code as the play function | |
| PrimaryDisabled.test('should be disabled', async ({ canvas, userEvent, args }) => { | |
| const button = await canvas.findByRole('button'); | |
| await userEvent.click(button); | |
| await expect(button).toBeDisabled(); | |
| await expect(args.onClick).not.toHaveBeenCalled(); | |
| }); |
🤖 Prompt for AI Agents
In docs/api/csf/csf-next.mdx around lines 237 to 245, the example uses userEvent
as a callable (userEvent(button).click()) which is incorrect because Storybook
passes a preconfigured Testing Library userEvent instance; change the call to
use its method directly (await userEvent.click(button)) so the test invokes
userEvent.click with the target element.
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #32636
What I did
With this pull request, the features API page was updated to include the missing
experimentalTestSyntaxfeature flag.What was done:
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Summary by CodeRabbit