Merge pull request #36396 from storybookjs/ari/sb-1993

Addon Vitest: Prevent users from calling `setProjectAnnotations`, add auto migration for `vitest.setup.ts`

Author: AriPerkkio

MIGRATION.md

@@ -10,6 +10,7 @@
   - [Top-level `setConfig` layout and UI options removed](#top-level-setconfig-layout-and-ui-options-removed)
   - [Sidebar label rendering: renderAriaLabel and a context argument](#sidebar-label-rendering-renderarialabel-and-a-context-argument)
   - [Vitest Addon: requires Vitest 4.0 or higher](#vitest-addon-requires-vitest-40-or-higher)
+  - [Vitest Addon: `setProjectAnnotations` must not be called in setup files](#vitest-addon-setprojectannotations-must-not-be-called-in-setup-files)
   - [Vite: `publicDir` is handled by Storybook's `staticDirs`](#vite-publicdir-is-handled-by-storybooks-staticdirs)
   - [Vite: requires Vite 6.3 or higher](#vite-requires-vite-63-or-higher)
   - [Next.js: Require v15 and up](#nextjs-require-v15-and-up)
@@ -677,6 +678,10 @@ The `@storybook/addon-vitest` addon requires **Vitest 4.0 or higher**. Setup now
 
 If your custom tooling imports `canUpdateVitestWorkspaceFile` from `storybook/internal/babel`, remove that import. The workspace-file helper has been removed; migrate the configuration to `test.projects`.
 
+### Vitest Addon: `setProjectAnnotations` must not be called in setup files
+
+TODO
+
 ### Vite: `publicDir` is handled by Storybook's `staticDirs`
 
 In previous versions, Vite copied its `publicDir` (`public/` by default) into the output of `storybook build` after Storybook had written its own files. A `public/index.json` silently replaced Storybook's story index and broke the built Storybook, and files from `public/` overrode files from your `staticDirs`.

agent-eval/evals/812-first-story-empty-project/.storybook/vitest.setup.ts

@@ -28,7 +28,6 @@ export default defineConfig({
             provider: playwright({}),
             instances: [{ browser: 'chromium' }],
           },
-          setupFiles: ['.storybook/vitest.setup.ts'],
         },
       },
     ],

agent-eval/evals/812-first-story-empty-project/vitest.storybook.config.ts

@@ -28,7 +28,6 @@ export default defineConfig({
             provider: playwright({}),
             instances: [{ browser: 'chromium' }],
           },
-          setupFiles: ['.storybook/vitest.setup.ts'],
         },
       },
     ],

agent-eval/templates/monorepo/packages/ui/.storybook/vitest.setup.ts

@@ -36,7 +36,6 @@ export default defineConfig({
             provider: playwright({}),
             instances: [{ browser: 'chromium' }],
           },
-          setupFiles: ['.storybook/vitest.setup.ts'],
         },
       },
     ],

agent-eval/templates/monorepo/packages/ui/vitest.storybook.config.ts

@@ -34,6 +34,7 @@ import { toHaveLiveRegion } from '../core/src/shared/utils/toHaveLiveRegion.ts';
 import * as templatePreview from '../core/template/stories/preview.ts';
 import '../renderers/react/template/components/index.js';
 import { isChromatic } from './isChromatic.ts';
+import * as vitestPreview from './vitest.preview.ts';
 
 sb.mock(import('@storybook/global'), { spy: true });
 
@@ -432,6 +433,7 @@ export default definePreview({
     addonTest(),
     addonPseudoStates(),
     templatePreview,
+    ...((import.meta as { env?: { VITEST?: unknown } }).env?.VITEST ? [vitestPreview] : []),
   ],
   decorators,
   loaders,

agent-eval/templates/reshaped-storybook/.storybook/vitest.setup.ts

@@ -1,34 +1,5 @@
-import { vi, expect as vitestExpect } from 'vitest';
-
-import { setProjectAnnotations } from '@storybook/react';
-
-import { userEvent as storybookEvent, expect as storybookExpect } from 'storybook/test';
+import { vi } from 'vitest';
 
 import '../core/src/shared/utils/toHaveLiveRegion.ts';
 
-// Must be imported before `./preview.tsx` so a channel exists when preview open-services register.
-import './ensure-channel.ts';
-
-import preview from './preview.tsx';
-
 vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
-
-setProjectAnnotations([
-  preview.composed,
-  {
-    // experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
-    // https://vitest.dev/guide/browser/interactivity-api.html
-    loaders: async (context) => {
-      if (globalThis.__vitest_browser__) {
-        const vitest = await import('vitest/browser');
-        const { userEvent: browserEvent } = vitest;
-        // Unfortunately the types of userEvent don't match so we cast it
-        context.userEvent = (browserEvent as unknown as typeof storybookEvent).setup();
-        context.expect = vitestExpect;
-      } else {
-        context.userEvent = storybookEvent.setup();
-        context.expect = storybookExpect;
-      }
-    },
-  },
-]);