Addon Vitest: Add component info to task meta #33394

yannbf · 2025-12-18T21:06:04Z

Closes #

What I did

This PR introduces two new properties in the Vitest task meta: componentPath and componentName.
They are quite useful for post-processing code e.g. to analyze a vitest test run and group test results, which could be coming from multiple story files but relating to the same component file:

Modal.stories.tsx -> imports from ./Modal
Modal.Topbar.stories.tsx -> imports from ./Modal
Modal.Backdrop.stories.tsx -> imports from ./Modal

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Breaking Changes
- Updated testStory API to accept a single object parameter instead of multiple arguments, including new optional fields for component path and component name.
Improvements
- Enhanced test metadata tracking by propagating component identity information for improved reporting and test analysis.
Tests
- Updated test invocations to use the new object-based API and added test coverage for component information extraction.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nx-cloud · 2025-12-18T21:06:34Z

View your CI Pipeline Execution ↗ for commit 98576ce

Command	Status	Duration	Result
`nx run-many -t compile,check,knip,test,pretty-d...`	✅ Succeeded	9m 24s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-18 21:16:59 UTC

coderabbitai · 2025-12-18T21:09:33Z

📝 Walkthrough

Walkthrough

The PR refactors the testStory function API to accept a single object parameter instead of multiple arguments, adding optional componentPath and componentName fields. The transformer is updated to extract these fields from parsed story data and pass them as object properties, propagating component identity metadata into task objects.

Changes

Cohort / File(s)	Summary
testStory API signature update `code/addons/vitest/src/vitest-plugin/test-utils.ts`	Function parameter changed from multi-arg to single object with `exportName`, `story`, `meta`, `skipTags`, `storyId`, and new optional `componentPath` and `componentName` fields; task metadata augmented to include these component identity fields.
Transformer implementation `code/core/src/csf-tools/vitest-plugin/transformer.ts`	Extracts `componentPath` and `componentName` from parsed story data; replaces positional arguments to test helper calls with object-based invocations; conditionally includes component info in generated test code.
Transformer test updates `code/core/src/csf-tools/vitest-plugin/transformer.test.ts`	Snapshots updated to reflect object-based `_testStory` invocations; new test group "component info extraction" added to verify correct extraction of `componentPath` and `componentName` for various import specifiers.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Specific areas requiring extra attention:
- Logic for extracting componentPathLiteral and componentNameLiteral from _rawComponentPath and _componentImportSpecifier in the transformer
- Verification that object property construction correctly handles optional fields across both individual test statements and describe-wrapped test blocks
- Snapshot accuracy in test file, particularly for edge cases with different import specifier types

Possibly related PRs

CSF: Add Storybook test syntax (Storybook v10) #32455 — Modifies vitest-plugin test-utils and transformer code to change testStory signature to object-style calls and propagate componentPath/componentName into task metadata
Core: Fix built-in tags filtering #32526 — Updates the same testStory helper function signature and task metadata augmentation in the vitest plugin

✨ Finishing touches

📝 Generate docstrings

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/core/src/csf-tools/vitest-plugin/transformer.ts (1)
155-166: Consider handling ImportNamespaceSpecifier for completeness.

The current implementation extracts componentName from ImportSpecifier (named imports) and ImportDefaultSpecifier (default imports), but doesn't handle ImportNamespaceSpecifier (namespace imports like import * as Button from './Button').

While namespace imports might be rare in story files, consider whether this case should be supported for consistency.
🔎 Proposed enhancement to handle namespace imports
 let componentNameLiteral = null;
 if (
   parsed._componentImportSpecifier &&
   (t.isImportSpecifier(parsed._componentImportSpecifier) ||
-    t.isImportDefaultSpecifier(parsed._componentImportSpecifier))
+    t.isImportDefaultSpecifier(parsed._componentImportSpecifier) ||
+    t.isImportNamespaceSpecifier(parsed._componentImportSpecifier))
 ) {
   componentNameLiteral = t.stringLiteral(parsed._componentImportSpecifier.local.name);
 }

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between badd420 and 98576ce.

📒 Files selected for processing (3)

code/addons/vitest/src/vitest-plugin/test-utils.ts (2 hunks)
code/core/src/csf-tools/vitest-plugin/transformer.test.ts (27 hunks)
code/core/src/csf-tools/vitest-plugin/transformer.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (8)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

code/core/src/csf-tools/vitest-plugin/transformer.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access the mocked functions in Vitest tests
Implement mock behaviors in beforeEach blocks in Vitest tests
Mock all required dependencies that the test subject uses
Each mock implementation should return a Promise for async functions in Vitest
Mock implementations should match the expected return type of the original function
Mock all required properties and methods that the test subject uses in Vitest tests
Avoid direct function mocking without vi.mocked() in Vitest tests
Avoid mock implementations outside of beforeEach blocks in Vitest tests
Avoid mocking without the spy: true option in Vitest tests
Avoid inline mock implementations within test cases in Vitest tests
Avoid mocking only a subset of required dependencies in Vitest tests
Mock at the highest level of abstraction needed in Vitest tests
Keep mock implementations simple and focused in Vitest tests
Use type-safe mocking with vi.mocked() in Vitest tests
Document complex mock behaviors in Vitest tests
Group related mocks together in Vitest tests

Files:

code/core/src/csf-tools/vitest-plugin/transformer.test.ts

code/**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested
Mock external dependencies using vi.mock() for file system, loggers, and other external dependencies in tests
Aim for high test coverage of business logic (75%+ for statements/lines) using coverage reports

Files:

code/core/src/csf-tools/vitest-plugin/transformer.test.ts

🧠 Learnings (15)

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required properties and methods that the test subject uses in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Implement mock behaviors in `beforeEach` blocks in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx} : Export functions that need to be tested from their modules

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock at the highest level of abstraction needed in Vitest tests

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-11-24T17:49:31.838Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to code/vitest.workspace.ts : Vitest configuration is centralized in `code/vitest.workspace.ts` for workspace setup

Applied to files:

code/addons/vitest/src/vitest-plugin/test-utils.ts

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase

Applied to files:

code/addons/vitest/src/vitest-plugin/test-utils.ts
code/core/src/csf-tools/vitest-plugin/transformer.test.ts

📚 Learning: 2025-09-24T09:39:39.233Z

Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

code/core/src/csf-tools/vitest-plugin/transformer.test.ts

⏰ 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). (4)

GitHub Check: normal
GitHub Check: nx
GitHub Check: Core Unit Tests, windows-latest
GitHub Check: get-branch

🔇 Additional comments (6)

code/core/src/csf-tools/vitest-plugin/transformer.ts (2)

242-262: LGTM! Clean object-based API transition.

The refactor from multiple positional arguments to a single object parameter improves maintainability and makes the API self-documenting. The conditional inclusion of componentPath and componentName is properly handled.

296-320: Consistent implementation across describe blocks.

The same object construction pattern is correctly applied in getDescribeStatementForStory, including the additional testName field for per-test metadata. This consistency is good for maintainability.

code/addons/vitest/src/vitest-plugin/test-utils.ts (2)

34-52: LGTM! Well-structured API refactor.

The migration to an object-based parameter makes the API more maintainable and easier to extend in the future. The optional fields componentPath, testName, and componentName are properly typed.

78-90: Proper metadata propagation.

The component identity fields are correctly extended in the task meta type and assigned to the task object, enabling downstream consumers to access component context information.
code/core/src/csf-tools/vitest-plugin/transformer.test.ts (2)
599-649: Good test coverage for component info extraction.

The new test suite covers the most common import patterns (named, default, and aliased imports). The tests verify that both componentPath and componentName are correctly extracted and included in the generated code.

If you decide to implement namespace import handling (as suggested in the transformer review), consider adding a corresponding test case:
it('should extract component name from namespace import specifier', async () => {
  const code = `
    import * as Button from './Button';
    export default {
      component: Button,
    }
    export const Primary = {};
  `;

  const result = await transform({ code });

  expect(result.code).toContain('componentPath: "./Button"');
  expect(result.code).toContain('componentName: "Button"');
});
76-82: Snapshot correctly reflects object-based API.

The updated snapshots consistently show the new object structure with named properties, making the test assertions clearer and the API more self-documenting.

storybook-app-bot · 2025-12-18T21:19:32Z

Package Benchmarks

^{Commit: 98576ce, ran on 18 December 2025 at 21:19:28 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	181 KB	🚨 +181 KB 🚨
Dependency size	0 B	2.97 MB	🚨 +2.97 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

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

`@storybook/addon-links`

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	14 KB	🚨 +14 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	331 KB	🚨 +331 KB 🚨
Dependency size	0 B	670 B	🚨 +670 B 🚨
Bundle Size Analyzer	Link	Link

`storybook-addon-pseudo-states`

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

`@storybook/addon-themes`

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

`@storybook/addon-vitest`

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

`@storybook/builder-vite`

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

`@storybook/builder-webpack5`

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

`storybook`

	Before	After	Difference
Dependency count	0	49	🚨 +49 🚨
Self size	0 B	20.53 MB	🚨 +20.53 MB 🚨
Dependency size	0 B	16.52 MB	🚨 +16.52 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

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

`@storybook/ember`

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

`@storybook/html-vite`

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

`@storybook/nextjs`

	Before	After	Difference
Dependency count	0	538	🚨 +538 🚨
Self size	0 B	646 KB	🚨 +646 KB 🚨
Dependency size	0 B	59.10 MB	🚨 +59.10 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	0	127	🚨 +127 🚨
Self size	0 B	1.12 MB	🚨 +1.12 MB 🚨
Dependency size	0 B	21.97 MB	🚨 +21.97 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

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

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

	Before	After	Difference
Dependency count	0	159	🚨 +159 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	23.15 MB	🚨 +23.15 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

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

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	0	278	🚨 +278 🚨
Self size	0 B	24 KB	🚨 +24 KB 🚨
Dependency size	0 B	44.04 MB	🚨 +44.04 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	0	204	🚨 +204 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	33.42 MB	🚨 +33.42 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	0	24	🚨 +24 🚨
Self size	0 B	55 KB	🚨 +55 KB 🚨
Dependency size	0 B	27.02 MB	🚨 +27.02 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

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

`@storybook/vue3-vite`

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

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	0	21	🚨 +21 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	2.39 MB	🚨 +2.39 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	0	183	🚨 +183 🚨
Self size	0 B	775 KB	🚨 +775 KB 🚨
Dependency size	0 B	67.56 MB	🚨 +67.56 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	0	176	🚨 +176 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	66.14 MB	🚨 +66.14 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/core-webpack`

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

`create-storybook`

	Before	After	Difference
Dependency count	0	50	🚨 +50 🚨
Self size	0 B	999 KB	🚨 +999 KB 🚨
Dependency size	0 B	37.04 MB	🚨 +37.04 MB 🚨
Bundle Size Analyzer	node	node

`@storybook/csf-plugin`

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

`eslint-plugin-storybook`

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

`@storybook/react-dom-shim`

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

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

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

`@storybook/preset-react-webpack`

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

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	0	10	🚨 +10 🚨
Self size	0 B	7 KB	🚨 +7 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	29 KB	🚨 +29 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	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	0	57	🚨 +57 🚨
Self size	0 B	717 KB	🚨 +717 KB 🚨
Dependency size	0 B	12.91 MB	🚨 +12.91 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	8 KB	🚨 +8 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	45 KB	🚨 +45 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	55 KB	🚨 +55 KB 🚨
Dependency size	0 B	211 KB	🚨 +211 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

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

Addon Vitest: Add component info to task meta

98576ce

yannbf self-assigned this Dec 18, 2025

yannbf added feature request ci:normal labels Dec 18, 2025

coderabbitai bot reviewed Dec 18, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Addon Vitest: Add component info to task meta #33394

Addon Vitest: Add component info to task meta #33394

Uh oh!

yannbf commented Dec 18, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Dec 18, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 18, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Uh oh!

storybook-app-bot bot commented Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Addon Vitest: Add component info to task meta #33394

Are you sure you want to change the base?

Addon Vitest: Add component info to task meta #33394

Uh oh!

Conversation

yannbf commented Dec 18, 2025 • edited 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

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot commented Dec 18, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

storybook-app-bot bot commented Dec 18, 2025

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-docs

@storybook/addon-links

@storybook/addon-onboarding

storybook-addon-pseudo-states

@storybook/addon-themes

@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

@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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

yannbf commented Dec 18, 2025 •

edited

Loading

nx-cloud bot commented Dec 18, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-docs`

`@storybook/addon-links`

`@storybook/addon-onboarding`

`storybook-addon-pseudo-states`

`@storybook/addon-themes`

`@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`

`@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`