CSF: Add Storybook test syntax by yannbf · Pull Request #31551 · storybookjs/storybook

yannbf · 2025-05-22T15:28:10Z

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make 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 pull request has been released as version 0.0.0-pr-31551-sha-cd66148d. Try it out in a new sandbox by running npx storybook@0.0.0-pr-31551-sha-cd66148d sandbox or in an existing project with npx storybook@0.0.0-pr-31551-sha-cd66148d upgrade.

More information


Published version	`0.0.0-pr-31551-sha-cd66148d`
Triggered by	@yannbf
Repository	storybookjs/storybook
Branch	`yann/test-fn-prototype`
Commit	`cd66148d`
Datetime	Wed Sep 3 08:53:39 UTC 2025 (`1756889619`)
Workflow run	17428274451

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=31551

nx-cloud · 2025-05-22T15:34:23Z

View your CI Pipeline Execution ↗ for commit 319ace2

Command	Status	Duration	Result
`nx run-many -t check -c production --parallel=7`	✅ Succeeded	58s	View ↗
`nx run-many -t build -c production --parallel=3`	✅ Succeeded	4m 40s	View ↗

☁️ Nx Cloud last updated this comment at 2025-09-03 15:47:46 UTC

storybook-app-bot · 2025-05-25T10:32:40Z

Package Benchmarks

^{Commit: 319ace2, ran on 3 September 2025 at 15:52:07 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	18	12	🎉 -6 🎉
Self size	2.01 MB	2.47 MB	🚨 +460 KB 🚨
Dependency size	9.40 MB	8.93 MB	🎉 -471 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-jest`

	Before	After	Difference
Dependency count	2	2	0
Self size	47 KB	38 KB	🎉 -9 KB 🎉
Dependency size	53 KB	53 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	1	1	0
Self size	15 KB	20 KB	🚨 +5 KB 🚨
Dependency size	5 KB	5 KB	🚨 +5 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-onboarding`

	Before	After	Difference
Dependency count	0	0	0
Self size	332 KB	228 KB	🎉 -105 KB 🎉
Dependency size	667 B	667 B	0 B
Bundle Size Analyzer	Link	Link

`storybook-addon-pseudo-states`

	Before	After	Difference
Dependency count	0	0	0
Self size	23 KB	47 KB	🚨 +24 KB 🚨
Dependency size	686 B	686 B	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-vitest`

	Before	After	Difference
Dependency count	6	6	0
Self size	495 KB	553 KB	🚨 +58 KB 🚨
Dependency size	1.49 MB	1.49 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	11	5	🎉 -6 🎉
Self size	374 KB	449 KB	🚨 +75 KB 🚨
Dependency size	1.30 MB	834 KB	🎉 -469 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	186	198	🚨 +12 🚨
Self size	68 KB	80 KB	🚨 +13 KB 🚨
Dependency size	31.37 MB	31.45 MB	🚨 +78 KB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	48	50	🚨 +2 🚨
Self size	30.74 MB	41.77 MB	🚨 +11.03 MB 🚨
Dependency size	17.61 MB	16.59 MB	🎉 -1.02 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	186	199	🚨 +13 🚨
Self size	134 KB	191 KB	🚨 +57 KB 🚨
Dependency size	29.60 MB	29.78 MB	🚨 +182 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	191	203	🚨 +12 🚨
Self size	17 KB	28 KB	🚨 +11 KB 🚨
Dependency size	28.09 MB	28.18 MB	🚨 +91 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	14	8	🎉 -6 🎉
Self size	23 KB	23 KB	🚨 +75 B 🚨
Dependency size	1.71 MB	1.33 MB	🎉 -386 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	529	538	🚨 +9 🚨
Self size	928 KB	903 KB	🎉 -25 KB 🎉
Dependency size	58.28 MB	59.35 MB	🚨 +1.07 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	131	130	🎉 -1 🎉
Self size	4.00 MB	3.08 MB	🎉 -927 KB 🎉
Dependency size	21.44 MB	22.30 MB	🚨 +859 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	14	8	🎉 -6 🎉
Self size	14 KB	13 KB	🎉 -1 KB 🎉
Dependency size	1.70 MB	1.31 MB	🎉 -389 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	164	163	🎉 -1 🎉
Self size	31 KB	32 KB	🚨 +574 B 🚨
Dependency size	22.83 MB	23.69 MB	🚨 +859 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	121	120	🎉 -1 🎉
Self size	36 KB	32 KB	🎉 -4 KB 🎉
Dependency size	19.39 MB	20.25 MB	🚨 +863 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	272	286	🚨 +14 🚨
Self size	25 KB	25 KB	🎉 -179 B 🎉
Dependency size	43.02 MB	43.77 MB	🚨 +749 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	198	210	🚨 +12 🚨
Self size	17 KB	17 KB	🎉 -180 B 🎉
Dependency size	32.62 MB	32.72 MB	🚨 +96 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	22	17	🎉 -5 🎉
Self size	59 KB	53 KB	🎉 -6 KB 🎉
Dependency size	26.95 MB	26.66 MB	🎉 -292 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	23	18	🎉 -5 🎉
Self size	49 KB	51 KB	🚨 +2 KB 🚨
Dependency size	27.01 MB	26.71 MB	🎉 -297 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	110	105	🎉 -5 🎉
Self size	38 KB	34 KB	🎉 -4 KB 🎉
Dependency size	43.82 MB	43.53 MB	🎉 -285 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	15	9	🎉 -6 🎉
Self size	20 KB	20 KB	🚨 +49 B 🚨
Dependency size	1.74 MB	1.36 MB	🎉 -381 KB 🎉
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	0	51	🚨 +51 🚨
Self size	0 B	1 KB	🚨 +1 KB 🚨
Dependency size	0 B	58.36 MB	🚨 +58.36 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	204	219	🚨 +15 🚨
Self size	879 KB	585 KB	🎉 -294 KB 🎉
Dependency size	81.70 MB	102.88 MB	🚨 +21.18 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	173	188	🚨 +15 🚨
Self size	35 KB	31 KB	🎉 -4 KB 🎉
Dependency size	76.77 MB	86.96 MB	🚨 +10.19 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-webpack`

	Before	After	Difference
Dependency count	1	1	0
Self size	12 KB	16 KB	🚨 +4 KB 🚨
Dependency size	28 KB	28 KB	0 B
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	49	1	🎉 -48 🎉
Self size	1.52 MB	12.52 MB	🚨 +11.00 MB 🚨
Dependency size	48.35 MB	98 KB	🎉 -48.25 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/csf-plugin`

	Before	After	Difference
Dependency count	9	3	🎉 -6 🎉
Self size	9 KB	11 KB	🚨 +2 KB 🚨
Dependency size	1.27 MB	796 KB	🎉 -471 KB 🎉
Bundle Size Analyzer	Link	Link

`eslint-plugin-storybook`

	Before	After	Difference
Dependency count	35	35	0
Self size	139 KB	321 KB	🚨 +182 KB 🚨
Dependency size	3.41 MB	3.41 MB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-dom-shim`

	Before	After	Difference
Dependency count	0	0	0
Self size	12 KB	10 KB	🎉 -2 KB 🎉
Dependency size	785 B	795 B	🚨 +10 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-create-react-app`

	Before	After	Difference
Dependency count	68	68	0
Self size	26 KB	18 KB	🎉 -8 KB 🎉
Dependency size	5.97 MB	5.97 MB	🚨 +1 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	170	177	🚨 +7 🚨
Self size	26 KB	24 KB	🎉 -2 KB 🎉
Dependency size	30.55 MB	30.61 MB	🚨 +62 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	10	10	0
Self size	8 KB	10 KB	🚨 +2 KB 🚨
Dependency size	1.20 MB	1.20 MB	🚨 +4 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html`

	Before	After	Difference
Dependency count	2	2	0
Self size	30 KB	38 KB	🚨 +8 KB 🚨
Dependency size	32 KB	32 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact`

	Before	After	Difference
Dependency count	2	2	0
Self size	17 KB	23 KB	🚨 +6 KB 🚨
Dependency size	32 KB	32 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	2	2	0
Self size	872 KB	1.66 MB	🚨 +789 KB 🚨
Dependency size	18 KB	16 KB	🎉 -2 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	3	3	0
Self size	9 KB	13 KB	🚨 +4 KB 🚨
Dependency size	716 KB	716 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte`

	Before	After	Difference
Dependency count	2	2	0
Self size	48 KB	64 KB	🚨 +16 KB 🚨
Dependency size	230 KB	230 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	3	3	0
Self size	61 KB	83 KB	🚨 +22 KB 🚨
Dependency size	211 KB	211 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

	Before	After	Difference
Dependency count	3	3	0
Self size	43 KB	57 KB	🚨 +13 KB 🚨
Dependency size	47 KB	47 KB	🚨 +55 B 🚨
Bundle Size Analyzer	Link	Link

storybook-bot · 2025-07-25T10:49:11Z

Failed to publish canary version of this pull request, triggered by @yannbf. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/16520141752

storybook-bot · 2025-07-25T11:18:49Z

Failed to publish canary version of this pull request, triggered by @yannbf. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/16520565169

storybook-bot · 2025-08-04T12:33:58Z

Failed to publish canary version of this pull request, triggered by @yannbf. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/16723091606

- Updated HighlightStyles to include 'test' nodetype for styling. - Added 'subtype' property to mock dataset entries for better differentiation between story and test types. - Modified Tree and TreeNode components to handle test entries correctly. - Adjusted API types to separate story and test entries for clearer structure. - Improved event handling in useExpanded and useHighlighted hooks to include tests.

…nent - Introduced 'play-fn' and 'test-fn' tags with default selection in common-preset. - Enhanced Sidebar component to utilize tag presets for managing selected tags. - Updated TagsFilter to initialize selected tags based on tag presets. - Modified TagsFilter stories to reflect new tag preset functionality.

Core: Add default selection for tags in main config

storybook-bot · 2025-09-02T16:04:52Z

Failed to publish canary version of this pull request, triggered by @yannbf. See the failed workflow run at: https://github.com/storybookjs/storybook/actions/runs/17409216087

…ultSelection for tags

…retrieving story tests

…act, and track the parent story name for a test. - Updated 'story' property to always be the story name rather than the test name - Added 'storyId' property to point to the parent story from a test

CSF: Refactor CsfFile to support tests and tags

Core: Update `StoryStore.extract` to handle tests

yannbf · 2025-09-04T06:31:54Z

Closing this in favor of #32391

wip prototype for test fn plugin

81e9c77

yannbf force-pushed the yann/test-fn-prototype branch from 30ea99d to 81e9c77 Compare May 22, 2025 17:50

continue prototype

1803fb0

yannbf added the ci:normal Run our default set of CI jobs (choose this for most PRs). label May 25, 2025

fixes

78abf69

yannbf changed the title ~~wip prototype~~ WIP: Prototype May 25, 2025

yannbf added the core label May 25, 2025

yannbf added 2 commits May 25, 2025 14:21

do not apply loader/plugin to svelte files

c2ecdb5

no-op on non csf-factories

af298b5

yannbf added the feature request label May 25, 2025

yannbf mentioned this pull request May 26, 2025

Test: Implement prototype for test function #30457

Closed

8 tasks

yannbf changed the title ~~WIP: Prototype~~ WIP: Test fn prototype Jul 21, 2025

Merge branch 'next' into yann/test-fn-prototype

5dc7ef7

Handle type 'test' in Storybook UI

1086746

yannbf force-pushed the yann/test-fn-prototype branch from b9a4ccd to 1086746 Compare July 25, 2025 11:10

yannbf added 3 commits July 25, 2025 13:20

workaround

f455ffa

Merge branch 'next' into yann/test-fn-prototype

ff40d89

add vitest integration support

bc01f93

Make vitest integration work

5f9bb80

yannbf mentioned this pull request Aug 12, 2025

[Tracking]: .test syntax preview in Storybook #32244

Closed

50 tasks

yannbf added 5 commits August 19, 2025 11:14

more experiments

3c00cc8

cleanup

cde0b32

cleanup

6cc74e2

prepare for index type test

9d544a6

update tests

bef2d9e

yannbf mentioned this pull request Sep 2, 2025

Support story tests in Storybook indexer #32261

Closed

ghengeveld and others added 10 commits September 2, 2025 15:34

add jsdocs

b6fbeda

Remove console.log

a632036

Enhance Button story rendering and improve sidebar node expansion logic

0b3d490

Update VitestManager to use correct RegExp

9f16a26

update to use defaultSelection instead

5705bb5

small rename

24253d8

cleanup

8d18419

Merge pull request #32373 from storybookjs/yann/add-tags-preset-to-main

15e965e

Core: Add default selection for tags in main config

yannbf added the ci:merged Run the CI jobs that normally run when merged. label Sep 2, 2025

yannbf and others added 14 commits September 2, 2025 19:32

fix build

4831e99

Implement indeterminate state for unrepresentable combination of defa…

3e8c306

…ultSelection for tags

disable save from controls in story tests

1a4ee93

fix build

cd66148

Add story for non-initial state

bab3780

Fix filtering out stories which have tests

f570532

Fix default invert toggle setting

7a03431

Refactor CsfFile to support test tags and update related methods for …

07e99ae

…retrieving story tests

Make it possible to distinguish tests from stories in StoryStore.extr…

b6c6e94

…act, and track the parent story name for a test. - Updated 'story' property to always be the story name rather than the test name - Added 'storyId' property to point to the parent story from a test

small refactor

639042c

Merge pull request #32385 from storybookjs/yann/fix-test-tags-extraction

3fa6097

CSF: Refactor CsfFile to support tests and tags

fix tests

9b7fa17

Merge branch 'yann/test-fn-prototype' into update-storystore-extract

d61fba2

Merge pull request #32388 from storybookjs/update-storystore-extract

319ace2

Core: Update `StoryStore.extract` to handle tests

yannbf closed this Sep 4, 2025

kasperpeulen deleted the yann/test-fn-prototype branch April 4, 2026 19:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSF: Add Storybook test syntax#31551

CSF: Add Storybook test syntax#31551
yannbf wants to merge 99 commits into
nextfrom
yann/test-fn-prototype

yannbf commented May 22, 2025 •

edited by storybook-bot

Loading

Uh oh!

nx-cloud Bot commented May 22, 2025 •

edited

Loading

Uh oh!

storybook-app-bot Bot commented May 25, 2025 •

edited

Loading

Uh oh!

storybook-bot commented Jul 25, 2025

Uh oh!

storybook-bot commented Jul 25, 2025

Uh oh!

storybook-bot commented Aug 4, 2025

Uh oh!

storybook-bot commented Sep 2, 2025

Uh oh!

yannbf commented Sep 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

yannbf commented May 22, 2025 • edited by storybook-bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

nx-cloud Bot commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

storybook-app-bot Bot commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/addon-docs

@storybook/addon-jest

@storybook/addon-links

@storybook/addon-onboarding

storybook-addon-pseudo-states

@storybook/addon-vitest

@storybook/builder-vite

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/ember

@storybook/html-vite

@storybook/nextjs

@storybook/nextjs-vite

@storybook/preact-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/vue3-vite

@storybook/web-components-vite

sb

@storybook/cli

@storybook/codemod

@storybook/core-webpack

create-storybook

@storybook/csf-plugin

eslint-plugin-storybook

@storybook/react-dom-shim

@storybook/preset-create-react-app

@storybook/preset-react-webpack

@storybook/preset-server-webpack

@storybook/html

@storybook/preact

@storybook/react

@storybook/server

@storybook/svelte

@storybook/vue3

@storybook/web-components

Uh oh!

storybook-bot commented Jul 25, 2025

Uh oh!

storybook-bot commented Jul 25, 2025

Uh oh!

storybook-bot commented Aug 4, 2025

Uh oh!

storybook-bot commented Sep 2, 2025

Uh oh!

yannbf commented Sep 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yannbf commented May 22, 2025 •

edited by storybook-bot

Loading

nx-cloud Bot commented May 22, 2025 •

edited

Loading

storybook-app-bot Bot commented May 25, 2025 •

edited

Loading

`@storybook/addon-docs`

`@storybook/addon-jest`

`@storybook/addon-links`

`@storybook/addon-onboarding`

`storybook-addon-pseudo-states`

`@storybook/addon-vitest`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/ember`

`@storybook/html-vite`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/preact-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/web-components-vite`

`sb`

`@storybook/cli`

`@storybook/codemod`

`@storybook/core-webpack`

`create-storybook`

`@storybook/csf-plugin`

`eslint-plugin-storybook`

`@storybook/react-dom-shim`

`@storybook/preset-create-react-app`

`@storybook/preset-react-webpack`

`@storybook/preset-server-webpack`

`@storybook/html`

`@storybook/preact`

`@storybook/react`

`@storybook/server`

`@storybook/svelte`

`@storybook/vue3`

`@storybook/web-components`