Addon-Vitest: Extra changes for Vitest 4

code/addons/vitest/build-config.ts

@@ -22,6 +22,16 @@ const config: BuildEntries = {
         entryPoint: './src/vitest-plugin/test-utils.ts',
         dts: false,
       },
+      {
+        exportEntries: ['./internal/vitest-context'],
+        entryPoint: './src/vitest-plugin/vitest-context.ts',
+        dts: false,
+      },
+      {
+        exportEntries: ['./internal/vitest-context-legacy'],
+        entryPoint: './src/vitest-plugin/vitest-context-legacy.ts',
+        dts: false,
+      },
     ],
     node: [
       {

code/addons/vitest/package.json

@@ -46,6 +46,8 @@
     "./internal/global-setup": "./dist/vitest-plugin/global-setup.js",
     "./internal/setup-file": "./dist/vitest-plugin/setup-file.js",
     "./internal/test-utils": "./dist/vitest-plugin/test-utils.js",
+    "./internal/vitest-context": "./dist/vitest-plugin/vitest-context.js",
+    "./internal/vitest-context-legacy": "./dist/vitest-plugin/vitest-context-legacy.js",
     "./manager": "./dist/manager.js",
     "./package.json": "./package.json",
     "./postinstall": "./dist/postinstall.js",
@@ -101,27 +103,17 @@
     "tree-kill": "^1.2.2",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.1"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@vitest/browser": "^3.0.0 || ^4.0.0",
-    "@vitest/browser-playwright": "^4.0.0",
     "@vitest/runner": "^3.0.0 || ^4.0.0",
     "storybook": "workspace:^",
     "vitest": "^3.0.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
-    "@vitest/browser": {
-      "optional": true
-    },
-    "@vitest/browser-playwright": {
-      "optional": true
-    },
     "@vitest/runner": {
       "optional": true
-    },
-    "vitest": {
-      "optional": true
     }
   },
   "publishConfig": {

code/addons/vitest/src/node/reporter.ts

@@ -61,7 +61,6 @@ export class StorybookReporter implements Reporter {
     this.ctx.state.idMap.clear();
     this.ctx.state.errorsSet.clear();
     // TODO: Remove this once we don't support Vitest < 4
-    // @ts-expect-error processTimeoutCauses does not exist in Vitest 4
     this.ctx.state.processTimeoutCauses?.clear();
   }
 }

code/addons/vitest/src/node/vitest-manager.ts

@@ -164,7 +164,6 @@ export class VitestManager {
   }
 
   private updateLastChanged(filepath: string) {
-    // @ts-expect-error `server` only exists in Vitest 3
     this.vitest!.projects.forEach(({ browser, vite, server }) => {
       if (server) {
         const serverMods = server.moduleGraph.getModulesByFile(filepath);

code/addons/vitest/src/postinstall.ts

@@ -468,11 +468,14 @@ export default async function postInstall(options: PostinstallOptions) {
       logger.plain(`  ${rootConfig}`);
 
       const formattedContent = await formatFileContent(rootConfig, generate(target).code);
+      // Only add triple slash reference to vite.config files, not vitest.config files
+      // vitest.config files already have the vitest/config types available
+      const shouldAddReference = !configFileHasTypeReference && !vitestConfigFile;
       await writeFile(
         rootConfig,
-        configFileHasTypeReference
-          ? formattedContent
-          : '/// <reference types="vitest/config" />\n' + formattedContent
+        shouldAddReference
+          ? '/// <reference types="vitest/config" />\n' + formattedContent
+          : formattedContent
       );
     } else {
       logErrors(

code/addons/vitest/src/vitest-plugin/index.ts

@@ -26,6 +26,7 @@ import type { Presets } from 'storybook/internal/types';
 import { match } from 'micromatch';
 import { dirname, join, normalize, relative, resolve, sep } from 'pathe';
 import picocolors from 'picocolors';
+import semver from 'semver';
 import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
@@ -97,6 +98,16 @@ const mdxStubPlugin: Plugin = {
   },
 };
 
+export const checkIsVitest4orHigher = async () => {
+  const vitestVersion = await import('vitest/package.json', { with: { type: 'json' } }).then(
+    (pkg) => {
+      return pkg.default.version;
+    }
+  );
+
+  return semver.major(vitestVersion) >= 4;
+};
+
 export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> => {
   const finalOptions = {
     ...defaultOptions,
@@ -123,6 +134,8 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
   // We are overriding the environment variable to 'true' if vitest runs via @storybook/addon-vitest's backend
   const isVitestStorybook = optionalEnvToBoolean(process.env.VITEST_STORYBOOK);
 
+  const isVitest4OrHigher = await checkIsVitest4orHigher();
+
   const directories = {
     configDir: finalOptions.configDir,
     workingDir: WORKING_DIR,
@@ -175,6 +188,10 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     plugins.push(mdxStubPlugin);
   }
 
+  const addonVitestPath = dirname(
+    fileURLToPath(import.meta.resolve('@storybook/addon-vitest/package.json'))
+  );
+
   const storybookTestPlugin: Plugin = {
     name: 'vite-plugin-storybook-test',
     async transformIndexHtml(html) {
@@ -307,6 +324,11 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
         ),
 
         resolve: {
+          alias: {
+            '@storybook/addon-vitest/internal/vitest-context': isVitest4OrHigher
+              ? join(addonVitestPath, 'dist/vitest-plugin/vitest-context.js')
+              : join(addonVitestPath, 'dist/vitest-plugin/vitest-context-legacy.js'),
+          },
           conditions: [
             'storybook',
             'stories',
@@ -325,6 +347,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
             '@storybook/addon-vitest/internal/setup-file',
             '@storybook/addon-vitest/internal/global-setup',
             '@storybook/addon-vitest/internal/test-utils',
+            '@storybook/addon-vitest/internal/vitest-context',
             ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
               ? ['react-dom/test-utils']
               : []),

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

@@ -3,19 +3,11 @@ import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 import { type Meta, type Story, getStoryChildren, isStory } from 'storybook/internal/csf';
 import type { ComponentAnnotations, ComposedStoryFn, Renderer } from 'storybook/internal/types';
 
-import { server } from '@vitest/browser/context';
 import { type Report, composeStory, getCsfFactoryAnnotations } from 'storybook/preview-api';
 
+import type { VitestBrowserContext } from './types';
 import { setViewport } from './viewports';
 
-declare module '@vitest/browser/context' {
-  interface BrowserCommands {
-    getInitialGlobals: () => Promise<Record<string, any>>;
-  }
-}
-
-const { getInitialGlobals } = server.commands;
-
 /**
  * Converts a file URL to a file path, handling URL encoding
  *
@@ -49,6 +41,13 @@ export const testStory = (
 
     const storyAnnotations = test ? test.input : annotations.story;
 
+    const { server } = (await import(
+      // @ts-expect-error - This is an internal alias that will be resolved by the vitest plugin at runtime
+      '@storybook/addon-vitest/internal/vitest-context'
+    )) as unknown as VitestBrowserContext;
+
+    const { getInitialGlobals } = server.commands;
+
     const composedStory = composeStory(
       storyAnnotations,
       annotations.meta!,

code/addons/vitest/src/vitest-plugin/types.ts

@@ -1,3 +1,22 @@
+import type { BrowserCommands, BrowserPage } from '@vitest/browser/context';
+
+interface GetInitialGlobalsResult {
+  a11y?: {
+    manual?: boolean;
+  };
+}
+
+interface ExtendedBrowserCommands extends BrowserCommands {
+  getInitialGlobals?: () => Promise<GetInitialGlobalsResult>;
+}
+
+export interface VitestBrowserContext {
+  page: BrowserPage;
+  server: {
+    commands: ExtendedBrowserCommands;
+  };
+}
+
 export type UserOptions = {
   /**
    * The directory where the Storybook configuration is located, relative to the vitest

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

@@ -1,6 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { page } from '@vitest/browser/context';
+// @ts-expect-error - This is an internal alias that will be resolved by the vitest plugin at runtime
+import { page } from '@storybook/addon-vitest/internal/vitest-context';
+
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import {
@@ -10,7 +12,7 @@ import {
   setViewport,
 } from './viewports';
 
-vi.mock('@vitest/browser/context', () => ({
+vi.mock('@storybook/addon-vitest/internal/vitest-context', () => ({
   page: {
     viewport: vi.fn(),
   },

code/addons/vitest/src/vitest-plugin/viewports.ts

@@ -4,6 +4,8 @@ import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-er
 import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 import type { ViewportMap } from 'storybook/viewport';
 
+import type { VitestBrowserContext } from './types';
+
 declare global {
   // eslint-disable-next-line no-var
   var __vitest_browser__: boolean;
@@ -66,9 +68,10 @@ export const setViewport = async (parameters: Parameters = {}, globals: Globals
     defaultViewport = viewportsParam.defaultViewport;
   }
 
-  const { page } = await import('@vitest/browser/context').catch(() => ({
+  // @ts-expect-error - This is an internal alias that will be resolved by the vitest plugin at runtime
+  const { page } = (await import('@storybook/addon-vitest/internal/vitest-context').catch(() => ({
     page: null,
-  }));
+  }))) as unknown as VitestBrowserContext;
 
   if (!page || !globalThis.__vitest_browser__) {
     return;

code/addons/vitest/src/vitest-plugin/vitest-context-legacy.ts

@@ -0,0 +1 @@
+export * from '@vitest/browser/context';

code/addons/vitest/src/vitest-plugin/vitest-context-modern.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore (vitest/browser is vitest 4 only, and we're using vitest 3 locally)
+export * from 'vitest/browser';

code/addons/vitest/src/vitest-plugin/vitest-context.ts

@@ -0,0 +1,26 @@
+import semver from 'semver';
+
+type VitestBrowserContext = typeof import('@vitest/browser/context');
+
+type VitestServerContext = VitestBrowserContext & {
+  server: {
+    commands: typeof import('@vitest/browser/context').server.commands & {
+      getInitialGlobals: () => Promise<Record<string, any>>;
+    };
+  };
+};
+
+/** Gets the Vitest browser context based on which version of Vitest is installed. */
+export const getVitestBrowserContext = async (): Promise<VitestServerContext> => {
+  const vitestVersion = await import('vitest/package.json', { with: { type: 'json' } }).then(
+    (v) => v.version
+  );
+
+  if (semver.major(vitestVersion) >= 4) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore (vitest/browser is vitest 4 only, and we're using vitest 3 locally)
+    return import('vitest/browser') as unknown as Promise<VitestServerContext>;
+  }
+
+  return import('@vitest/browser/context') as Promise<VitestServerContext>;
+};

code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/plugin.ts

@@ -40,13 +40,23 @@ export const viteInjectMockerRuntime = (options: {
     config() {
       return {
         optimizeDeps: {
-          include: ['@vitest/mocker', '@vitest/mocker/browser'],
+          include: [
+            //
+            '@vitest/mocker',
+            '@vitest/mocker/browser',
+            '@vitest/mocker/node',
+          ],
+          exclude: [
+            //
+            'fsevents',
+          ],
         },
         resolve: {
           // Aliasing necessary for package managers like pnpm, since resolving modules from a virtual module
           // leads to errors, if the imported module is not a dependency of the project.
           // By resolving the module to the real path, we can avoid this issue.
           alias: {
+            '@vitest/mocker/node': fileURLToPath(import.meta.resolve('@vitest/mocker/node')),
             '@vitest/mocker/browser': fileURLToPath(import.meta.resolve('@vitest/mocker/browser')),
             '@vitest/mocker': fileURLToPath(import.meta.resolve('@vitest/mocker')),
           },