Addon-Vitest: Support Vitest 4 #32819

yannbf · 2025-10-24T07:37:34Z

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

Summary by CodeRabbit

New Features
- Vitest v4 + Playwright browser testing support and updated browser test defaults.
- New Next.js 15 templates (Webpack & Vite).
- Added a portable React + Vitest Storybook test project with example stories and components.
Tests
- Large expansion of end-to-end and Playwright suites plus new Storybook/Vitest story tests.
Chores
- CI workflows reorganized with new test jobs and increased parallelism; dev-dependency updates for Vitest ecosystem.

…uration for compatibility

…ask configuration

…port

…s for Storybook tests

…, and browser contexts

This reverts commit 3a0d302.

…ility

This reverts commit 01dd0e2.

…port

… selection

coderabbitai

Actionable comments posted: 11

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

scripts/tasks/sandbox.ts (1)
10-10: Use storybook/internal/node-logger instead of console.

As per coding guidelines for Node.js scripts, replace the direct console usage with the appropriate logger from storybook/internal/node-logger.

Apply this diff to use the proper logger:
+import { logger as nodeLogger } from '@storybook/core/node-logger';
+
-const logger = console;
+const logger = nodeLogger;
As per coding guidelines
code/addons/vitest/package.json (1)
100-105: Duplicate dependency: ts-dedent appears in both dependencies and devDependencies

Remove the duplicate from devDependencies to avoid confusion and lockfile churn.
   "devDependencies": {
@@
-    "ts-dedent": "^2.2.0",
     "typescript": "^5.8.3",
     "vitest": "^4.0.1"
   },
code/addons/vitest/src/postinstall.ts (1)
303-321: Honor --skip-install for dependency installation

options.skipInstall currently only skips Playwright binary install, not the package install step. Respect it to avoid surprising users/CI.
-  await packageManager.installDependencies();
+  if (!options.skipInstall) {
+    await packageManager.installDependencies();
+  } else {
+    logger.plain('Skipping dependency installation (--skip-install).');
+    logger.plain('Please run your package manager install before running tests.');
+  }

🧹 Nitpick comments (9)

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/Button.stories.tsx (1)
66-66: Inconsistent quote style.

Double quotes are used here while single quotes are used elsewhere (lines 57, 75). Prettier should normalize this when run before commit.
-    children: "foo",
+    children: 'foo',
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/get-button-string.ts (1)

1-3: Consider inlining this function unless needed for testing module resolution.

The getButtonString function is trivial and could be inlined directly in AddonTest.tsx. However, if this separate module is intentionally created to test module imports/exports in the Vitest setup, then the current structure is appropriate.
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/pre-e2e.js (1)
6-10: Consider a more robust approach than modifying source files.

Modifying source files during test execution is problematic because:

It can lead to race conditions if tests run in parallel

It creates side effects that could affect subsequent runs

No error handling for file operations (read/write failures)

Path resolution depends on the current working directory

Consider these alternatives:

Use environment variables to control the forceFailure behavior

Use Storybook parameters or test configuration

Create separate story files for E2E vs. unit tests

At minimum, add error handling and verification:
 const testStoryPath = path.resolve("stories/AddonTest.stories.tsx");
 
 console.log(`Pre-e2e script: clearing ${testStoryPath}`);
-const storyContent = fs.readFileSync(testStoryPath).toString();
-fs.writeFileSync(testStoryPath, storyContent.replace("forceFailure: true", "forceFailure: false"));
+try {
+  const storyContent = fs.readFileSync(testStoryPath, 'utf8');
+  const updatedContent = storyContent.replace("forceFailure: true", "forceFailure: false");
+  
+  if (storyContent === updatedContent) {
+    console.warn("Warning: No replacement made - 'forceFailure: true' not found");
+  }
+  
+  fs.writeFileSync(testStoryPath, updatedContent, 'utf8');
+  console.log("Successfully updated forceFailure to false");
+} catch (error) {
+  console.error(`Failed to update ${testStoryPath}:`, error);
+  process.exit(1);
+}
.circleci/README.md (1)
56-56: Clarify the purpose of the Vitest 3 test in documentation.

The PR aims to add Vitest 4 support, but this job is specifically for Vitest 3. Consider updating the description to clarify this tests backward compatibility with Vitest 3.2, making the relationship to the overall Vitest 4 upgrade clearer.
-- **`e2e-ui-vitest-3`**: End-to-end tests for Storybook's manager UI using Vitest 3
+- **`e2e-ui-vitest-3`**: End-to-end tests for Storybook's manager UI using Vitest 3 (backward compatibility)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/main.ts (1)
25-28: Consider simplifying redundant optimizeDeps configuration.

The optimizeDeps section spreads the existing config and then recreates the include array without adding any new values. This is redundant and can be simplified.

If you're not adding any new dependencies, you can simplify to:
     return {
       ...config,
-      optimizeDeps: {
-        ...config.optimizeDeps,
-        include: [...(config.optimizeDeps?.include || [])],
-      },
       resolve: {
Or keep just the spread if preserving the structure is desired for future additions:
       optimizeDeps: {
         ...config.optimizeDeps,
-        include: [...(config.optimizeDeps?.include || [])],
       },
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts (1)

10-121: Optional: Consider extracting shared test logic.

The desktop and mobile tests share significant logic for verifying composed Storybook visibility, filtering, and story selection. Consider extracting a shared helper function to reduce duplication and improve maintainability.

However, this is a low-priority suggestion—test clarity and readability often outweigh DRY principles in e2e tests.
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/component-testing.spec.ts (2)
198-205: DRY: factor “ensure story loaded” into a helper

The repeated pattern to locate and wait for the same story element can be a small helper to reduce duplication and keep consistent timeouts.
async function waitForStoryButton(sbPage: SbPage, name: string) {
  const el = sbPage.getCanvasBodyElement().getByRole('button', { name });
  await expect(el).toBeVisible({ timeout: 30_000 });
  return el;
}
Use as: await waitForStoryButton(sbPage, 'test');

Also applies to: 273-278, 440-447, 502-506, 592-596, 642-646, 695-699

56-58: Now let me examine the actual code context to understand what's being tested:

Based on my verification, I've confirmed the issues identified in your review comment. Fixed timeouts using page.waitForTimeout() can lead to flaky tests, unnecessary delays when conditions are met sooner, and fragile tests that don't adapt to actual application state. The page.waitForTimeout() method is discouraged in recent versions of Playwright.

The script confirmed 6 instances of fixed waits across the file (lines 282, 336, 375, 415, 451, 703). The page.waitForFunction() approach is recommended as it's versatile and allows passing a custom function to wait for specific conditions.

Replace fixed waits with deterministic conditions for HMR and page reload detection

Fixed page.waitForTimeout() calls cause flaky and slow tests. Replace with explicit wait conditions. For HMR/reload scenarios, use page.waitForFunction() to poll for a measurable state change (e.g., element text updates, visibility changes, or navigation completion) rather than arbitrary delays.

Example pattern:
// after modifyFile(...)
await page.waitForFunction(
  () => !!document.querySelector('#testing-module-description:has-text("Ran ")'),
  { timeout: 30000 }
);
Affected lines: 282, 336, 375, 415, 451, 703
code/addons/vitest/src/postinstall.ts (1)
273-276: Avoid re-adding @storybook/nextjs-vite if already present

Prevents overriding existing version ranges unnecessarily.
-      const storybookVersion = await packageManager.getInstalledVersion('storybook');
-      uniqueDependencies.push(`@storybook/nextjs-vite@^${storybookVersion}`);
+      const storybookVersion = await packageManager.getInstalledVersion('storybook');
+      if (!allDeps['@storybook/nextjs-vite']) {
+        uniqueDependencies.push(`@storybook/nextjs-vite@^${storybookVersion}`);
+      }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b68fa4a and cf82546.

⛔ Files ignored due to path filters (2)

code/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (58)

.circleci/README.md (1 hunks)
.circleci/config.yml (1 hunks)
.circleci/src/jobs/e2e-ui-vitest-3.yml (1 hunks)
.circleci/src/jobs/stories-tests.yml (1 hunks)
.circleci/src/workflows/daily.yml (2 hunks)
.circleci/src/workflows/merged.yml (3 hunks)
.circleci/src/workflows/normal.yml (3 hunks)
code/addons/vitest/package.json (2 hunks)
code/addons/vitest/src/node/reporter.ts (1 hunks)
code/addons/vitest/src/node/vitest-manager.ts (2 hunks)
code/addons/vitest/src/postinstall.ts (7 hunks)
code/addons/vitest/src/updateVitestFile.test.ts (11 hunks)
code/addons/vitest/src/vitest-plugin/index.ts (1 hunks)
code/addons/vitest/src/vitest-plugin/test-utils.ts (1 hunks)
code/addons/vitest/src/vitest-plugin/viewports.ts (1 hunks)
code/addons/vitest/templates/vitest.config.3.2.template.ts (1 hunks)
code/addons/vitest/templates/vitest.config.4.template.ts (1 hunks)
code/addons/vitest/templates/vitest.config.template.ts (1 hunks)
code/addons/vitest/templates/vitest.workspace.template.ts (1 hunks)
code/addons/vitest/tsconfig.json (1 hunks)
code/core/src/actions/loaders.ts (1 hunks)
code/core/src/test/preview.ts (1 hunks)
code/frameworks/nextjs-vite/package.json (1 hunks)
code/lib/cli-storybook/src/sandbox-templates.ts (4 hunks)
code/renderers/react/template/stories/test-fn.stories.tsx (1 hunks)
scripts/tasks/sandbox.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.eslintrc.cjs (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.gitignore (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/aliased.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/get-decorator-string.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/main.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/preview-head.html (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/preview.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/setup-file-dependency.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/test-static-dirs/static.js (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.storybook/vitest.setup.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/.yarnrc.yml (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/component-testing.spec.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/save-from-controls.spec.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/playwright-e2e.config.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/pre-e2e.js (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/AddonTest.stories.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/AddonTest.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/Button.stories.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/Button.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/MyButton.stories.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/OtherComponent.stories.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/UnhandledErrors.stories.tsx (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/button.css (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/stories/get-button-string.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/tsconfig.json (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/tsconfig.node.json (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/vite.config.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/vitest.workspace.ts (1 hunks)
test-storybooks/portable-stories-kitchen-sink/react/package.json (3 hunks)
test-storybooks/portable-stories-kitchen-sink/react/vite.config.mts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

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