CSF tests each and matrix

[mrginglymus]

What I did

Reasonably stable draft of an idea for a .each and .matrix function on csf4 factories to allow for efficient parametrization of tests.

Motivation is largely around chromatic usage - getting combinatorial coverage is currently a lot of C&P, even with things like extend and reusable play functions.

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-32396-sha-2c87b09b. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-32396-sha-2c87b09b
Triggered by	@yannbf
Repository	mrginglymus/storybook
Branch	test-each
Commit	2c87b09b
Datetime	Wed Sep 17 14:10:34 UTC 2025 (1758118234)
Workflow run	17800429461

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=32396

Greptile Summary

Updated On: 2025-09-05 16:45:49 UTC

This PR introduces parameterized testing capabilities to Storybook's CSF4 format through two new methods: .each() and .matrix(). The implementation allows developers to efficiently run the same test logic across multiple parameter combinations, similar to Jest's test.each() functionality.

Key Changes:

• New Story Interface Methods: Added .each() and .matrix() methods to the Story interface in CSF4 factories, enabling parameterized test generation
• Type System Extensions: Introduced EachTestFunction and EachAnnotationsFunction types to support test functions that receive additional parameters and dynamic story annotations
• CSF Parser Enhancements: Extended the CSF file parser to recognize and process the new syntax patterns, generating multiple test entries for each parameter combination
• Test Name Formatting: Integrated fast-printf library for printf-style string formatting in test names (e.g., 'Test with %s' becomes 'Test with foo', 'Test with bar')
• Matrix Combinations: The .matrix() method creates cartesian products from multiple parameter arrays, while .each() handles simple parameter iteration

The feature integrates seamlessly with the existing CSF4 factory system by delegating to the established test() method, maintaining consistency with current testing patterns. Both methods support optional annotations that can be static objects or functions that generate dynamic configurations based on parameters. The implementation includes comprehensive test coverage validating parameter passing, test generation, naming conventions, and both static and dynamic override scenarios.

Confidence score: 3/5

• This PR introduces significant new functionality but has some type safety concerns and complexity that could lead to runtime issues
• Score reflects the experimental nature of the feature with potential type system edge cases and complex generic constraints that may not be fully validated
• Pay close attention to the CSF parser implementation in CsfFile.ts and the generic type definitions in csf-factories.ts

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2c87b09

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	44s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-17 10:41:31 UTC

[storybook-bot]

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/17455118239

[yannbf]

😱 @mrginglymus would you mind recreating this PR, cherry picking your commits to this newer base branch, which is stable and has all tests passing?
#32391

[storybook-app-bot]

Package Benchmarks

^{Commit: 2c87b09, ran on 17 September 2025 at 10:28:37 UTC}

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

@storybook/addon-a11y

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	508 KB	🚨 +508 KB 🚨
Dependency size	0 B	2.80 MB	🚨 +2.80 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-docs

	Before	After	Difference
Dependency count	0	18	🚨 +18 🚨
Self size	0 B	2.01 MB	🚨 +2.01 MB 🚨
Dependency size	0 B	9.43 MB	🚨 +9.43 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-jest

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	47 KB	🚨 +47 KB 🚨
Dependency size	0 B	53 KB	🚨 +53 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-links

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

@storybook/addon-onboarding

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	332 KB	🚨 +332 KB 🚨
Dependency size	0 B	667 B	🚨 +667 B 🚨
Bundle Size Analyzer	Link	Link

storybook-addon-pseudo-states

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

@storybook/addon-themes

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

@storybook/addon-vitest

	Before	After	Difference
Dependency count	0	6	🚨 +6 🚨
Self size	0 B	496 KB	🚨 +496 KB 🚨
Dependency size	0 B	1.53 MB	🚨 +1.53 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/builder-vite

	Before	After	Difference
Dependency count	0	11	🚨 +11 🚨
Self size	0 B	374 KB	🚨 +374 KB 🚨
Dependency size	0 B	1.30 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	0	187	🚨 +187 🚨
Self size	0 B	68 KB	🚨 +68 KB 🚨
Dependency size	0 B	31.68 MB	🚨 +31.68 MB 🚨
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	0	48	🚨 +48 🚨
Self size	0 B	30.47 MB	🚨 +30.47 MB 🚨
Dependency size	0 B	17.65 MB	🚨 +17.65 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/angular

	Before	After	Difference
Dependency count	0	187	🚨 +187 🚨
Self size	0 B	134 KB	🚨 +134 KB 🚨
Dependency size	0 B	29.90 MB	🚨 +29.90 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	0	192	🚨 +192 🚨
Self size	0 B	17 KB	🚨 +17 KB 🚨
Dependency size	0 B	28.40 MB	🚨 +28.40 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/html-vite

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	23 KB	🚨 +23 KB 🚨
Dependency size	0 B	1.71 MB	🚨 +1.71 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	0	529	🚨 +529 🚨
Self size	0 B	928 KB	🚨 +928 KB 🚨
Dependency size	0 B	58.63 MB	🚨 +58.63 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	0	130	🚨 +130 🚨
Self size	0 B	4.00 MB	🚨 +4.00 MB 🚨
Dependency size	0 B	21.66 MB	🚨 +21.66 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preact-vite

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	1.70 MB	🚨 +1.70 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	0	163	🚨 +163 🚨
Self size	0 B	31 KB	🚨 +31 KB 🚨
Dependency size	0 B	23.05 MB	🚨 +23.05 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	0	120	🚨 +120 🚨
Self size	0 B	36 KB	🚨 +36 KB 🚨
Dependency size	0 B	19.60 MB	🚨 +19.60 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	0	272	🚨 +272 🚨
Self size	0 B	25 KB	🚨 +25 KB 🚨
Dependency size	0 B	43.32 MB	🚨 +43.32 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	0	199	🚨 +199 🚨
Self size	0 B	17 KB	🚨 +17 KB 🚨
Dependency size	0 B	32.94 MB	🚨 +32.94 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/svelte-vite

	Before	After	Difference
Dependency count	0	22	🚨 +22 🚨
Self size	0 B	59 KB	🚨 +59 KB 🚨
Dependency size	0 B	26.95 MB	🚨 +26.95 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/sveltekit

	Before	After	Difference
Dependency count	0	23	🚨 +23 🚨
Self size	0 B	49 KB	🚨 +49 KB 🚨
Dependency size	0 B	27.01 MB	🚨 +27.01 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	0	110	🚨 +110 🚨
Self size	0 B	38 KB	🚨 +38 KB 🚨
Dependency size	0 B	43.82 MB	🚨 +43.82 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/web-components-vite

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

@storybook/cli

	Before	After	Difference
Dependency count	0	205	🚨 +205 🚨
Self size	0 B	888 KB	🚨 +888 KB 🚨
Dependency size	0 B	81.77 MB	🚨 +81.77 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	0	174	🚨 +174 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	76.84 MB	🚨 +76.84 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/core-webpack

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

create-storybook

	Before	After	Difference
Dependency count	0	49	🚨 +49 🚨
Self size	0 B	1.52 MB	🚨 +1.52 MB 🚨
Dependency size	0 B	48.12 MB	🚨 +48.12 MB 🚨
Bundle Size Analyzer	node	node

@storybook/csf-plugin

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	9 KB	🚨 +9 KB 🚨
Dependency size	0 B	1.27 MB	🚨 +1.27 MB 🚨
Bundle Size Analyzer	Link	Link

eslint-plugin-storybook

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

@storybook/react-dom-shim

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	12 KB	🚨 +12 KB 🚨
Dependency size	0 B	785 B	🚨 +785 B 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-create-react-app

	Before	After	Difference
Dependency count	0	68	🚨 +68 🚨
Self size	0 B	26 KB	🚨 +26 KB 🚨
Dependency size	0 B	5.97 MB	🚨 +5.97 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	0	170	🚨 +170 🚨
Self size	0 B	26 KB	🚨 +26 KB 🚨
Dependency size	0 B	30.84 MB	🚨 +30.84 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-server-webpack

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

@storybook/html

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

@storybook/preact

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

@storybook/react

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	872 KB	🚨 +872 KB 🚨
Dependency size	0 B	18 KB	🚨 +18 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server

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

@storybook/svelte

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

@storybook/vue3

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	61 KB	🚨 +61 KB 🚨
Dependency size	0 B	212 KB	🚨 +212 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/web-components

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

[greptile-apps]

_{9 files reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[yannbf]

New canary getting prepared: 0.0.0-pr-32396-sha-2c87b09b