Test: Refactor .test prototype #32314

kasperpeulen · 2025-08-21T11:04:42Z

Closes #

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 PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team 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>

Greptile Summary

This PR introduces a major new testing feature for Storybook that allows test functions to be co-located with stories using a new CSF4 (Component Story Format 4) API. The refactor adds comprehensive support for story-level testing through several key components:

Core Infrastructure Changes:

Adds TestFunction type definitions across the CSF type system (code/core/src/csf/story.ts, code/core/src/types/modules/csf.ts)
Introduces new CSF factory methods enabling meta.story() and story.test() APIs for defining stories and their associated tests
Implements test execution phases in the story rendering pipeline, adding 'testing' and 'tested' phases alongside existing play function phases
Extends story processing to handle test functions through the entire pipeline from CSF parsing to story execution

Testing API Implementation:

Stories can now define multiple tests using story.test(name, testFunction) with optional story annotation overrides
Tests are executed with full story context including canvas, userEvent, and args
New toTestId() function generates hierarchical test IDs using colon separator (e.g., story-id:test-name)
Portable stories gain a run() method that can execute specific tests by name

Vitest Integration:

Enhances the Vitest transformer to generate describe blocks for stories with tests, creating individual test cases for each story test annotation
Updates test utilities to support both traditional composed stories and the new Story API with test functions
Enables execution of individual test functions within story contexts

UI Enhancements:

Adds visual differentiation for test stories in the sidebar with green-colored beaker icons
Stories tagged with 'test-fn' display with distinct styling and adjusted padding
Includes new TreeNode story types and IconSymbols for test representation

CSF Processing:

Updates CSF file parsing to extract and index test functions attached to stories
Modifies story indexing to create separate entries for tests while maintaining parent-child relationships
Extends preview configuration to support CSF4 factory patterns with __definePreview

The feature enables developers to write tests directly alongside their stories using familiar testing patterns while leveraging Storybook's component context and utilities. Tests inherit story configuration but can override args, parameters, and globals as needed.

Confidence score: 2/5

This PR contains significant development artifacts and debugging code that should not be merged in production
Several files include console.log statements, TODO comments about unresolved type errors, and temporary hack implementations that need refinement
The vitest workspace configuration disables all existing tests, suggesting this is experimental prototype work rather than production-ready code

…into kasper/refactor-test-prototype

greptile-apps

_{38 files reviewed, 5 comments}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-08-21T11:05:18Z

code/core/src/types/modules/story.ts

-  stories: Record<StoryId, NormalizedStoryAnnotations<TRenderer>>;
+  stories: Record<
+    StoryId,
+    NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer> }


logic: Type parameter inconsistency: NormalizedStoryAnnotations uses TestFunction<TRenderer, TRenderer['args']> but CSFFile uses TestFunction<TRenderer> without the args parameter

Suggested change

NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer> }

NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer, TRenderer['args']> }

greptile-apps · 2025-08-21T11:05:39Z

code/core/src/types/modules/composedStory.ts

  run: (
    context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
-    testName?: string
+    test?: (context: StoryContext<TRenderer>) => void | Promise<void>


style: The test parameter uses the full StoryContext<TRenderer> type while the context parameter uses Partial<TArgs> - verify this type inconsistency is intentional

greptile-apps · 2025-08-21T11:05:41Z

code/core/src/preview-api/modules/store/csf/normalizeStory.ts

 export function normalizeStory<TRenderer extends Renderer>(
  key: StoryId,
-  storyAnnotations: StoryAnnotationsOrFn<TRenderer>,
+  storyAnnotations: StoryAnnotationsOrFn<TRenderer> & { testFunction?: any },


style: Using any type for testFunction reduces type safety. Consider defining a proper TestFunction type from the CSF types.

greptile-apps · 2025-08-21T11:05:43Z

code/core/src/csf/csf-factories.test.ts

@@ -1,3 +1,4 @@
+//* @vitest-environment happy-dom */


syntax: Comment syntax is incorrect - should use // instead of //*

Suggested change

//* @vitest-environment happy-dom */

// @vitest-environment happy-dom */

greptile-apps · 2025-08-21T11:05:50Z

code/core/src/csf/csf-factories.ts

-      // @ts-ignore TODO: Kasper to figure out later
-      this.input.__tests![name] = testStory;
+      const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
+      const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;


logic: Using non-null assertion testFn! assumes testFn is always provided when overridesOrTestFn is not a function, but TypeScript overloads don't guarantee this at runtime

Suggested change

const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;

const testFunction = typeof overridesOrTestFn !== 'function' ? testFn : overridesOrTestFn;

nx-cloud · 2025-08-21T11:11:11Z

View your CI Pipeline Execution ↗ for commit 8e74582

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 19s	View ↗

☁️ Nx Cloud last updated this comment at 2025-08-21 12:06:22 UTC

storybook-app-bot · 2025-08-21T11:19:03Z

Package Benchmarks

^{Commit: 8e74582, ran on 21 August 2025 at 12:07:59 UTC}

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

`@storybook/angular`

	Before	After	Difference
Dependency count	198	199	🚨 +1 🚨
Self size	191 KB	191 KB	0 B
Dependency size	29.59 MB	29.73 MB	🚨 +146 KB 🚨
Bundle Size Analyzer	Link	Link

kasperpeulen and others added 7 commits August 20, 2025 18:56

Refactor test prototype

9719ea6

Improve a bit

82b84e4

fix unit tests

eca1ace

fix chromatic failures

ee34e40

Fix override in portable stories

6ab99d4

Merge remote-tracking branch 'origin/kasper/refactor-test-prototype' …

024cde6

…into kasper/refactor-test-prototype

add fixes for portable stories and prepareStory

7def7d9

kasperpeulen added ci:normal feature request labels Aug 21, 2025

kasperpeulen changed the base branch from next to yann/test-fn-prototype August 21, 2025 11:05

greptile-apps bot reviewed Aug 21, 2025

View reviewed changes

kasperpeulen added 2 commits August 21, 2025 13:24

Improved doTest type

3ab5db3

Improve test execution in StoryRender

8e74582

kasperpeulen changed the title ~~Refactor-test-prototype~~ Test: Refactor .test prototype Aug 21, 2025

yannbf approved these changes Aug 21, 2025

View reviewed changes

yannbf merged commit df6dce7 into yann/test-fn-prototype Aug 21, 2025
21 of 24 checks passed

yannbf deleted the kasper/refactor-test-prototype branch August 21, 2025 12:31

dosubot bot mentioned this pull request Sep 3, 2025

[Bug]: Storybook events are incorrect on HMR and cause inconsistencies #32389

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Test: Refactor .test prototype #32314

Test: Refactor .test prototype #32314

Uh oh!

kasperpeulen commented Aug 21, 2025 •

edited by greptile-apps bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Aug 21, 2025

Uh oh!

greptile-apps bot Aug 21, 2025

Uh oh!

greptile-apps bot Aug 21, 2025

Uh oh!

greptile-apps bot Aug 21, 2025

Uh oh!

greptile-apps bot Aug 21, 2025

Uh oh!

nx-cloud bot commented Aug 21, 2025 •

edited

Loading

Uh oh!

storybook-app-bot bot commented Aug 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer> }
	NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer, TRenderer['args']> }

	//* @vitest-environment happy-dom */
	// @vitest-environment happy-dom */

	const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;
	const testFunction = typeof overridesOrTestFn !== 'function' ? testFn : overridesOrTestFn;

Uh oh!

Test: Refactor .test prototype #32314

Test: Refactor .test prototype #32314

Uh oh!

Conversation

kasperpeulen commented Aug 21, 2025 • edited by greptile-apps 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

Greptile Summary

Confidence score: 2/5

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

nx-cloud bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Package Benchmarks

@storybook/angular

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kasperpeulen commented Aug 21, 2025 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Aug 21, 2025 •

edited

Loading

storybook-app-bot bot commented Aug 21, 2025 •

edited

Loading

`@storybook/angular`