Addon Vitest: Support Vitest 5 browser tests

[valentinpalkovic]

What I did

Vitest 5 no longer exposes the FEATURES Vite define on the runtime global. React's experimental .test() stories therefore fail even when experimentalTestSyntax: true is configured in main.ts.

Pass the configured flags through Vitest's provide/inject API and initialize FEATURES in the test setup. Restore it before each test so unstubGlobals: true works too.

Also allow Vitest 5 in @storybook/addon-vitest peer ranges (vitest, @vitest/browser, @vitest/browser-playwright, @vitest/runner). That was the only published package that listed vitest as a peer.

Verified the same test-fn stories in Chromium:

Version	Before	After
Vitest 4.1.5	7 passed	7 passed
Vitest 5.0.0	5 failed, 2 passed	7 passed

Also passed 54 plugin unit tests, the addon typecheck, and lint with no errors.

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

1. Generate the React Vite sandbox with yarn task sandbox --template react-vite/default-ts --start-from auto.
2. In the sandbox, install matching vitest@5.0.0 and @vitest/browser-playwright@5.0.0 versions. Keep features.experimentalTestSyntax: true in .storybook/main.ts.
3. Run yarn vitest run src/stories/renderers/react/test-fn.stories.tsx. All seven tests should pass.
4. Repeat with test.unstubGlobals: true in the Vitest config.

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

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• 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 - 🚫 Not run

This PR does not have a canary release associated.

In-repo PRs: add the ci:canary label. Later pushes republish while the label remains.

Fork PRs: the label does nothing (a later push must not auto-publish). A maintainer publishes from this repository with Run workflow and the pr input. branch and sha are optional; if more than one is set, they must be the same commit. The fork author does not need to do anything.

[ghengeveld]

Pushed a follow-up that allows Vitest 5 in @storybook/addon-vitest peer ranges (vitest, @vitest/browser, @vitest/browser-playwright, @vitest/runner). That was the only published package that listed vitest as a peer.

The FEATURES provide/inject change looks correct: Vitest 5 no longer surfaces the Vite define on the runtime global, and the beforeEach stub covers unstubGlobals: true.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 7f561355-4afc-4394-8d77-6b827686c478

📥 Commits

Reviewing files that changed from the base of the PR and between 69a7be4 and ff26609.

📒 Files selected for processing (1)

• code/addons/vitest/package.json

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The Vitest plugin now provides typed Storybook feature flags. The setup file injects these flags into the global FEATURES value initially and before each test. Vitest 5 is included in the supported peer dependency ranges.

Changes

Vitest feature injection

Layer / File(s)	Summary
Feature provide contract and plugin wiring code/addons/vitest/src/constants.ts, code/addons/vitest/src/vitest-plugin/index.ts, code/addons/vitest/src/vitest-provided-context.d.ts, code/addons/vitest/package.json	The integration defines STORYBOOK_TEST_FEATURES_PROVIDE_KEY, provides resolved Storybook features, adds the key to Vitest’s typed ProvidedContext, and includes Vitest 5 in the peer dependency ranges.
Test setup feature injection code/addons/vitest/src/vitest-plugin/setup-file.ts	The setup reads the provided features, stubs the global FEATURES value, and refreshes it before each test.

Sequence Diagram(s)

sequenceDiagram
  participant VitestPlugin
  participant ProvidedContext
  participant SetupFile
  participant GlobalFEATURES
  VitestPlugin->>ProvidedContext: provide resolved Storybook features
  SetupFile->>ProvidedContext: read STORYBOOK_TEST_FEATURES_PROVIDE_KEY
  SetupFile->>GlobalFEATURES: stub and refresh FEATURES
  VitestPlugin->>SetupFile: run Vitest setup

Loading

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to ff266

Vitest 5 compatibility is declared for the addon packages, so the change is ready to merge.

---

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