Automatically detect beforeAll in vitest

code/addons/test/src/vitest-plugin/setup-file.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /* eslint-disable no-underscore-dangle */
-import { afterEach, vi } from 'vitest';
+import { afterEach, beforeAll, vi } from 'vitest';
 import type { RunnerTask } from 'vitest';
 
 import { Channel } from 'storybook/internal/channels';
@@ -35,4 +35,10 @@ export const modifyErrorMessage = ({ task }: { task: Task }) => {
   }
 };
 
+beforeAll(() => {
+  if (globalThis.csf4Preview) {
+    return globalThis.csf4Preview.composed.beforeAll();
+  }
+});
+
 afterEach(modifyErrorMessage);

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

@@ -5,6 +5,7 @@ import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
 import {
   type Report,
+  composeConfigs,
   composeStory,
   getCsfFactoryAnnotations,
 } from 'storybook/internal/preview-api';
@@ -34,7 +35,7 @@ export const testStory = (
       annotations.story,
       annotations.meta!,
       { initialGlobals: (await getInitialGlobals?.()) ?? {} },
-      annotations.preview,
+      annotations.preview ?? globalThis.globalProjectAnnotations,
       exportName
     );
 

code/core/src/csf/csf-factories.ts

@@ -21,19 +21,26 @@ export interface Preview<TRenderer extends Renderer = Renderer> {
 }
 
 export function definePreview<TRenderer extends Renderer>(
-  preview: Preview<TRenderer>['input']
+  input: Preview<TRenderer>['input']
 ): Preview<TRenderer> {
-  return {
+  let composed: NormalizedProjectAnnotations<TRenderer>;
+  const preview: Preview<TRenderer> = {
     _tag: 'Preview',
-    input: preview,
+    input,
     get composed() {
-      const { addons, ...rest } = preview;
-      return normalizeProjectAnnotations<TRenderer>(composeConfigs([...(addons ?? []), rest]));
+      if (composed) {
+        return composed;
+      }
+      const { addons, ...rest } = input;
+      composed = normalizeProjectAnnotations<TRenderer>(composeConfigs([...(addons ?? []), rest]));
+      return composed;
     },
     meta(meta: ComponentAnnotations<TRenderer>) {
       return defineMeta(meta, this);
     },
   };
+  globalThis.globalProjectAnnotations = preview.composed;
+  return preview;
 }
 
 export function isPreview(input: unknown): input is Preview<Renderer> {

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 
 /* eslint-disable @typescript-eslint/naming-convention */
-import { type CleanupCallback, isExportStory } from '@storybook/core/csf';
+import { type CleanupCallback, type Preview, isExportStory } from '@storybook/core/csf';
 import type {
   Args,
   Canvas,
@@ -41,6 +41,8 @@ declare global {
   var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
   // eslint-disable-next-line no-var
   var defaultProjectAnnotations: ProjectAnnotations<any>;
+  // eslint-disable-next-line no-var
+  var csf4Preview: Preview<any>;
 }
 
 export function setDefaultProjectAnnotations<TRenderer extends Renderer = Renderer>(
@@ -73,7 +75,10 @@ export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
     | NamedOrDefaultProjectAnnotations<TRenderer>[]
 ): NormalizedProjectAnnotations<TRenderer> {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
-  globalThis.globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
+  globalThis.globalProjectAnnotations = composeConfigs([
+    globalThis.defaultProjectAnnotations ?? {},
+    composeConfigs(annotations.map(extractAnnotation)),
+  ]);
 
   /*
     We must return the composition of default and global annotations here
@@ -82,10 +87,7 @@ export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
     const projectAnnotations = setProjectAnnotations(...);
     beforeAll(projectAnnotations.beforeAll)
   */
-  return composeConfigs([
-    globalThis.defaultProjectAnnotations ?? {},
-    globalThis.globalProjectAnnotations ?? {},
-  ]);
+  return globalThis.globalProjectAnnotations ?? {};
 }
 
 const cleanups: CleanupCallback[] = [];
@@ -123,10 +125,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   const normalizedProjectAnnotations = normalizeProjectAnnotations<TRenderer>(
     composeConfigs([
-      defaultConfig && Object.keys(defaultConfig).length > 0
-        ? defaultConfig
-        : (globalThis.defaultProjectAnnotations ?? {}),
-      globalThis.globalProjectAnnotations ?? {},
+      defaultConfig ?? globalThis.globalProjectAnnotations ?? {},
       projectAnnotations ?? {},
     ])
   );
@@ -165,6 +164,8 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       mount: null!,
     });
 
+    context.parameters.__isPortableStory = true;
+
     context.context = context;
 
     if (story.renderToCanvas) {

code/frameworks/experimental-nextjs-vite/src/portable-stories.ts

@@ -96,7 +96,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 }

code/frameworks/nextjs/src/portable-stories.ts

@@ -96,7 +96,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 }

code/renderers/react/src/portable-stories.tsx

@@ -54,15 +54,10 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> = {
   ...reactProjectAnnotations,
+  /** @deprecated */
   renderToCanvas: async (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
-      // eslint-disable-next-line no-underscore-dangle
-      renderContext.storyContext.parameters.__isPortableStory = true;
-      const unmount = await reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
-
-      return async () => {
-        await unmount();
-      };
+      return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
     }
     const {
       storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render },
@@ -111,7 +106,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 }

code/renderers/svelte/src/portable-stories.ts

@@ -72,6 +72,7 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<SvelteRenderer> = {
   ...svelteProjectAnnotations,
+  /** @deprecated */
   renderToCanvas: (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
       return svelteProjectAnnotations.renderToCanvas(renderContext, canvasElement);
@@ -125,7 +126,7 @@ export function composeStory<TArgs extends Args = Args>(
     // @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial<Simplify<TArgs, {}>>'
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 

code/renderers/vue3/src/portable-stories.ts

@@ -62,6 +62,7 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const vueProjectAnnotations: ProjectAnnotations<VueRenderer> = {
   ...defaultProjectAnnotations,
+  /** @deprecated */
   renderToCanvas: (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
       return defaultProjectAnnotations.renderToCanvas(renderContext, canvasElement);
@@ -113,7 +114,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<VueRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    vueProjectAnnotations,
+    globalThis.globalProjectAnnotations ?? vueProjectAnnotations,
     exportsName
   );