Addon-Vitest: Use Vitest's provide-API for injecting values#34518
Merged
Conversation
… configuration into the browser environment. allow any run config overrides. store all reports on currentRun, not just a11yReports
Co-authored-by: Copilot <copilot@github.com>
JReinhold
added
maintenance
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
JReinhold
changed the title
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (18)
✅ Files skipped from review due to trivial changes (13)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughReplaces browser getInitialGlobals with Vitest provide/inject for run config and feature flags, broadens run/event config typing to Record<string, unknown>, adds runtime Changes
Sequence DiagramsequenceDiagram
participant Store as Store / TestManager
participant VitestMgr as Vitest Manager
participant Vitest as Vitest runtime
participant Plugin as Vitest Plugin
participant TestUtils as Test Utils / composeStory
Store->>VitestMgr: set currentRun.config
VitestMgr->>Vitest: provide(STORYBOOK_TEST_PROVIDE_KEY, RunConfig)
VitestMgr->>Vitest: provide(STORYBOOK_CORE_GHOST_STORIES_PROVIDE_KEY, boolean)
Plugin->>Vitest: configure provides at build/init
TestUtils->>Vitest: inject(STORYBOOK_TEST_PROVIDE_KEY)
Vitest-->>TestUtils: RunConfig
TestUtils->>TestUtils: build initialGlobals (runConfig, ghostStories, renderAnalysis)
TestUtils->>composeStory: call composeStory(initialGlobals)
Vitest->>VitestMgr: run test specifications (uses provided RunConfig)
Vitest->>VitestMgr: onTestCaseResult (report)
VitestMgr->>Store: merge reports into currentRun.reports
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
✨ Finishing Touches📝 Generate docstrings
Review rate limit: 4/5 reviews remaining, refill in 12 minutes. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/addons/vitest/src/vitest-provided-context.d.ts`:
- Around line 1-13: The interface augmentation for ProvidedContext uses computed
property names with the exported constants STORYBOOK_TEST_PROVIDE_KEY and
STORYBOOK_CORE_GHOST_STORIES_PROVIDE_KEY (in vitest-provided-context.d.ts),
which is invalid TypeScript; replace those computed keys with the actual string
literal keys (e.g. the literal values those constants represent such as
'storybook/test-provided' and the ghost-stories key) or change the shape to an
index signature (e.g. add a specific string-keyed property or a Record<string,
unknown> entry) inside the declare module 'vitest' block so ProvidedContext does
not use variable-based computed property names. Ensure you reference the
ProvidedContext interface and the two constant names when making the change so
the augmentation matches the runtime keys.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2335ebf3-fd25-49ef-8818-ec34bf9eb483
📒 Files selected for processing (8)
code/addons/vitest/src/constants.tscode/addons/vitest/src/node/test-manager.test.tscode/addons/vitest/src/node/test-manager.tscode/addons/vitest/src/node/vitest-manager.tscode/addons/vitest/src/types.tscode/addons/vitest/src/vitest-plugin/index.tscode/addons/vitest/src/vitest-plugin/test-utils.tscode/addons/vitest/src/vitest-provided-context.d.ts
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates @storybook/addon-vitest to inject Storybook run configuration into Vitest via Vitest’s provide/inject API instead of relying on process.env, and expands run reporting to support arbitrary report types (while keeping legacy a11y reports).
Changes:
- Replace env-based config passing with Vitest
provide(manager) +inject(test runtime) to buildinitialGlobals. - Add generic
reportspersistence tocurrentRunwhile retaininga11yReportsfor backwards compatibility. - Introduce provide keys in constants and wire ghost-stories enablement through Vitest config
provide.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| code/addons/vitest/src/vitest-provided-context.d.ts | Adds Vitest ProvidedContext augmentation for Storybook-provided keys. |
| code/addons/vitest/src/vitest-plugin/test-utils.ts | Switches globals initialization to read injected values via inject() and sets initialGlobals accordingly. |
| code/addons/vitest/src/vitest-plugin/index.ts | Removes browser command-based globals and uses Vitest config provide for ghost-stories. |
| code/addons/vitest/src/types.ts | Introduces RunConfig, adds reports, and updates run-state typing. |
| code/addons/vitest/src/node/vitest-manager.ts | Calls vitest.provide() with the current run config before running tests. |
| code/addons/vitest/src/node/test-manager.ts | Stops writing run config into process.env, and persists generic reports alongside a11y reports. |
| code/addons/vitest/src/node/test-manager.test.ts | Adds assertions for vitest.provide() and for persisting generic reports. |
| code/addons/vitest/src/constants.ts | Adds provide keys and extends initial state with reports; broadens trigger payload config typing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
code/addons/vitest/src/node/test-manager.test.ts (1)
243-243: Consolidate inlineglobTestSpecificationsmock implementations tobeforeEachblock.This mock behavior is set inline within test bodies at lines 224, 243, 266, 354, 369, 384, 401, 415, and 439. Since all occurrences use the identical implementation
mockImplementation(() => tests), move this to the existingbeforeEachblock and access viavi.mocked()for type-safe consistency with repo Vitest conventions as defined in the coding guidelines.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/addons/vitest/src/node/test-manager.test.ts` at line 243, Move the repeated inline mocks of vitest.globTestSpecifications into the existing beforeEach: replace all occurrences of vitest.globTestSpecifications.mockImplementation(() => tests) inside individual tests with a single setup in beforeEach that uses vi.mocked(vitest.globTestSpecifications).mockImplementation(() => tests) (or vi.mocked(vitest).globTestSpecifications.mockImplementation(() => tests) depending on how vitest is mocked in this file) to provide type-safe mocking per repo Vitest conventions, and remove the redundant inline mock lines in tests that reference vitest.globTestSpecifications.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@code/addons/vitest/src/node/test-manager.test.ts`:
- Line 243: Move the repeated inline mocks of vitest.globTestSpecifications into
the existing beforeEach: replace all occurrences of
vitest.globTestSpecifications.mockImplementation(() => tests) inside individual
tests with a single setup in beforeEach that uses
vi.mocked(vitest.globTestSpecifications).mockImplementation(() => tests) (or
vi.mocked(vitest).globTestSpecifications.mockImplementation(() => tests)
depending on how vitest is mocked in this file) to provide type-safe mocking per
repo Vitest conventions, and remove the redundant inline mock lines in tests
that reference vitest.globTestSpecifications.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: af5923ae-12c0-44b9-bd33-728ad82a9280
📒 Files selected for processing (2)
code/addons/vitest/src/node/test-manager.test.tscode/addons/vitest/src/node/vitest-manager.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- code/addons/vitest/src/node/vitest-manager.ts
…don-vitest-provide Co-authored-by: Copilot <copilot@github.com>
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
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 #
What I did
This PR changes the logic for injecting configuration into Vitest runs. Previously, we were setting
process.env, but now we're using Vitest's provide+inject API, which was built for this exact purpose.The structure is also more generic, allowing for arbitrary values to be injected now. Before, we hardcoded the configurations of the accessibility and coverage options, but now anything is injectable by overriding the run config. In stories, the injected values are available as
globals['storybook/test-provided]. Addon MCP might use this soon, to customise run options and add additional reports based on that.It's also built in a way for any users to do the same thing, although the use case isn't clear yet, so let's not document it just yet.
See:
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Run component tests through both the Vitest CLI and the Testing Module UI and see that it behaves as it always does. In the UI, try out different configurations of a11y and coverage.
I've also tried this with Vitest 3.0.9 to ensure it works with the older Vitest versions we support (v3.0.0 doesn't support the
--projectflag that we rely on), using the followingpackage.jsonand Vitest config:package.json
Vite config
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 pull request has been released as version
0.0.0-pr-34518-sha-4a90f0ac. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-34518-sha-4a90f0ac sandboxor in an existing project withnpx storybook@0.0.0-pr-34518-sha-4a90f0ac upgrade.More information
0.0.0-pr-34518-sha-4a90f0acjeppe/addon-vitest-provide4a90f0ac1777546863)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=34518Summary by CodeRabbit
Refactor
New Features
Tests