From 81e9c7732a193e11a480d28a73c0aa4e9281f37d Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 22 May 2025 19:50:10 +0200
Subject: [PATCH 001/130] wip prototype for test fn plugin

---
 code/core/src/csf-tools/index.ts              |   1 +
 .../csf-tools/test-syntax/transformer.test.ts |  91 +++++++++
 .../src/csf-tools/test-syntax/transformer.ts  | 192 ++++++++++++++++++
 3 files changed, 284 insertions(+)
 create mode 100644 code/core/src/csf-tools/test-syntax/transformer.test.ts
 create mode 100644 code/core/src/csf-tools/test-syntax/transformer.ts

diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index a2dcddb3cc0e..9d5f784798ed 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -3,4 +3,5 @@ export * from './ConfigFile';
 export * from './getStorySortParameter';
 export * from './enrichCsf';
 export { babelParse } from 'storybook/internal/babel';
+export { testTransform } from './test-syntax/transformer';
 export { vitestTransform } from './vitest-plugin/transformer';
diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
new file mode 100644
index 000000000000..45abf7c8142f
--- /dev/null
+++ b/code/core/src/csf-tools/test-syntax/transformer.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { testTransform as originalTransform } from './transformer';
+
+vi.mock('storybook/internal/common', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('storybook/internal/common')>();
+  return {
+    ...actual,
+    getStoryTitle: vi.fn(() => 'automatic/calculated/title'),
+  };
+});
+
+expect.addSnapshotSerializer({
+  serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
+  test: (val) => true,
+});
+
+const transform = async ({
+  code = '',
+  fileName = 'src/components/Button.stories.js',
+  configDir = '.storybook',
+  stories = [],
+}) => {
+  const transformed = await originalTransform({
+    code,
+    fileName,
+    configDir,
+    stories,
+  });
+  if (typeof transformed === 'string') {
+    return { code: transformed, map: null };
+  }
+
+  return transformed;
+};
+
+describe('transformer', () => {
+  describe('test syntax', () => {
+    it('should add test statement to const declared exported stories', async () => {
+      const code = `
+        import { config } from '#.storybook/preview';
+        const meta = config.meta({ component: Button });
+        export const Primary = meta.story({ 
+          args: {
+            label: 'Primary Button',
+          }
+        });
+        
+        Primary.test('some test name here', () => {
+          console.log('test');
+        });
+        Primary.test('something else here too', () => {
+          console.log('test');
+        });
+      `;
+
+      const result = await transform({ code });
+
+      expect(result.code).toMatchInlineSnapshot(`
+        import { config } from '#.storybook/preview';
+        const meta = config.meta({
+          component: Button,
+          title: "automatic/calculated/title"
+        });
+        export const Primary = meta.story({
+          args: {
+            label: 'Primary Button'
+          }
+        });
+        export const _test = {
+          ...Primary,
+          tags: [...Primary?.tags, "test-fn"],
+          play: async context => {
+            await (Primary?.play)();
+            console.log('test');
+          },
+          storyName: "Primary: some test name here"
+        };
+        export const _test2 = {
+          ...Primary,
+          tags: [...Primary?.tags, "test-fn"],
+          play: async context => {
+            await (Primary?.play)();
+            console.log('test');
+          },
+          storyName: "Primary: something else here too"
+        };
+      `);
+    });
+  });
+});
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
new file mode 100644
index 000000000000..a8f16e71aad2
--- /dev/null
+++ b/code/core/src/csf-tools/test-syntax/transformer.ts
@@ -0,0 +1,192 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
+import { types as t } from 'storybook/internal/babel';
+import { getStoryTitle } from 'storybook/internal/common';
+import type { StoriesEntry } from 'storybook/internal/types';
+
+import { dedent } from 'ts-dedent';
+
+import { formatCsf, loadCsf } from '../CsfFile';
+
+const logger = console;
+
+export async function testTransform({
+  code,
+  fileName,
+  configDir,
+  stories,
+}: {
+  code: string;
+  fileName: string;
+  configDir: string;
+  stories: StoriesEntry[];
+}): Promise<ReturnType<typeof formatCsf>> {
+  const isStoryFile = /\.stor(y|ies)\./.test(fileName);
+  if (!isStoryFile) {
+    return code;
+  }
+
+  const parsed = loadCsf(code, {
+    fileName,
+    transformInlineMeta: true,
+    makeTitle: (title) => {
+      const result =
+        getStoryTitle({
+          storyFilePath: fileName,
+          configDir,
+          stories,
+          userTitle: title,
+        }) || 'unknown';
+
+      if (result === 'unknown') {
+        logger.warn(
+          dedent`
+            [Storybook]: Could not calculate story title for "${fileName}".
+            Please make sure that this file matches the globs included in the "stories" field in your Storybook configuration at "${configDir}".
+          `
+        );
+      }
+      return result;
+    },
+  }).parse();
+
+  const ast = parsed._ast;
+
+  const metaNode = parsed._metaNode as t.ObjectExpression;
+
+  const metaTitleProperty = metaNode.properties.find(
+    (prop) => t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === 'title'
+  );
+
+  const metaTitle = t.stringLiteral(parsed._meta?.title || 'unknown');
+  if (!metaTitleProperty) {
+    metaNode.properties.push(t.objectProperty(t.identifier('title'), metaTitle));
+  } else if (t.isObjectProperty(metaTitleProperty)) {
+    // If the title is present in meta, overwrite it because autotitle can still affect existing titles
+    metaTitleProperty.value = metaTitle;
+  }
+
+  if (!metaNode || !parsed._meta) {
+    throw new Error(
+      'Storybook could not detect the meta (default export) object in the story file. \n\nPlease make sure you have a default export with the meta object. If you are using a different export format that is not supported, please file an issue with details about your use case.'
+    );
+  }
+
+  // Generate new story exports from tests attached to stories
+  const newExports: t.ExportNamedDeclaration[] = [];
+  let testCounter = 1;
+
+  // Track nodes to remove from the AST
+  const nodesToRemove: t.Node[] = [];
+
+  // Process each story to find attached tests
+  Object.entries(parsed._stories).forEach(([storyExportName, storyInfo]) => {
+    // Find all test calls on this story in the AST
+    ast.program.body.forEach((node) => {
+      if (!t.isExpressionStatement(node)) {
+        return;
+      }
+
+      const { expression } = node;
+
+      if (!t.isCallExpression(expression)) {
+        return;
+      }
+
+      const { callee, arguments: args } = expression;
+
+      // Check if it's a call like StoryName.test()
+      if (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.object) &&
+        callee.object.name === storyExportName &&
+        t.isIdentifier(callee.property) &&
+        callee.property.name === 'test' &&
+        args.length >= 2 &&
+        t.isStringLiteral(args[0]) &&
+        (t.isFunctionExpression(args[1]) || t.isArrowFunctionExpression(args[1]))
+      ) {
+        // Get test name and body
+        const testName = (args[0] as t.StringLiteral).value;
+        const testFunction = args[1] as t.FunctionExpression | t.ArrowFunctionExpression;
+
+        // Create unique export name for the test story
+        const testExportName = `_test${testCounter > 1 ? testCounter : ''}`;
+        testCounter++;
+
+        // Create a new story object with the test function integrated as play function
+        const newStoryObject = t.objectExpression([
+          t.spreadElement(t.identifier(storyExportName)),
+          // Add tags property that preserves existing tags and adds 'test-fn'
+          t.objectProperty(
+            t.identifier('tags'),
+            t.arrayExpression([
+              // Spread existing tags if they exist
+              t.spreadElement(
+                t.optionalMemberExpression(
+                  t.identifier(storyExportName),
+                  t.identifier('tags'),
+                  false,
+                  true
+                )
+              ),
+              // Add the test-fn tag
+              t.stringLiteral('test-fn'),
+            ])
+          ),
+          t.objectProperty(
+            t.identifier('play'),
+            t.arrowFunctionExpression(
+              [t.identifier('context')],
+              t.blockStatement([
+                // Add code to call the original story's play function if it exists
+                t.expressionStatement(
+                  t.awaitExpression(
+                    t.callExpression(
+                      t.optionalMemberExpression(
+                        t.identifier(storyExportName),
+                        t.identifier('play'),
+                        false,
+                        true
+                      ),
+                      []
+                    )
+                  )
+                ),
+                // Then add the test function body
+                ...(t.isBlockStatement(testFunction.body)
+                  ? testFunction.body.body
+                  : [t.expressionStatement(testFunction.body)]),
+              ]),
+              true // async
+            )
+          ),
+          t.objectProperty(
+            t.identifier('storyName'),
+            t.stringLiteral(`${storyInfo.name || storyExportName}: ${testName}`)
+          ),
+        ]);
+
+        // Create export statement
+        const exportDeclaration = t.exportNamedDeclaration(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(t.identifier(testExportName), newStoryObject),
+          ]),
+          []
+        );
+
+        newExports.push(exportDeclaration);
+
+        // Mark the original test call for removal
+        nodesToRemove.push(node);
+      }
+    });
+  });
+
+  // Remove the test calls from the AST
+  ast.program.body = ast.program.body.filter((node) => !nodesToRemove.includes(node));
+
+  // Add new exports to the AST
+  ast.program.body.push(...newExports);
+
+  return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
+}

From 1803fb02dc00900ddf1b735060cf41bfbec1d286 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 25 May 2025 12:19:04 +0200
Subject: [PATCH 002/130] continue prototype

---
 .gitignore                                    |   2 +-
 code/addons/vitest/src/vitest-plugin/index.ts |   2 +
 .../builder-vite/src/plugins/index.ts         |   1 +
 .../src/plugins/test-fn-plugin.ts             |  24 +++
 code/builders/builder-vite/src/vite-config.ts |   3 +-
 code/builders/builder-webpack5/package.json   |   8 +-
 .../src/loaders/test-fn-loader.ts             |  34 ++++
 .../src/preview/iframe-webpack.config.ts      |  10 ++
 .../components/test-fn.stories.tsx            |  27 +++
 code/core/src/csf-tools/CsfFile.ts            | 101 ++++++++++-
 code/core/src/csf-tools/storyIndexer.test.ts  |  60 +++++++
 .../csf-tools/test-syntax/transformer.test.ts |  67 ++++----
 .../src/csf-tools/test-syntax/transformer.ts  | 158 +++++++-----------
 code/core/src/csf/csf-factories.ts            |   6 +
 code/core/src/shared/preview/csf4.ts          |  30 +++-
 code/core/src/types/modules/indexer.ts        |   1 +
 .../react/template/stories/preview.ts         |   4 +
 .../template/stories/test-fn.stories.tsx      |  27 +++
 18 files changed, 421 insertions(+), 144 deletions(-)
 create mode 100644 code/builders/builder-vite/src/plugins/test-fn-plugin.ts
 create mode 100644 code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
 create mode 100644 code/core/src/component-testing/components/test-fn.stories.tsx
 create mode 100644 code/core/src/csf-tools/storyIndexer.test.ts
 create mode 100644 code/renderers/react/template/stories/preview.ts
 create mode 100644 code/renderers/react/template/stories/test-fn.stories.tsx

diff --git a/.gitignore b/.gitignore
index 9bf3c7eb5332..d9481a41fbb1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,7 +57,7 @@ code/bench-results/
 /packs
 code/.nx/cache
 code/.nx/workspace-data
-code/.vite-inspect
+.vite-inspect
 .nx/cache
 .nx/workspace-data
 !**/fixtures/**/yarn.lock
diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index 0cc23041db86..d6f676621c0f 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -27,6 +27,7 @@ import picocolors from 'picocolors';
 import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
+import { storybookTestFn } from '../../../../builders/builder-vite/src/plugins/test-fn-plugin';
 // ! Relative import to prebundle it without needing to depend on the Vite builder
 import { withoutVitePlugins } from '../../../../builders/builder-vite/src/utils/without-vite-plugins';
 import type { InternalOptions, UserOptions } from './types';
@@ -401,6 +402,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     },
   };
 
+  plugins.push(await storybookTestFn());
   plugins.push(storybookTestPlugin);
 
   // When running tests via the Storybook UI, we need
diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts
index bc72dc8755d5..97d9b04b8bae 100644
--- a/code/builders/builder-vite/src/plugins/index.ts
+++ b/code/builders/builder-vite/src/plugins/index.ts
@@ -2,5 +2,6 @@ export * from './inject-export-order-plugin';
 export * from './strip-story-hmr-boundaries';
 export * from './code-generator-plugin';
 export * from './csf-plugin';
+export * from './test-fn-plugin';
 export * from './external-globals-plugin';
 export * from './webpack-stats-plugin';
diff --git a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
new file mode 100644
index 000000000000..7aa8f2d06bb9
--- /dev/null
+++ b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
@@ -0,0 +1,24 @@
+import { testTransform } from 'storybook/internal/csf-tools';
+
+import type { Plugin } from 'vite';
+
+/** This transforms the test function of a story into another story */
+export async function storybookTestFn(): Promise<Plugin> {
+  const storiesRegex = /\.stories\.(tsx?|jsx?|svelte|vue)$/;
+
+  return {
+    name: 'storybook:test-function',
+    enforce: 'pre',
+    async transform(src, id) {
+      if (!storiesRegex.test(id)) {
+        return undefined;
+      }
+
+      const result = await testTransform({
+        code: src,
+        fileName: id,
+      });
+      return result;
+    },
+  };
+}
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index 147f6419dac9..da8d15948181 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -25,6 +25,7 @@ import {
   pluginWebpackStats,
   stripStoryHMRBoundary,
 } from './plugins';
+import { storybookTestFn } from './plugins/test-fn-plugin';
 import type { BuilderOptions } from './types';
 
 export type PluginConfigType = 'build' | 'development';
@@ -85,7 +86,6 @@ export async function commonConfig(
 }
 
 export async function pluginConfig(options: Options) {
-  const frameworkName = await getFrameworkName(options);
   const build = await options.presets.apply('build');
 
   const externals: Record<string, string> = globalsNameReferenceMap;
@@ -99,6 +99,7 @@ export async function pluginConfig(options: Options) {
     await csfPlugin(options),
     await injectExportOrderPlugin(),
     await stripStoryHMRBoundary(),
+    await storybookTestFn(),
     {
       name: 'storybook:allow-storybook-dir',
       enforce: 'post',
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 171f66d93eed..a69781b9028d 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -41,6 +41,11 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
+    "./loaders/test-fn-loader": {
+      "types": "./dist/loaders/test-fn-loader.d.ts",
+      "node": "./dist/loaders/test-fn-loader.js",
+      "require": "./dist/loaders/test-fn-loader.js"
+    },
     "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
@@ -104,7 +109,8 @@
       "./src/index.ts",
       "./src/presets/custom-webpack-preset.ts",
       "./src/presets/preview-preset.ts",
-      "./src/loaders/export-order-loader.ts"
+      "./src/loaders/export-order-loader.ts",
+      "./src/loaders/test-fn-loader.ts"
     ],
     "platform": "node"
   },
diff --git a/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts b/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
new file mode 100644
index 000000000000..523cafce14b7
--- /dev/null
+++ b/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
@@ -0,0 +1,34 @@
+import { testTransform } from 'storybook/internal/csf-tools';
+
+import type { LoaderContext } from 'webpack';
+
+/** This transforms the test function of a story into another story */
+export default async function loader(
+  this: LoaderContext<any>,
+  source: string,
+  map: any,
+  meta: any
+) {
+  const callback = this.async();
+  const storiesRegex = /\.stories\.(tsx?|jsx?|svelte|vue)$/;
+
+  try {
+    // Only process story files
+    if (!storiesRegex.test(this.resourcePath)) {
+      return callback(null, source, map, meta);
+    }
+
+    const result = await testTransform({
+      code: source,
+      fileName: this.resourcePath,
+    });
+
+    // Handle both string and GeneratorResult types
+    const transformedCode = typeof result === 'string' ? result : result.code;
+
+    return callback(null, transformedCode, map, meta);
+  } catch (err) {
+    // If transformation fails, return original source
+    return callback(null, source, map, meta);
+  }
+}
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 545fa159695f..805b4f623f8c 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -218,6 +218,16 @@ export default async (
             },
           ],
         },
+        {
+          test: /\.stories\.(tsx?|jsx?|svelte|vue)$/,
+          exclude: /node_modules/,
+          enforce: 'post',
+          use: [
+            {
+              loader: require.resolve('@storybook/builder-webpack5/loaders/test-fn-loader'),
+            },
+          ],
+        },
         {
           test: /\.m?js$/,
           type: 'javascript/auto',
diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
new file mode 100644
index 000000000000..4c62680e87f1
--- /dev/null
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { expect, fn } from 'storybook/test';
+
+import preview from '../../../../.storybook/preview';
+
+const Button = (args: React.ComponentProps<'button'>) => <button {...args} />;
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    children: 'Default',
+    onClick: fn(),
+  },
+  tags: ['some-tag'],
+});
+
+export const Default = meta.story({});
+Default.test('Exists in the dom', async ({ canvas }) => {
+  const button = canvas.getByText('Default');
+  await expect(button).toBeInTheDocument();
+});
+Default.test('onClick is called', async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Default');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+});
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index d2a2965b5cea..e402432933cf 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -277,6 +277,17 @@ export class CsfFile {
 
   imports: string[];
 
+  _storyTests: Record<
+    string,
+    Array<{
+      node: t.Node;
+      function: t.FunctionExpression | t.ArrowFunctionExpression;
+      name: string;
+      id: string;
+      options: any;
+    }>
+  > = {};
+
   constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
     this._ast = ast;
     this._file = file;
@@ -671,6 +682,39 @@ export class CsfFile {
               story.name = storyName;
             }
           }
+          // B.test('foo', () => {}, options)
+          if (
+            t.isCallExpression(expression) &&
+            t.isMemberExpression(expression.callee) &&
+            t.isIdentifier(expression.callee.object) &&
+            t.isIdentifier(expression.callee.property) &&
+            expression.callee.property.name === 'test' &&
+            expression.arguments.length >= 2 &&
+            t.isStringLiteral(expression.arguments[0]) &&
+            (t.isFunctionExpression(expression.arguments[1]) ||
+              t.isArrowFunctionExpression(expression.arguments[1]))
+          ) {
+            const exportName = expression.callee.object.name;
+            const testName = expression.arguments[0].value;
+            const testFunction = expression.arguments[1];
+            const testOptions = expression.arguments[2] || null;
+
+            if (!self._storyTests[exportName]) {
+              self._storyTests[exportName] = [];
+            }
+
+            self._storyTests[exportName].push({
+              function: testFunction,
+              name: testName,
+              options: testOptions,
+              node: expression,
+              // can't set id because meta title isn't available yet
+              // so it's set later on
+              id: '',
+            });
+
+            self._stories[exportName].__stats.tests = true;
+          }
         },
       },
       CallExpression: {
@@ -695,9 +739,18 @@ export class CsfFile {
             const configParent = configCandidate?.path?.parentPath?.node;
             if (t.isImportDeclaration(configParent)) {
               if (isValidPreviewPath(configParent.source.value)) {
-                const metaNode = node.arguments[0] as t.ObjectExpression;
-                self._metaVariableName = callee.property.name;
                 self._metaIsFactory = true;
+                const metaDeclarator = path.findParent((p) =>
+                  p.isVariableDeclarator()
+                ) as NodePath<t.VariableDeclarator>;
+
+                // find the name of the meta variable declaration
+                // e.g. const foo = preview.meta({ ... });
+                // otherwise fallback to meta
+                self._metaVariableName = t.isIdentifier(metaDeclarator.node.id)
+                  ? metaDeclarator.node.id.name
+                  : callee.property.name;
+                const metaNode = node.arguments[0] as t.ObjectExpression;
                 self._parseMeta(metaNode, self._ast.program);
               } else {
                 throw new BadMetaError(
@@ -762,10 +815,12 @@ export class CsfFile {
           acc[key].tags = [...(acc[key].tags || []), 'play-fn'];
         }
         const stats = acc[key].__stats;
-        ['play', 'render', 'loaders', 'beforeEach', 'globals', 'tags'].forEach((annotation) => {
-          stats[annotation as keyof IndexInputStats] =
-            !!storyAnnotations[annotation] || !!self._metaAnnotations[annotation];
-        });
+        ['play', 'render', 'loaders', 'beforeEach', 'globals', 'tags', 'test'].forEach(
+          (annotation) => {
+            stats[annotation as keyof IndexInputStats] =
+              !!storyAnnotations[annotation] || !!self._metaAnnotations[annotation];
+          }
+        );
         const storyExport = self.getStoryExport(key);
         stats.storyFn = !!(
           t.isArrowFunctionExpression(storyExport) || t.isFunctionDeclaration(storyExport)
@@ -773,6 +828,13 @@ export class CsfFile {
         stats.mount = hasMount(storyAnnotations.play ?? self._metaAnnotations.play);
         stats.moduleMock = !!self.imports.find((fname) => isModuleMock(fname));
 
+        if (self._storyTests[key]) {
+          self._storyTests[key].forEach((test) => {
+            const testStoryName = `${story.name}: ${test.name}`;
+            test.id = toId((self._meta?.id || self._meta?.title) as string, testStoryName);
+          });
+        }
+
         return acc;
       },
       {} as Record<string, StaticStory>
@@ -821,10 +883,12 @@ export class CsfFile {
       );
     }
 
-    return Object.entries(this._stories).map(([exportName, story]) => {
+    const index: IndexInput[] = [];
+
+    Object.entries(this._stories).map(([exportName, story]) => {
       // don't remove any duplicates or negations -- tags will be combined in the index
       const tags = [...(this._meta?.tags ?? []), ...(story.tags ?? [])];
-      return {
+      index.push({
         type: 'story',
         importPath: fileName,
         rawComponentPath: this._rawComponentPath,
@@ -835,8 +899,27 @@ export class CsfFile {
         tags,
         __id: story.id,
         __stats: story.__stats,
-      };
+      });
+
+      if (this._storyTests[exportName]) {
+        this._storyTests[exportName].forEach((test) => {
+          index.push({
+            type: 'story', // perhaps this becomes type 'test'?
+            importPath: fileName,
+            rawComponentPath: this._rawComponentPath,
+            exportName,
+            name: `${story.name}: ${test.name}`,
+            title: this.meta?.title,
+            metaId: this.meta?.id,
+            tags: [...tags, 'test-fn'],
+            __id: test.id,
+            __stats: story.__stats,
+          });
+        });
+      }
     });
+
+    return index;
   }
 }
 
diff --git a/code/core/src/csf-tools/storyIndexer.test.ts b/code/core/src/csf-tools/storyIndexer.test.ts
new file mode 100644
index 000000000000..34873ff8c9d0
--- /dev/null
+++ b/code/core/src/csf-tools/storyIndexer.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { loadCsf } from './CsfFile';
+
+const getIndex = (code: string) => {
+  const inputs = loadCsf(code, { makeTitle: () => 'title', fileName: 'a.stories.ts' }).parse()
+    .indexInputs;
+
+  return {
+    raw: inputs,
+    entries: inputs.map((i) => i.name),
+  };
+};
+
+describe('test fn', () => {
+  it('indexes CSF v1 to v3 stories', () => {
+    const { entries } = getIndex(
+      `
+          export default { component: 'foo' };
+          export const CSF1 = () => 'foo';
+          export const CSF2 = (args) => 'foo';
+          export const CSF3 = {};
+          export const CustomName = {
+            name: 'Custom name',
+          };
+        `
+    );
+    expect(entries).toMatchInlineSnapshot(`
+      [
+        "CSF 1",
+        "CSF 2",
+        "CSF 3",
+        "Custom name",
+      ]
+    `);
+  });
+
+  it.only('indexes test functions', () => {
+    const { entries } = getIndex(
+      `
+          import { config } from '#.storybook/preview'
+          const meta = config.meta({ component: 'foo' });
+          export const A = meta.story({})
+          A.test('first one', () => {})
+          A.test('Second one', () => {})
+          export const B = meta.story({})
+          B.test('first one', () => {})
+        `
+    );
+    expect(entries).toMatchInlineSnapshot(`
+      [
+        "A",
+        "A: first one",
+        "A: Second one",
+        "B",
+        "B: first one",
+      ]
+    `);
+  });
+});
diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
index 45abf7c8142f..44012fa25887 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.test.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.test.ts
@@ -15,17 +15,10 @@ expect.addSnapshotSerializer({
   test: (val) => true,
 });
 
-const transform = async ({
-  code = '',
-  fileName = 'src/components/Button.stories.js',
-  configDir = '.storybook',
-  stories = [],
-}) => {
+const transform = async ({ code = '', fileName = 'src/components/Button.stories.js' }) => {
   const transformed = await originalTransform({
     code,
     fileName,
-    configDir,
-    stories,
   });
   if (typeof transformed === 'string') {
     return { code: transformed, map: null };
@@ -38,53 +31,67 @@ describe('transformer', () => {
   describe('test syntax', () => {
     it('should add test statement to const declared exported stories', async () => {
       const code = `
-        import { config } from '#.storybook/preview';
-        const meta = config.meta({ component: Button });
+        import preview from '#.storybook/preview';
+        const meta = preview.meta({ component: Button });
         export const Primary = meta.story({ 
           args: {
             label: 'Primary Button',
           }
         });
         
-        Primary.test('some test name here', () => {
+        Primary.test('just a log', () => {
           console.log('test');
         });
-        Primary.test('something else here too', () => {
-          console.log('test');
+        Primary.test('using context', (context) => {
+          const button = context.canvas.getByRole('button');
+        });
+        Primary.test('destructuring context', async ({ canvas }) => {
+          const button = await canvas.findByRole('button');
         });
       `;
 
       const result = await transform({ code });
 
       expect(result.code).toMatchInlineSnapshot(`
-        import { config } from '#.storybook/preview';
-        const meta = config.meta({
-          component: Button,
-          title: "automatic/calculated/title"
+        import preview from '#.storybook/preview';
+        const meta = preview.meta({
+          component: Button
         });
         export const Primary = meta.story({
           args: {
             label: 'Primary Button'
           }
         });
-        export const _test = {
-          ...Primary,
-          tags: [...Primary?.tags, "test-fn"],
+        export const PrimaryJustALog = meta.story({
+          ...Primary.composed,
+          tags: ["test-fn"],
           play: async context => {
-            await (Primary?.play)();
+            await Primary.play(context);
             console.log('test');
           },
-          storyName: "Primary: some test name here"
-        };
-        export const _test2 = {
-          ...Primary,
-          tags: [...Primary?.tags, "test-fn"],
+          name: "Primary: just a log"
+        });
+        export const PrimaryUsingContext = meta.story({
+          ...Primary.composed,
+          tags: ["test-fn"],
           play: async context => {
-            await (Primary?.play)();
-            console.log('test');
+            await Primary.play(context);
+            const button = context.canvas.getByRole('button');
           },
-          storyName: "Primary: something else here too"
-        };
+          name: "Primary: using context"
+        });
+        export const PrimaryDestructuringContext = meta.story({
+          ...Primary.composed,
+          tags: ["test-fn"],
+          play: async context => {
+            await Primary.play(context);
+            const {
+              canvas
+            } = context;
+            const button = await canvas.findByRole('button');
+          },
+          name: "Primary: destructuring context"
+        });
       `);
     });
   });
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
index a8f16e71aad2..2c2f4e5b93ca 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.ts
@@ -1,24 +1,22 @@
-/* eslint-disable local-rules/no-uncategorized-errors */
 import { types as t } from 'storybook/internal/babel';
-import { getStoryTitle } from 'storybook/internal/common';
-import type { StoriesEntry } from 'storybook/internal/types';
-
-import { dedent } from 'ts-dedent';
 
 import { formatCsf, loadCsf } from '../CsfFile';
 
-const logger = console;
+function toPascalCase(text: string): string {
+  return text
+    .replace(/[^a-zA-Z0-9\s]/g, ' ')
+    .split(/\s+/)
+    .filter((word) => word.length > 0)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+}
 
 export async function testTransform({
   code,
   fileName,
-  configDir,
-  stories,
 }: {
   code: string;
   fileName: string;
-  configDir: string;
-  stories: StoriesEntry[];
 }): Promise<ReturnType<typeof formatCsf>> {
   const isStoryFile = /\.stor(y|ies)\./.test(fileName);
   if (!isStoryFile) {
@@ -28,60 +26,16 @@ export async function testTransform({
   const parsed = loadCsf(code, {
     fileName,
     transformInlineMeta: true,
-    makeTitle: (title) => {
-      const result =
-        getStoryTitle({
-          storyFilePath: fileName,
-          configDir,
-          stories,
-          userTitle: title,
-        }) || 'unknown';
-
-      if (result === 'unknown') {
-        logger.warn(
-          dedent`
-            [Storybook]: Could not calculate story title for "${fileName}".
-            Please make sure that this file matches the globs included in the "stories" field in your Storybook configuration at "${configDir}".
-          `
-        );
-      }
-      return result;
-    },
+    makeTitle: (title) => title || 'unknown',
   }).parse();
 
   const ast = parsed._ast;
 
-  const metaNode = parsed._metaNode as t.ObjectExpression;
+  const metaExportName = parsed._metaVariableName ?? 'meta';
 
-  const metaTitleProperty = metaNode.properties.find(
-    (prop) => t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === 'title'
-  );
-
-  const metaTitle = t.stringLiteral(parsed._meta?.title || 'unknown');
-  if (!metaTitleProperty) {
-    metaNode.properties.push(t.objectProperty(t.identifier('title'), metaTitle));
-  } else if (t.isObjectProperty(metaTitleProperty)) {
-    // If the title is present in meta, overwrite it because autotitle can still affect existing titles
-    metaTitleProperty.value = metaTitle;
-  }
-
-  if (!metaNode || !parsed._meta) {
-    throw new Error(
-      'Storybook could not detect the meta (default export) object in the story file. \n\nPlease make sure you have a default export with the meta object. If you are using a different export format that is not supported, please file an issue with details about your use case.'
-    );
-  }
-
-  // Generate new story exports from tests attached to stories
-  const newExports: t.ExportNamedDeclaration[] = [];
-  let testCounter = 1;
-
-  // Track nodes to remove from the AST
-  const nodesToRemove: t.Node[] = [];
-
-  // Process each story to find attached tests
+  // Generate new story exports from tests attached to stories by replacing test calls in place
   Object.entries(parsed._stories).forEach(([storyExportName, storyInfo]) => {
-    // Find all test calls on this story in the AST
-    ast.program.body.forEach((node) => {
+    ast.program.body.forEach((node, index) => {
       if (!t.isExpressionStatement(node)) {
         return;
       }
@@ -94,41 +48,40 @@ export async function testTransform({
 
       const { callee, arguments: args } = expression;
 
-      // Check if it's a call like StoryName.test()
-      if (
+      const isStoryTest =
         t.isMemberExpression(callee) &&
         t.isIdentifier(callee.object) &&
         callee.object.name === storyExportName &&
         t.isIdentifier(callee.property) &&
-        callee.property.name === 'test' &&
-        args.length >= 2 &&
-        t.isStringLiteral(args[0]) &&
-        (t.isFunctionExpression(args[1]) || t.isArrowFunctionExpression(args[1]))
-      ) {
+        callee.property.name === 'test';
+
+      if (isStoryTest) {
         // Get test name and body
         const testName = (args[0] as t.StringLiteral).value;
         const testFunction = args[1] as t.FunctionExpression | t.ArrowFunctionExpression;
 
-        // Create unique export name for the test story
-        const testExportName = `_test${testCounter > 1 ? testCounter : ''}`;
-        testCounter++;
+        // Create export name from story name + test name
+        // e.g. Primary.test('exists in the dom', ...) -> "PrimaryExistsInTheDom"
+        const testExportName = toPascalCase(`${storyExportName} ${testName}`);
 
         // Create a new story object with the test function integrated as play function
         const newStoryObject = t.objectExpression([
-          t.spreadElement(t.identifier(storyExportName)),
-          // Add tags property that preserves existing tags and adds 'test-fn'
+          t.spreadElement(
+            t.memberExpression(t.identifier(storyExportName), t.identifier('composed'))
+          ),
+          // Add 'test-fn' tag
           t.objectProperty(
             t.identifier('tags'),
             t.arrayExpression([
-              // Spread existing tags if they exist
-              t.spreadElement(
-                t.optionalMemberExpression(
-                  t.identifier(storyExportName),
-                  t.identifier('tags'),
-                  false,
-                  true
-                )
-              ),
+              // TODO: Tags can't be spread as they have to be statically analyzable
+              // This is not a problem because tags are added by the indexer, but
+              // for portable stories (ran via the CLI) it will likely be a problem
+              // t.spreadElement(
+              //   t.memberExpression(
+              //     t.memberExpression(t.identifier(storyExportName), t.identifier('composed')),
+              //     t.identifier('tags')
+              //   )
+              // ),
               // Add the test-fn tag
               t.stringLiteral('test-fn'),
             ])
@@ -138,21 +91,27 @@ export async function testTransform({
             t.arrowFunctionExpression(
               [t.identifier('context')],
               t.blockStatement([
-                // Add code to call the original story's play function if it exists
+                // Reuse original story's play function
                 t.expressionStatement(
                   t.awaitExpression(
                     t.callExpression(
-                      t.optionalMemberExpression(
-                        t.identifier(storyExportName),
-                        t.identifier('play'),
-                        false,
-                        true
-                      ),
-                      []
+                      t.memberExpression(t.identifier(storyExportName), t.identifier('play')),
+                      [t.identifier('context')]
                     )
                   )
                 ),
-                // Then add the test function body
+                // handle cases where the context is destructured in the play function
+                ...(testFunction.params.length > 0 && t.isObjectPattern(testFunction.params[0])
+                  ? [
+                      t.variableDeclaration('const', [
+                        t.variableDeclarator(
+                          testFunction.params[0] as t.ObjectPattern,
+                          t.identifier('context')
+                        ),
+                      ]),
+                    ]
+                  : []),
+                // add the body of the test function
                 ...(t.isBlockStatement(testFunction.body)
                   ? testFunction.body.body
                   : [t.expressionStatement(testFunction.body)]),
@@ -161,7 +120,7 @@ export async function testTransform({
             )
           ),
           t.objectProperty(
-            t.identifier('storyName'),
+            t.identifier('name'),
             t.stringLiteral(`${storyInfo.name || storyExportName}: ${testName}`)
           ),
         ]);
@@ -169,24 +128,25 @@ export async function testTransform({
         // Create export statement
         const exportDeclaration = t.exportNamedDeclaration(
           t.variableDeclaration('const', [
-            t.variableDeclarator(t.identifier(testExportName), newStoryObject),
+            t.variableDeclarator(
+              t.identifier(testExportName),
+              t.callExpression(
+                t.memberExpression(t.identifier(metaExportName), t.identifier('story')),
+                [newStoryObject]
+              )
+            ),
           ]),
           []
         );
 
-        newExports.push(exportDeclaration);
+        // Preserve source map location from original test call
+        exportDeclaration.loc = node.loc;
 
-        // Mark the original test call for removal
-        nodesToRemove.push(node);
+        // Replace the original test call with the new export in place
+        ast.program.body[index] = exportDeclaration;
       }
     });
   });
 
-  // Remove the test calls from the AST
-  ast.program.body = ast.program.body.filter((node) => !nodesToRemove.includes(node));
-
-  // Add new exports to the AST
-  ast.program.body.push(...newExports);
-
   return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
 }
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index f3f9072b9ef2..0bc1315ef983 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -4,9 +4,11 @@ import type {
   NormalizedComponentAnnotations,
   NormalizedProjectAnnotations,
   NormalizedStoryAnnotations,
+  PlayFunction,
   ProjectAnnotations,
   Renderer,
   StoryAnnotations,
+  StoryContext,
 } from 'storybook/internal/types';
 
 export interface Preview<TRenderer extends Renderer = Renderer> {
@@ -39,6 +41,10 @@ export interface Story<TRenderer extends Renderer, TArgs extends Args = Args> {
   input: StoryAnnotations<TRenderer, TArgs>;
   composed: NormalizedStoryAnnotations<TRenderer>;
   meta: Meta<TRenderer, TArgs>;
+  play: PlayFunction<TRenderer, TArgs>;
+  run: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  // TODO: perhaps it should have a different type than PlayFunction
+  test: (name: string, fn: PlayFunction<TRenderer, TArgs>, options?: any) => void;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
diff --git a/code/core/src/shared/preview/csf4.ts b/code/core/src/shared/preview/csf4.ts
index 120a5f106054..57acbc462107 100644
--- a/code/core/src/shared/preview/csf4.ts
+++ b/code/core/src/shared/preview/csf4.ts
@@ -6,10 +6,15 @@ import type {
   Story,
   StoryAnnotations,
 } from 'storybook/internal/csf';
-import type { NormalizedProjectAnnotations } from 'storybook/internal/types';
+import type {
+  ComposedStoryFn,
+  NormalizedProjectAnnotations,
+  NormalizedStoryAnnotations,
+} from 'storybook/internal/types';
 
 import {
   composeConfigs,
+  composeStory,
   getCoreAnnotations,
   normalizeProjectAnnotations,
 } from 'storybook/preview-api';
@@ -61,12 +66,31 @@ function defineStory<TRenderer extends Renderer>(
   input: ComponentAnnotations<TRenderer>,
   meta: Meta<TRenderer>
 ): Story<TRenderer> {
+  let composed: ComposedStoryFn<TRenderer>;
+
+  const compose = () => {
+    if (!composed) {
+      composed = composeStory(input, meta.input, meta.preview.composed);
+    }
+    return composed;
+  };
+
   return {
     _tag: 'Story',
     input,
     meta,
-    get composed(): never {
-      throw new Error('Not implemented');
+    get composed() {
+      return compose() as unknown as NormalizedStoryAnnotations<TRenderer>;
+    },
+    get play() {
+      return composed.play ?? (async () => {});
+    },
+    get run() {
+      return compose().run || (async () => {});
+    },
+    test(name: string, fn) {
+      // TODO: figure this out later
+      return fn(composed as any);
     },
   };
 }
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index 4dd7fd9a2db7..554f96164a1c 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -85,6 +85,7 @@ export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
 export interface IndexInputStats {
   loaders?: boolean;
   play?: boolean;
+  tests?: boolean;
   render?: boolean;
   storyFn?: boolean;
   mount?: boolean;
diff --git a/code/renderers/react/template/stories/preview.ts b/code/renderers/react/template/stories/preview.ts
new file mode 100644
index 000000000000..d5ef47ac5113
--- /dev/null
+++ b/code/renderers/react/template/stories/preview.ts
@@ -0,0 +1,4 @@
+import { __definePreview } from '@storybook/react';
+
+// This file is used for CSF4 stories
+export default __definePreview({});
diff --git a/code/renderers/react/template/stories/test-fn.stories.tsx b/code/renderers/react/template/stories/test-fn.stories.tsx
new file mode 100644
index 000000000000..5474d1faa879
--- /dev/null
+++ b/code/renderers/react/template/stories/test-fn.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { expect, fn } from 'storybook/test';
+
+import preview from './preview';
+
+const Button = (args: React.ComponentProps<'button'>) => <button {...args} />;
+
+const meta = preview.meta({
+  component: Button,
+  args: {
+    children: 'Default',
+    onClick: fn(),
+  },
+  tags: ['some-tag'],
+});
+
+export const Default = meta.story({});
+Default.test('Exists in the dom', async ({ canvas }) => {
+  const button = canvas.getByText('Default');
+  await expect(button).toBeInTheDocument();
+});
+Default.test('onClick is called', async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Default');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+});

From 78abf6913ee837a8833251a996f25b88631a8764 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 25 May 2025 12:44:36 +0200
Subject: [PATCH 003/130] fixes

---
 code/builders/builder-vite/src/plugins/test-fn-plugin.ts    | 2 +-
 code/core/src/core-server/utils/StoryIndexGenerator.test.ts | 3 +++
 code/core/src/csf-tools/storyIndexer.test.ts                | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
index 7aa8f2d06bb9..788e6582086c 100644
--- a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
@@ -8,7 +8,7 @@ export async function storybookTestFn(): Promise<Plugin> {
 
   return {
     name: 'storybook:test-function',
-    enforce: 'pre',
+    enforce: 'post',
     async transform(src, id) {
       if (!storiesRegex.test(id)) {
         return undefined;
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index 29de5cb28546..17236b274124 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -102,6 +102,7 @@ describe('StoryIndexGenerator', () => {
             "render": 0,
             "storyFn": 0,
             "tags": 1,
+            "test": 0,
           }
         `);
       });
@@ -550,6 +551,7 @@ describe('StoryIndexGenerator', () => {
             "render": 1,
             "storyFn": 1,
             "tags": 5,
+            "test": 0,
           }
         `);
       });
@@ -830,6 +832,7 @@ describe('StoryIndexGenerator', () => {
             "render": 1,
             "storyFn": 1,
             "tags": 5,
+            "test": 0,
           }
         `);
       });
diff --git a/code/core/src/csf-tools/storyIndexer.test.ts b/code/core/src/csf-tools/storyIndexer.test.ts
index 34873ff8c9d0..08fc869f5958 100644
--- a/code/core/src/csf-tools/storyIndexer.test.ts
+++ b/code/core/src/csf-tools/storyIndexer.test.ts
@@ -35,7 +35,7 @@ describe('test fn', () => {
     `);
   });
 
-  it.only('indexes test functions', () => {
+  it('indexes test functions', () => {
     const { entries } = getIndex(
       `
           import { config } from '#.storybook/preview'

From c2ecdb5ea71ac520ac31e340b1098affa824b98a Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 25 May 2025 14:21:50 +0200
Subject: [PATCH 004/130] do not apply loader/plugin to svelte files

---
 .../src/plugins/test-fn-plugin.ts             |  2 +-
 .../src/loaders/test-fn-loader.ts             |  2 +-
 .../src/preview/iframe-webpack.config.ts      |  2 +-
 code/core/src/csf-tools/CsfFile.test.ts       | 74 +++++++++++++++++++
 4 files changed, 77 insertions(+), 3 deletions(-)

diff --git a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
index 788e6582086c..9aea7f73a160 100644
--- a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
@@ -4,7 +4,7 @@ import type { Plugin } from 'vite';
 
 /** This transforms the test function of a story into another story */
 export async function storybookTestFn(): Promise<Plugin> {
-  const storiesRegex = /\.stories\.(tsx?|jsx?|svelte|vue)$/;
+  const storiesRegex = /\.stories\.(tsx?|jsx?)$/;
 
   return {
     name: 'storybook:test-function',
diff --git a/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts b/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
index 523cafce14b7..4dd852a7ec84 100644
--- a/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
@@ -10,7 +10,7 @@ export default async function loader(
   meta: any
 ) {
   const callback = this.async();
-  const storiesRegex = /\.stories\.(tsx?|jsx?|svelte|vue)$/;
+  const storiesRegex = /\.stories\.(tsx?|jsx?)$/;
 
   try {
     // Only process story files
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 805b4f623f8c..692c5d7c4bc3 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -219,7 +219,7 @@ export default async (
           ],
         },
         {
-          test: /\.stories\.(tsx?|jsx?|svelte|vue)$/,
+          test: /\.stories\.(tsx?|jsx?)$/,
           exclude: /node_modules/,
           enforce: 'post',
           use: [
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 9a864e6ae79e..1e63d81e9ce9 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -92,6 +92,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -107,6 +108,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -139,6 +141,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -172,6 +175,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -203,6 +207,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -232,6 +237,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -262,6 +268,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -275,6 +282,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -305,6 +313,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -318,6 +327,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -348,6 +358,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -361,6 +372,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -392,6 +404,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -405,6 +418,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -440,6 +454,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -456,6 +471,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -491,6 +507,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -507,6 +524,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -539,6 +557,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -552,6 +571,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -584,6 +604,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -597,6 +618,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -627,6 +649,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -640,6 +663,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -674,6 +698,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -707,6 +732,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -741,6 +767,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -780,6 +807,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -814,6 +842,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -830,6 +859,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -859,6 +889,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -872,6 +903,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -906,6 +938,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -922,6 +955,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -957,6 +991,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1039,6 +1074,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1052,6 +1088,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1107,6 +1144,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1120,6 +1158,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1199,6 +1238,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1233,6 +1273,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1265,6 +1306,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1299,6 +1341,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1382,6 +1425,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1417,6 +1461,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1459,6 +1504,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1496,6 +1542,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1558,6 +1605,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1595,6 +1643,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1628,6 +1677,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1660,6 +1710,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1695,6 +1746,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1730,6 +1782,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1764,6 +1817,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
+              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1816,6 +1870,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1838,6 +1893,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1878,6 +1934,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1923,6 +1980,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1983,6 +2041,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2022,6 +2081,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2061,6 +2121,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2100,6 +2161,7 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
+            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2132,6 +2194,7 @@ describe('CsfFile', () => {
               beforeEach: true
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -2164,6 +2227,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: true
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -2195,6 +2259,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: true
@@ -2223,6 +2288,7 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
+              test: false
               storyFn: false
               mount: false
               moduleMock: true
@@ -2257,6 +2323,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2270,6 +2337,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2300,6 +2368,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2332,6 +2401,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2345,6 +2415,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2375,6 +2446,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2410,6 +2482,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2445,6 +2518,7 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
+                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false

From af298b533c30eea884917f8e38ac7fab2262d297 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Sun, 25 May 2025 14:49:53 +0200
Subject: [PATCH 005/130] no-op on non csf-factories

---
 .../src/csf-tools/test-syntax/transformer.test.ts | 15 +++++++++++++++
 .../core/src/csf-tools/test-syntax/transformer.ts |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
index 44012fa25887..ff67e866971d 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.test.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.test.ts
@@ -1,5 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 
+import dedent from 'ts-dedent';
+
 import { testTransform as originalTransform } from './transformer';
 
 vi.mock('storybook/internal/common', async (importOriginal) => {
@@ -29,6 +31,19 @@ const transform = async ({ code = '', fileName = 'src/components/Button.stories.
 
 describe('transformer', () => {
   describe('test syntax', () => {
+    it('should no-op in non-CSF4 stories', async () => {
+      const code = dedent`
+        export default {};
+        export const Primary = {};
+      `;
+
+      const result = await transform({ code });
+
+      expect(result.code).toMatchInlineSnapshot(`
+        export default {};
+        export const Primary = {};
+      `);
+    });
     it('should add test statement to const declared exported stories', async () => {
       const code = `
         import preview from '#.storybook/preview';
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
index 2c2f4e5b93ca..6e93730ba7f9 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.ts
@@ -29,6 +29,10 @@ export async function testTransform({
     makeTitle: (title) => title || 'unknown',
   }).parse();
 
+  if (!parsed._metaIsFactory) {
+    return code;
+  }
+
   const ast = parsed._ast;
 
   const metaExportName = parsed._metaVariableName ?? 'meta';

From bf576694380fee84f2efbd67f5ea7e304b624622 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 16 Jun 2025 10:32:16 +0200
Subject: [PATCH 006/130] dont throw on global settings write error, dont run
 in CI

---
 code/core/src/cli/globalSettings.test.ts      | 14 ++++++++++----
 code/core/src/cli/globalSettings.ts           | 10 ++++------
 code/core/src/server-errors.ts                | 12 ------------
 code/core/src/telemetry/storybook-metadata.ts |  4 ++--
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/code/core/src/cli/globalSettings.test.ts b/code/core/src/cli/globalSettings.test.ts
index 32f746ac4594..95060338d0b4 100644
--- a/code/core/src/cli/globalSettings.test.ts
+++ b/code/core/src/cli/globalSettings.test.ts
@@ -85,16 +85,22 @@ describe('Settings', () => {
       );
     });
 
-    it('throws error if write fails', async () => {
+    it('logs warning if write fails', async () => {
       vi.mocked(fs.writeFile).mockRejectedValue(new Error('Write error'));
 
-      await expect(settings.save()).rejects.toThrow('Unable to save global settings');
+      await expect(settings.save()).resolves.toBeUndefined();
+      expect(console.warn).toHaveBeenCalledWith(
+        'Unable to save global settings file to /test/settings.json\nReason: Write error'
+      );
     });
 
-    it('throws error if directory creation fails', async () => {
+    it('logs warning if directory creation fails', async () => {
       vi.mocked(fs.mkdir).mockRejectedValue(new Error('Directory creation error'));
 
-      await expect(settings.save()).rejects.toThrow('Unable to save global settings');
+      await expect(settings.save()).resolves.toBeUndefined();
+      expect(console.warn).toHaveBeenCalledWith(
+        'Unable to save global settings file to /test/settings.json\nReason: Directory creation error'
+      );
     });
   });
 });
diff --git a/code/core/src/cli/globalSettings.ts b/code/core/src/cli/globalSettings.ts
index 34eb6f6a990d..f72e31c6f1a7 100644
--- a/code/core/src/cli/globalSettings.ts
+++ b/code/core/src/cli/globalSettings.ts
@@ -2,10 +2,9 @@ import fs from 'node:fs/promises';
 import { homedir } from 'node:os';
 import { dirname, join } from 'node:path';
 
+import { dedent } from 'ts-dedent';
 import { z } from 'zod';
 
-import { SavingGlobalSettingsFileError } from '../server-errors';
-
 const DEFAULT_SETTINGS_PATH = join(homedir(), '.storybook', 'settings.json');
 
 const VERSION = 1;
@@ -71,10 +70,9 @@ export class Settings {
       await fs.mkdir(dirname(this.filePath), { recursive: true });
       await fs.writeFile(this.filePath, JSON.stringify(this.value, null, 2));
     } catch (err) {
-      throw new SavingGlobalSettingsFileError({
-        filePath: this.filePath,
-        error: err,
-      });
+      console.warn(dedent`
+        Unable to save global settings file to ${this.filePath}
+        ${err && `Reason: ${(err as Error).message ?? err}`}`);
     }
   }
 }
diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts
index 216df6b68503..d27d7f815abb 100644
--- a/code/core/src/server-errors.ts
+++ b/code/core/src/server-errors.ts
@@ -566,15 +566,3 @@ export class IncompatiblePostCssConfigError extends StorybookError {
     });
   }
 }
-
-export class SavingGlobalSettingsFileError extends StorybookError {
-  constructor(public data: { filePath: string; error: Error | unknown }) {
-    super({
-      category: Category.CORE_SERVER,
-      code: 1,
-      message: dedent`
-        Unable to save global settings file to ${data.filePath}
-        ${data.error && `Reason: ${data.error}`}`,
-    });
-  }
-}
diff --git a/code/core/src/telemetry/storybook-metadata.ts b/code/core/src/telemetry/storybook-metadata.ts
index 6c5b3061a37d..5b2e47b3125a 100644
--- a/code/core/src/telemetry/storybook-metadata.ts
+++ b/code/core/src/telemetry/storybook-metadata.ts
@@ -57,10 +57,10 @@ export const computeStorybookMetadata = async ({
   mainConfig?: StorybookConfig & Record<string, any>;
   configDir: string;
 }): Promise<StorybookMetadata> => {
-  const settings = await globalSettings();
+  const settings = process.env.CI === 'true' ? undefined : await globalSettings();
   const metadata: Partial<StorybookMetadata> = {
     generatedAt: new Date().getTime(),
-    userSince: settings.value.userSince,
+    userSince: settings?.value.userSince,
     hasCustomBabel: false,
     hasCustomWebpack: false,
     hasStaticDirs: false,

From c458370d86db4ab1f2874e57a0190347e645f444 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 18 Jun 2025 09:19:11 +0200
Subject: [PATCH 007/130] add more resilient utility for boolean environment
 variables

---
 code/addons/vitest/src/postinstall-logger.ts  |  4 +--
 code/addons/vitest/src/postinstall.ts         |  4 +--
 code/addons/vitest/src/vitest-plugin/index.ts | 29 +++++++++----------
 code/core/src/cli/bin/index.ts                |  7 ++---
 code/core/src/common/utils/envs.ts            | 21 ++++++++++++++
 .../src/core-server/presets/common-preset.ts  | 17 +----------
 code/core/src/core-server/stores/status.ts    |  3 +-
 .../src/core-server/stores/test-provider.ts   |  3 +-
 code/core/src/core-server/withTelemetry.ts    |  4 +--
 .../src/node-logger/logger/log-tracker.ts     |  4 ++-
 .../src/node-logger/prompts/prompt-config.ts  |  5 +++-
 code/core/src/telemetry/storybook-metadata.ts |  3 +-
 code/core/src/telemetry/telemetry.ts          |  4 ++-
 code/lib/cli-storybook/src/bin/index.ts       |  7 +++--
 .../src/codemod/csf-factories.ts              | 10 +++++--
 code/lib/cli-storybook/src/sandbox.ts         |  9 ++++--
 code/lib/create-storybook/src/bin/index.ts    | 10 +++----
 .../src/generators/baseGenerator.ts           |  6 ++--
 code/lib/create-storybook/src/initiate.ts     |  3 +-
 19 files changed, 88 insertions(+), 65 deletions(-)

diff --git a/code/addons/vitest/src/postinstall-logger.ts b/code/addons/vitest/src/postinstall-logger.ts
index 71dbd5fe045a..521a5a3a0d5a 100644
--- a/code/addons/vitest/src/postinstall-logger.ts
+++ b/code/addons/vitest/src/postinstall-logger.ts
@@ -1,7 +1,7 @@
+import { isCI } from 'storybook/internal/common';
 import { colors, logger } from 'storybook/internal/node-logger';
 
-const fancy =
-  process.platform !== 'win32' || process.env.CI || process.env.TERM === 'xterm-256color';
+const fancy = process.platform !== 'win32' || isCI || process.env.TERM === 'xterm-256color';
 
 export const step = colors.gray('›');
 export const info = colors.blue(fancy ? 'ℹ' : 'i');
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index f232c9062f99..b20d6de281da 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -8,13 +8,13 @@ import {
   extractProperFrameworkName,
   formatFileContent,
   getProjectRoot,
+  isCI,
   loadAllPresets,
   loadMainConfig,
   scanAndTransformFiles,
   serverResolve,
   transformImportFiles,
   validateFrameworkName,
-  versions,
 } from 'storybook/internal/common';
 import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import { colors, logger } from 'storybook/internal/node-logger';
@@ -71,7 +71,7 @@ export default async function postInstall(options: PostinstallOptions) {
 
   const hasCustomWebpackConfig = !!config.getFieldNode(['webpackFinal']);
 
-  const isInteractive = process.stdout.isTTY && !process.env.CI;
+  const isInteractive = process.stdout.isTTY && !isCI;
 
   if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) {
     const out =
diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index e5696bdcaf4c..18dbe4fe2ab5 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -8,6 +8,7 @@ import {
   DEFAULT_FILES_PATTERN,
   getInterpretedFile,
   normalizeStories,
+  optionalEnvToBoolean,
   resolvePathInStorybookCache,
   validateConfigurationFiles,
 } from 'storybook/internal/common';
@@ -123,7 +124,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     },
   } as InternalOptions;
 
-  if (process.env.DEBUG) {
+  if (optionalEnvToBoolean(process.env.DEBUG)) {
     finalOptions.debug = true;
   }
 
@@ -131,6 +132,10 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
   process.env.__STORYBOOK_URL__ = finalOptions.storybookUrl;
   process.env.__STORYBOOK_SCRIPT__ = finalOptions.storybookScript;
 
+  // We signal the test runner that we are not running it via Storybook
+  // 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 directories = {
     configDir: finalOptions.configDir,
     workingDir: WORKING_DIR,
@@ -210,10 +215,6 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
       //   plugin.name?.startsWith('vitest:browser')
       // )
 
-      // We signal the test runner that we are not running it via Storybook
-      // We are overriding the environment variable to 'true' if vitest runs via @storybook/addon-vitest's backend
-      const vitestStorybook = process.env.VITEST_STORYBOOK ?? 'false';
-
       const testConfig = nonMutableInputConfig.test;
       finalOptions.vitestRoot =
         testConfig?.dir || testConfig?.root || nonMutableInputConfig.root || process.cwd();
@@ -258,7 +259,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
             // To be accessed by the setup file
             __STORYBOOK_URL__: finalOptions.storybookUrl,
 
-            VITEST_STORYBOOK: vitestStorybook,
+            VITEST_STORYBOOK: isVitestStorybook ? 'true' : 'false',
             __VITEST_INCLUDE_TAGS__: finalOptions.tags.include.join(','),
             __VITEST_EXCLUDE_TAGS__: finalOptions.tags.exclude.join(','),
             __VITEST_SKIP_TAGS__: finalOptions.tags.skip.join(','),
@@ -286,9 +287,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
               getInitialGlobals: () => {
                 const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
 
-                const shouldRunA11yTests = process.env.VITEST_STORYBOOK
-                  ? (envConfig.a11y ?? false)
-                  : true;
+                const shouldRunA11yTests = isVitestStorybook ? (envConfig.a11y ?? false) : true;
 
                 return {
                   a11y: {
@@ -370,10 +369,10 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     configureVitest(context) {
       context.vitest.config.coverage.exclude.push('storybook-static');
 
-      const disableTelemetryVar =
-        process.env.STORYBOOK_DISABLE_TELEMETRY &&
-        process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false';
-      if (!core?.disableTelemetry && !disableTelemetryVar) {
+      if (
+        !core?.disableTelemetry &&
+        !optionalEnvToBoolean(process.env.STORYBOOK_DISABLE_TELEMETRY)
+      ) {
         // NOTE: we start telemetry immediately but do not wait on it. Typically it should complete
         // before the tests do. If not we may miss the event, we are OK with that.
         telemetry(
@@ -407,7 +406,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
       }
     },
     async transform(code, id) {
-      if (process.env.VITEST !== 'true') {
+      if (!optionalEnvToBoolean(process.env.VITEST)) {
         return code;
       }
 
@@ -431,7 +430,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
   // When running tests via the Storybook UI, we need
   // to find the right project to run, thus we override
   // with a unique identifier using the path to the config dir
-  if (process.env.VITEST_STORYBOOK) {
+  if (isVitestStorybook) {
     const projectName = `storybook:${normalize(finalOptions.configDir)}`;
     plugins.push({
       name: 'storybook:workspace-name-override',
diff --git a/code/core/src/cli/bin/index.ts b/code/core/src/cli/bin/index.ts
index 533108bd8a83..6613e80ef6a3 100644
--- a/code/core/src/cli/bin/index.ts
+++ b/code/core/src/cli/bin/index.ts
@@ -1,4 +1,4 @@
-import { getEnvConfig, parseList } from 'storybook/internal/common';
+import { getEnvConfig, optionalEnvToBoolean, parseList } from 'storybook/internal/common';
 import { logTracker, logger } from 'storybook/internal/node-logger';
 import { addToGlobalContext } from 'storybook/internal/telemetry';
 
@@ -22,8 +22,7 @@ const command = (name: string) =>
     .option(
       '--disable-telemetry',
       'Disable sending telemetry data',
-      // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
-      process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+      optionalEnvToBoolean(process.env.STORYBOOK_DISABLE_TELEMETRY)
     )
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data')
@@ -151,7 +150,7 @@ command('build')
     await build({
       ...options,
       packageJson: pkg,
-      test: !!options.test || process.env.SB_TESTBUILD === 'true',
+      test: !!options.test || optionalEnvToBoolean(process.env.SB_TESTBUILD),
     }).catch(() => process.exit(1));
   });
 
diff --git a/code/core/src/common/utils/envs.ts b/code/core/src/common/utils/envs.ts
index adf1297f686f..a84a8e99e11a 100644
--- a/code/core/src/common/utils/envs.ts
+++ b/code/core/src/common/utils/envs.ts
@@ -67,3 +67,24 @@ export const stringifyProcessEnvs = (raw: Record<string, string>): Record<string
   // envs['process.env'] = JSON.stringify(raw);
   return envs;
 };
+
+export const optionalEnvToBoolean = (input: string | undefined): boolean | undefined => {
+  if (input === undefined) {
+    return undefined;
+  }
+  if (input.toUpperCase() === 'FALSE' || input === '0') {
+    return false;
+  }
+  if (input.toUpperCase() === 'TRUE' || input === '1') {
+    return true;
+  }
+  return Boolean(input);
+};
+
+/**
+ * Consistently determine if we are in a CI environment
+ *
+ * Doing Boolean(process.env.CI) or !process.env.CI is not enough, because users might set CI=false
+ * or CI=0, which would be truthy, and thus return true in those cases.
+ */
+export const isCI = optionalEnvToBoolean(process.env.CI);
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index 48dc2f3a2986..8b899904312a 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -3,6 +3,7 @@ import { readFile } from 'node:fs/promises';
 import { dirname, isAbsolute, join } from 'node:path';
 
 import type { Channel } from 'storybook/internal/channels';
+import { optionalEnvToBoolean } from 'storybook/internal/common';
 import {
   JsPackageManagerFactory,
   type RemoveAddonOptions,
@@ -171,22 +172,6 @@ export const typescript = () => ({
   },
 });
 
-const optionalEnvToBoolean = (input: string | undefined): boolean | undefined => {
-  if (input === undefined) {
-    return undefined;
-  }
-  if (input.toUpperCase() === 'FALSE') {
-    return false;
-  }
-  if (input.toUpperCase() === 'TRUE') {
-    return true;
-  }
-  if (typeof input === 'string') {
-    return true;
-  }
-  return undefined;
-};
-
 /** This API is used by third-parties to access certain APIs in a Node environment */
 export const experimental_serverAPI = (extension: Record<string, Function>, options: Options) => {
   let removeAddon = removeAddonBase;
diff --git a/code/core/src/core-server/stores/status.ts b/code/core/src/core-server/stores/status.ts
index 343e9c5f48da..24fc4310f6cd 100644
--- a/code/core/src/core-server/stores/status.ts
+++ b/code/core/src/core-server/stores/status.ts
@@ -1,3 +1,4 @@
+import { optionalEnvToBoolean } from '../../common/utils/envs';
 import { createStatusStore } from '../../shared/status-store';
 import { UNIVERSAL_STATUS_STORE_OPTIONS } from '../../shared/status-store';
 import { UniversalStore } from '../../shared/universal-store';
@@ -12,7 +13,7 @@ const statusStore = createStatusStore({
       before it was ready.
       This will be fixed when we do the planned UniversalStore v0.2.
     */
-    leader: process.env.VITEST_CHILD_PROCESS !== 'true',
+    leader: !optionalEnvToBoolean(process.env.VITEST_CHILD_PROCESS),
   }),
   environment: 'server',
 });
diff --git a/code/core/src/core-server/stores/test-provider.ts b/code/core/src/core-server/stores/test-provider.ts
index ceb5b7bd443b..21c8a5112b05 100644
--- a/code/core/src/core-server/stores/test-provider.ts
+++ b/code/core/src/core-server/stores/test-provider.ts
@@ -1,3 +1,4 @@
+import { optionalEnvToBoolean } from '../../common/utils/envs';
 import { createTestProviderStore } from '../../shared/test-provider-store';
 import { UNIVERSAL_TEST_PROVIDER_STORE_OPTIONS } from '../../shared/test-provider-store';
 import { UniversalStore } from '../../shared/universal-store';
@@ -12,7 +13,7 @@ const testProviderStore = createTestProviderStore({
             before it was ready.
             This will be fixed when we do the planned UniversalStore v0.2.
           */
-    leader: process.env.VITEST_CHILD_PROCESS !== 'true',
+    leader: !optionalEnvToBoolean(process.env.VITEST_CHILD_PROCESS),
   }),
 });
 
diff --git a/code/core/src/core-server/withTelemetry.ts b/code/core/src/core-server/withTelemetry.ts
index 74464060d044..4de43d45c018 100644
--- a/code/core/src/core-server/withTelemetry.ts
+++ b/code/core/src/core-server/withTelemetry.ts
@@ -1,4 +1,4 @@
-import { HandledError, cache, loadAllPresets } from 'storybook/internal/common';
+import { HandledError, cache, isCI, loadAllPresets } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 import { getPrecedingUpgrade, oneWayHash, telemetry } from 'storybook/internal/telemetry';
 import type { EventType } from 'storybook/internal/telemetry';
@@ -14,7 +14,7 @@ type TelemetryOptions = {
 };
 
 const promptCrashReports = async () => {
-  if (process.env.CI) {
+  if (isCI) {
     return undefined;
   }
 
diff --git a/code/core/src/node-logger/logger/log-tracker.ts b/code/core/src/node-logger/logger/log-tracker.ts
index 5394531aa3f5..76e87e23c7c9 100644
--- a/code/core/src/node-logger/logger/log-tracker.ts
+++ b/code/core/src/node-logger/logger/log-tracker.ts
@@ -1,6 +1,8 @@
 import { promises as fs } from 'node:fs';
 import path, { join } from 'node:path';
 
+import { isCI } from 'storybook/internal/common';
+
 import { cleanLog } from '../../../../lib/cli-storybook/src/automigrate/helpers/cleanLog';
 import type { LogLevel } from './logger';
 
@@ -97,7 +99,7 @@ class LogTracker {
     await fs.writeFile(filePath, logContent, 'utf-8');
     this.#logs = [];
 
-    return process.env.CI ? filePath : path.relative(process.cwd(), filePath);
+    return isCI ? filePath : path.relative(process.cwd(), filePath);
   }
 }
 
diff --git a/code/core/src/node-logger/prompts/prompt-config.ts b/code/core/src/node-logger/prompts/prompt-config.ts
index e1cbc71099f6..c79cc8152974 100644
--- a/code/core/src/node-logger/prompts/prompt-config.ts
+++ b/code/core/src/node-logger/prompts/prompt-config.ts
@@ -1,3 +1,4 @@
+import { optionalEnvToBoolean } from '../../common/utils/envs';
 import type { PromptProvider } from './prompt-provider-base';
 import { ClackPromptProvider } from './prompt-provider-clack';
 import { PromptsPromptProvider } from './prompt-provider-prompts';
@@ -9,7 +10,9 @@ const PROVIDERS = {
   prompts: new PromptsPromptProvider(),
 } as const;
 
-let currentPromptLibrary: PromptLibrary = process.env.USE_CLACK === 'true' ? 'clack' : 'prompts';
+let currentPromptLibrary: PromptLibrary = optionalEnvToBoolean(process.env.USE_CLACK)
+  ? 'clack'
+  : 'prompts';
 
 export const setPromptLibrary = (library: PromptLibrary): void => {
   currentPromptLibrary = library;
diff --git a/code/core/src/telemetry/storybook-metadata.ts b/code/core/src/telemetry/storybook-metadata.ts
index 5b2e47b3125a..eb94a1514678 100644
--- a/code/core/src/telemetry/storybook-metadata.ts
+++ b/code/core/src/telemetry/storybook-metadata.ts
@@ -4,6 +4,7 @@ import {
   getProjectRoot,
   getStorybookConfiguration,
   getStorybookInfo,
+  isCI,
   loadMainConfig,
   versions,
 } from 'storybook/internal/common';
@@ -57,7 +58,7 @@ export const computeStorybookMetadata = async ({
   mainConfig?: StorybookConfig & Record<string, any>;
   configDir: string;
 }): Promise<StorybookMetadata> => {
-  const settings = process.env.CI === 'true' ? undefined : await globalSettings();
+  const settings = isCI ? undefined : await globalSettings();
   const metadata: Partial<StorybookMetadata> = {
     generatedAt: new Date().getTime(),
     userSince: settings?.value.userSince,
diff --git a/code/core/src/telemetry/telemetry.ts b/code/core/src/telemetry/telemetry.ts
index 4dfccfa6786b..8cdb9d7fc289 100644
--- a/code/core/src/telemetry/telemetry.ts
+++ b/code/core/src/telemetry/telemetry.ts
@@ -1,6 +1,8 @@
 /// <reference types="node" />
 import * as os from 'node:os';
 
+import { isCI } from 'storybook/internal/common';
+
 import retry from 'fetch-retry';
 import { nanoid } from 'nanoid';
 
@@ -45,7 +47,7 @@ const getOperatingSystem = (): 'Windows' | 'macOS' | 'Linux' | `Other: ${string}
 // by the app. currently:
 // - cliVersion
 const globalContext = {
-  inCI: Boolean(process.env.CI),
+  inCI: isCI,
   isTTY: process.stdout.isTTY,
   platform: getOperatingSystem(),
   nodeVersion: process.versions.node,
diff --git a/code/lib/cli-storybook/src/bin/index.ts b/code/lib/cli-storybook/src/bin/index.ts
index 14f3652b22f0..1b1198e325ab 100644
--- a/code/lib/cli-storybook/src/bin/index.ts
+++ b/code/lib/cli-storybook/src/bin/index.ts
@@ -2,6 +2,8 @@ import { globalSettings } from 'storybook/internal/cli';
 import {
   HandledError,
   JsPackageManagerFactory,
+  isCI,
+  optionalEnvToBoolean,
   removeAddon as remove,
   versions,
 } from 'storybook/internal/common';
@@ -43,8 +45,7 @@ const command = (name: string) =>
     .option(
       '--disable-telemetry',
       'Disable sending telemetry data',
-      // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
-      process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+      optionalEnvToBoolean(process.env.STORYBOOK_DISABLE_TELEMETRY)
     )
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data')
@@ -88,7 +89,7 @@ command('init')
   .option(
     '--dev',
     'Launch the development server after completing initialization. Enabled by default (default: true)',
-    process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true'
+    !isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)
   )
   .option(
     '--no-dev',
diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 1282d31a33b4..52c8c24aabd4 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -1,4 +1,8 @@
-import { type JsPackageManager, syncStorybookAddons } from 'storybook/internal/common';
+import {
+  type JsPackageManager,
+  optionalEnvToBoolean,
+  syncStorybookAddons,
+} from 'storybook/internal/common';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 import picocolors from 'picocolors';
@@ -19,7 +23,7 @@ async function runStoriesCodemod(options: {
   const { dryRun, packageManager, ...codemodOptions } = options;
   try {
     let globString = '{stories,src}/**/{Button,Header,Page}.stories.*';
-    if (!process.env.IN_STORYBOOK_SANDBOX) {
+    if (!optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)) {
       logger.log('Please enter the glob for your stories to migrate');
       globString = await prompt.text({
         message: 'glob',
@@ -59,7 +63,7 @@ export const csfFactories: CommandFix = {
   promptType: 'command',
   async run({ dryRun, mainConfig, mainConfigPath, previewConfigPath, packageManager, configDir }) {
     let useSubPathImports = true;
-    if (!process.env.IN_STORYBOOK_SANDBOX) {
+    if (!optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)) {
       // prompt whether the user wants to use imports map
       logger.logBox(dedent`
         The CSF factories format benefits from subpath imports (the imports property in your \`package.json\`), which is a node standard for module resolution. This makes it more convenient to import the preview config in your story files.
diff --git a/code/lib/cli-storybook/src/sandbox.ts b/code/lib/cli-storybook/src/sandbox.ts
index 90b0b6ab2a68..db53357dfbfc 100644
--- a/code/lib/cli-storybook/src/sandbox.ts
+++ b/code/lib/cli-storybook/src/sandbox.ts
@@ -3,7 +3,12 @@ import { readdir, rm } from 'node:fs/promises';
 import { isAbsolute, join } from 'node:path';
 
 import type { PackageManagerName } from 'storybook/internal/common';
-import { JsPackageManagerFactory, versions } from 'storybook/internal/common';
+import {
+  JsPackageManagerFactory,
+  isCI,
+  optionalEnvToBoolean,
+  versions,
+} from 'storybook/internal/common';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 import { downloadTemplate } from 'giget';
@@ -218,7 +223,7 @@ export const sandbox = async ({
         // @ts-ignore-error (no types for this)
         const { initiate } = await import('create-storybook');
         await initiate({
-          dev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true',
+          dev: isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX),
           ...options,
           features: ['docs', 'test'],
         });
diff --git a/code/lib/create-storybook/src/bin/index.ts b/code/lib/create-storybook/src/bin/index.ts
index d3176590c93e..c32beb1ad84a 100644
--- a/code/lib/create-storybook/src/bin/index.ts
+++ b/code/lib/create-storybook/src/bin/index.ts
@@ -1,3 +1,5 @@
+import { isCI, optionalEnvToBoolean } from 'storybook/internal/common';
+
 import { program } from 'commander';
 
 import { addToGlobalContext } from '../../../../core/src/telemetry';
@@ -5,9 +7,6 @@ import { version } from '../../package.json';
 import type { CommandOptions } from '../generators/types';
 import { initiate } from '../initiate';
 
-const IS_NON_CI = process.env.CI !== 'true';
-const IS_NON_STORYBOOK_SANDBOX = process.env.IN_STORYBOOK_SANDBOX !== 'true';
-
 addToGlobalContext('cliVersion', version);
 
 /**
@@ -22,8 +21,7 @@ const createStorybookProgram = program
   .option(
     '--disable-telemetry',
     'Disable sending telemetry data',
-    // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
-    process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+    optionalEnvToBoolean(process.env.STORYBOOK_DISABLE_TELEMETRY)
   )
   .option('--features <list...>', 'What features of storybook are you interested in?')
   .option('--debug', 'Get more logs in debug mode')
@@ -54,7 +52,7 @@ const createStorybookProgram = program
 createStorybookProgram
   .action(async (options) => {
     options.debug = options.debug ?? false;
-    options.dev = options.dev ?? (IS_NON_CI && IS_NON_STORYBOOK_SANDBOX);
+    options.dev = options.dev ?? (isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX));
 
     await initiate(options as CommandOptions).catch(() => process.exit(1));
   })
diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
index f4e42ef339da..fab3e7df649f 100644
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -18,7 +18,7 @@ import {
   SupportedLanguage,
   externalFrameworks,
 } from '../../../../core/src/cli/project_types';
-import { frameworkPackages } from '../../../../core/src/common';
+import { frameworkPackages, isCI, optionalEnvToBoolean } from '../../../../core/src/common';
 import {
   type JsPackageManager,
   getPackageDetails,
@@ -192,7 +192,7 @@ const hasFrameworkTemplates = (framework?: string) => {
   // As the Nuxt framework templates are not compatible with the stories we need for CI.
   // See: https://github.com/storybookjs/storybook/pull/28607#issuecomment-2467903327
   if (framework === 'nuxt') {
-    return process.env.IN_STORYBOOK_SANDBOX !== 'true';
+    return !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX);
   }
 
   const frameworksWithTemplates: SupportedFrameworks[] = [
@@ -354,7 +354,7 @@ export async function baseGenerator(
   }).start();
 
   try {
-    if (process.env.CI !== 'true') {
+    if (!isCI) {
       const { hasEslint, isStorybookPluginInstalled, isFlatConfig, eslintConfigFile } =
         // TODO: Investigate why packageManager type does not match on CI
         await extractEslintInfo(packageManager as any);
diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index cfb9616e015c..da422ec48fe8 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -1,6 +1,7 @@
 import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 
+import { isCI } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
 import boxen from 'boxen';
@@ -441,7 +442,7 @@ export async function doInitiate(options: CommandOptions): Promise<
     )
   );
 
-  const isInteractive = process.stdout.isTTY && !process.env.CI;
+  const isInteractive = process.stdout.isTTY && !isCI;
 
   const settings = await globalSettings();
   const promptOptions = {

From 1086746a3546206b16e813ebd174a5e904481b4b Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 25 Jul 2025 13:09:22 +0200
Subject: [PATCH 008/130] Handle type 'test' in Storybook UI

---
 .../components/sidebar/IconSymbols.tsx        | 25 ++++++-
 .../src/manager/components/sidebar/Tree.tsx   |  2 +
 .../manager/components/sidebar/TreeNode.tsx   | 73 ++++++++++---------
 3 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/IconSymbols.tsx b/code/core/src/manager/components/sidebar/IconSymbols.tsx
index df1dfe9319b6..acee90d48f19 100644
--- a/code/core/src/manager/components/sidebar/IconSymbols.tsx
+++ b/code/core/src/manager/components/sidebar/IconSymbols.tsx
@@ -19,6 +19,7 @@ const GROUP_ID = 'icon--group';
 const COMPONENT_ID = 'icon--component';
 const DOCUMENT_ID = 'icon--document';
 const STORY_ID = 'icon--story';
+const TEST_ID = 'icon--test';
 const SUCCESS_ID = 'icon--success';
 const ERROR_ID = 'icon--error';
 const WARNING_ID = 'icon--warning';
@@ -67,6 +68,15 @@ export const IconSymbols: FC = () => {
           fill="currentColor"
         />
       </symbol>
+      <symbol id={TEST_ID}>
+        {/* https://github.com/storybookjs/icons/blob/main/src/icons/BeakerIcon.tsx */}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.5 2h.75v3.866l-3.034 5.26A1.25 1.25 0 003.299 13H10.7a1.25 1.25 0 001.083-1.875L8.75 5.866V2h.75a.5.5 0 100-1h-5a.5.5 0 000 1zm1.75 4V2h1.5v4.134l.067.116L8.827 8H5.173l1.01-1.75.067-.116V6zM4.597 9l-1.515 2.625A.25.25 0 003.3 12H10.7a.25.25 0 00.217-.375L9.404 9H4.597z"
+          fill="currentColor"
+        />
+      </symbol>
       <symbol id={SUCCESS_ID}>
         <path
           fillRule="evenodd"
@@ -99,7 +109,16 @@ export const IconSymbols: FC = () => {
 };
 
 export const UseSymbol: FC<{
-  type: 'group' | 'component' | 'document' | 'story' | 'success' | 'error' | 'warning' | 'dot';
+  type:
+    | 'group'
+    | 'component'
+    | 'document'
+    | 'story'
+    | 'test'
+    | 'success'
+    | 'error'
+    | 'warning'
+    | 'dot';
 }> = ({ type }) => {
   if (type === 'group') {
     return <use xlinkHref={`#${GROUP_ID}`} />;
@@ -117,6 +136,10 @@ export const UseSymbol: FC<{
     return <use xlinkHref={`#${STORY_ID}`} />;
   }
 
+  if (type === 'test') {
+    return <use xlinkHref={`#${TEST_ID}`} />;
+  }
+
   if (type === 'success') {
     return <use xlinkHref={`#${SUCCESS_ID}`} />;
   }
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 87ab8ac031d9..dd8b38c2528b 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -330,6 +330,8 @@ const Node = React.memo<NodeProps>(function Node({
               setMobileMenuOpen(false);
             }
           }}
+          // TODO: hack stuff, should be fixed later
+          {...(item.tags.includes('test-fn') && { type: 'test' })}
           {...(item.type === 'docs' && { docsMode })}
         >
           {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 9ea9ecf5e273..9694c86b3b4d 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -7,7 +7,7 @@ import { styled } from 'storybook/theming';
 import { UseSymbol } from './IconSymbols';
 import { CollapseIcon } from './components/CollapseIcon';
 
-export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'group' | 'document' }>(
+export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'test' | 'group' | 'document' }>(
   ({ theme, type }) => ({
     width: 14,
     height: 14,
@@ -28,6 +28,10 @@ export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'group' | 'do
       if (type === 'story') {
         return theme.color.seafoam;
       }
+
+      if (type === 'test') {
+        return theme.color.green;
+      }
       return 'currentColor';
     })(),
   })
@@ -57,23 +61,26 @@ const BranchNode = styled.button<{
   paddingBottom: 4,
 }));
 
-const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({
-  width: '100%',
-  cursor: 'pointer',
-  color: 'inherit',
-  display: 'flex',
-  gap: 6,
-  flex: 1,
-  alignItems: 'start',
-  paddingLeft: `${22 + depth * 18}px`,
-  paddingTop: 5,
-  paddingBottom: 4,
-  fontSize: `${theme.typography.size.s2}px`,
-  textDecoration: 'none',
-  overflowWrap: 'break-word',
-  wordWrap: 'break-word',
-  wordBreak: 'break-word',
-}));
+const LeafNode = styled.a<{ depth?: number; type?: 'story' | 'test' }>(
+  ({ theme, depth = 0, type }) => ({
+    width: '100%',
+    cursor: 'pointer',
+    color: 'inherit',
+    display: 'flex',
+    gap: 6,
+    flex: 1,
+    alignItems: 'start',
+    // TODO: hack stuff, should be fixed later
+    paddingLeft: type === 'test' ? `${32 + depth * 18}px` : `${22 + depth * 18}px`,
+    paddingTop: 5,
+    paddingBottom: 4,
+    fontSize: `${theme.typography.size.s2}px`,
+    textDecoration: 'none',
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+    wordBreak: 'break-word',
+  })
+);
 
 export const RootNode = styled.div(({ theme }) => ({
   display: 'flex',
@@ -150,19 +157,17 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool
   }
 );
 
-export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
-  theme,
-  children,
-  ...props
-}) {
-  return (
-    <LeafNode tabIndex={-1} {...props}>
-      <Wrapper>
-        <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story">
-          <UseSymbol type="story" />
-        </TypeIcon>
-      </Wrapper>
-      {children}
-    </LeafNode>
-  );
-});
+// TODO: hack stuff, should be done in a new component
+export const StoryNode: FC<ComponentProps<typeof LeafNode> & { type: 'story' | 'test' }> =
+  React.memo(function StoryNode({ theme, children, type = 'story', ...props }) {
+    return (
+      <LeafNode tabIndex={-1} type={type} {...props}>
+        <Wrapper>
+          <TypeIcon viewBox="0 0 14 14" width="12" height="12" type={type}>
+            <UseSymbol type={type} />
+          </TypeIcon>
+        </Wrapper>
+        {children}
+      </LeafNode>
+    );
+  });

From f455ffa13a0a490b7189cb0a512144ae085138cf Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 25 Jul 2025 13:20:51 +0200
Subject: [PATCH 009/130] workaround

---
 code/builders/builder-vite/src/plugins/test-fn-plugin.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
index 9aea7f73a160..0c8d422efe1a 100644
--- a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
@@ -1,15 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { testTransform } from 'storybook/internal/csf-tools';
 
-import type { Plugin } from 'vite';
-
 /** This transforms the test function of a story into another story */
-export async function storybookTestFn(): Promise<Plugin> {
+export async function storybookTestFn(): Promise<any> {
+  // export async function storybookTestFn(): Promise<Plugin> {
   const storiesRegex = /\.stories\.(tsx?|jsx?)$/;
 
   return {
     name: 'storybook:test-function',
     enforce: 'post',
-    async transform(src, id) {
+    async transform(src: any, id: any) {
       if (!storiesRegex.test(id)) {
         return undefined;
       }

From e642f4e458e5fa4800c8ad3fc20e781d36809cf5 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 31 Jul 2025 11:48:10 +0200
Subject: [PATCH 010/130] Refactor: Update isCI usage to function calls across
 multiple files

- Changed instances of `isCI` to `isCI()` in various files to ensure consistent function usage.
- Updated related logic in `postinstall-logger.ts`, `postinstall.ts`, `withTelemetry.ts`, and others to reflect this change.
- Enhanced test coverage for `isCI` behavior in `storybook-metadata.test.ts`.
---
 code/addons/vitest/src/postinstall-logger.ts  |  2 +-
 code/addons/vitest/src/postinstall.ts         |  2 +-
 code/core/src/common/utils/envs.ts            |  4 ++-
 .../core-server/utils/server-address.test.ts  |  1 +
 code/core/src/core-server/withTelemetry.ts    |  2 +-
 .../src/node-logger/logger/log-tracker.ts     |  2 +-
 .../src/telemetry/storybook-metadata.test.ts  | 30 +++++++++++++++++--
 code/core/src/telemetry/storybook-metadata.ts |  2 +-
 code/core/src/telemetry/telemetry.ts          |  2 +-
 code/lib/cli-storybook/src/bin/index.ts       |  2 +-
 code/lib/cli-storybook/src/sandbox.ts         |  2 +-
 code/lib/create-storybook/src/bin/index.ts    |  4 ++-
 .../src/generators/baseGenerator.ts           |  2 +-
 code/lib/create-storybook/src/initiate.ts     |  2 +-
 14 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/code/addons/vitest/src/postinstall-logger.ts b/code/addons/vitest/src/postinstall-logger.ts
index 521a5a3a0d5a..03bdf56c8710 100644
--- a/code/addons/vitest/src/postinstall-logger.ts
+++ b/code/addons/vitest/src/postinstall-logger.ts
@@ -1,7 +1,7 @@
 import { isCI } from 'storybook/internal/common';
 import { colors, logger } from 'storybook/internal/node-logger';
 
-const fancy = process.platform !== 'win32' || isCI || process.env.TERM === 'xterm-256color';
+const fancy = process.platform !== 'win32' || isCI() || process.env.TERM === 'xterm-256color';
 
 export const step = colors.gray('›');
 export const info = colors.blue(fancy ? 'ℹ' : 'i');
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 9a63cc1096cf..020ac845a31e 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -80,7 +80,7 @@ export default async function postInstall(options: PostinstallOptions) {
 
   const hasCustomWebpackConfig = !!config.getFieldNode(['webpackFinal']);
 
-  const isInteractive = process.stdout.isTTY && !isCI;
+  const isInteractive = process.stdout.isTTY && !isCI();
 
   if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) {
     const out =
diff --git a/code/core/src/common/utils/envs.ts b/code/core/src/common/utils/envs.ts
index a84a8e99e11a..5fcde6e41cde 100644
--- a/code/core/src/common/utils/envs.ts
+++ b/code/core/src/common/utils/envs.ts
@@ -87,4 +87,6 @@ export const optionalEnvToBoolean = (input: string | undefined): boolean | undef
  * Doing Boolean(process.env.CI) or !process.env.CI is not enough, because users might set CI=false
  * or CI=0, which would be truthy, and thus return true in those cases.
  */
-export const isCI = optionalEnvToBoolean(process.env.CI);
+export function isCI(): boolean | undefined {
+  return optionalEnvToBoolean(process.env.CI);
+}
diff --git a/code/core/src/core-server/utils/server-address.test.ts b/code/core/src/core-server/utils/server-address.test.ts
index a6b823bcac73..fe835c9257e5 100644
--- a/code/core/src/core-server/utils/server-address.test.ts
+++ b/code/core/src/core-server/utils/server-address.test.ts
@@ -6,6 +6,7 @@ import { getServerAddresses, getServerChannelUrl, getServerPort } from './server
 
 vi.mock('node:os', () => ({
   default: { release: () => '' },
+  platform: 'darwin',
   constants: {
     signals: {},
   },
diff --git a/code/core/src/core-server/withTelemetry.ts b/code/core/src/core-server/withTelemetry.ts
index eb5d8bda6dac..914ec185fb7b 100644
--- a/code/core/src/core-server/withTelemetry.ts
+++ b/code/core/src/core-server/withTelemetry.ts
@@ -14,7 +14,7 @@ type TelemetryOptions = {
 };
 
 const promptCrashReports = async () => {
-  if (isCI || !process.stdout.isTTY) {
+  if (isCI() || !process.stdout.isTTY) {
     return undefined;
   }
 
diff --git a/code/core/src/node-logger/logger/log-tracker.ts b/code/core/src/node-logger/logger/log-tracker.ts
index 76e87e23c7c9..c38f76c3ee93 100644
--- a/code/core/src/node-logger/logger/log-tracker.ts
+++ b/code/core/src/node-logger/logger/log-tracker.ts
@@ -99,7 +99,7 @@ class LogTracker {
     await fs.writeFile(filePath, logContent, 'utf-8');
     this.#logs = [];
 
-    return isCI ? filePath : path.relative(process.cwd(), filePath);
+    return isCI() ? filePath : path.relative(process.cwd(), filePath);
   }
 }
 
diff --git a/code/core/src/telemetry/storybook-metadata.test.ts b/code/core/src/telemetry/storybook-metadata.test.ts
index 549daea82c60..59232111d1c1 100644
--- a/code/core/src/telemetry/storybook-metadata.test.ts
+++ b/code/core/src/telemetry/storybook-metadata.test.ts
@@ -3,11 +3,12 @@ import path from 'node:path';
 import type { MockInstance } from 'vitest';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { getStorybookInfo } from 'storybook/internal/common';
+import { getStorybookInfo, isCI } from 'storybook/internal/common';
 import type { PackageJson, StorybookConfig } from 'storybook/internal/types';
 
 import { detect } from 'package-manager-detector';
 
+import { type Settings, globalSettings } from '../cli/globalSettings';
 import { getMonorepoType } from '../telemetry/get-monorepo-type';
 import {
   getActualPackageJson,
@@ -16,6 +17,7 @@ import {
 } from './package-json';
 import { computeStorybookMetadata, metaFrameworks, sanitizeAddonName } from './storybook-metadata';
 
+vi.mock(import('../cli/globalSettings'), { spy: true });
 vi.mock(import('./package-json'), { spy: true });
 vi.mock(import('./get-monorepo-type'), { spy: true });
 vi.mock(import('package-manager-detector'), { spy: true });
@@ -442,6 +444,29 @@ describe('storybook-metadata', () => {
     );
 
     it('should detect userSince info', async () => {
+      vi.mocked(isCI).mockImplementation(() => false);
+      vi.mocked(globalSettings).mockResolvedValue({
+        value: {
+          userSince: 1717334400000,
+        },
+      } as Settings);
+
+      const res = await computeStorybookMetadata({
+        configDir: '.storybook',
+        packageJson: packageJsonMock,
+        packageJsonPath,
+        mainConfig: mainJsMock,
+      });
+
+      expect(globalSettings).toHaveBeenCalled();
+
+      expect(res.userSince).toEqual(1717334400000);
+    });
+
+    it('should not detect userSince info in CI', async () => {
+      vi.mocked(isCI).mockImplementation(() => true);
+      vi.mocked(globalSettings).mockResolvedValue({} as Settings);
+
       const res = await computeStorybookMetadata({
         configDir: '.storybook',
         packageJson: packageJsonMock,
@@ -449,7 +474,8 @@ describe('storybook-metadata', () => {
         mainConfig: mainJsMock,
       });
 
-      expect(res.userSince).toBeDefined();
+      expect(globalSettings).not.toHaveBeenCalled();
+      expect(res.userSince).not.toBeDefined();
     });
   });
 });
diff --git a/code/core/src/telemetry/storybook-metadata.ts b/code/core/src/telemetry/storybook-metadata.ts
index 31e8106cbf32..db336475dd43 100644
--- a/code/core/src/telemetry/storybook-metadata.ts
+++ b/code/core/src/telemetry/storybook-metadata.ts
@@ -57,7 +57,7 @@ export const computeStorybookMetadata = async ({
   mainConfig?: StorybookConfig & Record<string, any>;
   configDir: string;
 }): Promise<StorybookMetadata> => {
-  const settings = isCI ? undefined : await globalSettings();
+  const settings = isCI() ? undefined : await globalSettings();
   const metadata: Partial<StorybookMetadata> = {
     generatedAt: new Date().getTime(),
     userSince: settings?.value.userSince,
diff --git a/code/core/src/telemetry/telemetry.ts b/code/core/src/telemetry/telemetry.ts
index 8cdb9d7fc289..9796a315db13 100644
--- a/code/core/src/telemetry/telemetry.ts
+++ b/code/core/src/telemetry/telemetry.ts
@@ -47,7 +47,7 @@ const getOperatingSystem = (): 'Windows' | 'macOS' | 'Linux' | `Other: ${string}
 // by the app. currently:
 // - cliVersion
 const globalContext = {
-  inCI: isCI,
+  inCI: isCI(),
   isTTY: process.stdout.isTTY,
   platform: getOperatingSystem(),
   nodeVersion: process.versions.node,
diff --git a/code/lib/cli-storybook/src/bin/index.ts b/code/lib/cli-storybook/src/bin/index.ts
index ce8d90cb283b..04232bb00865 100644
--- a/code/lib/cli-storybook/src/bin/index.ts
+++ b/code/lib/cli-storybook/src/bin/index.ts
@@ -89,7 +89,7 @@ command('init')
   .option(
     '--dev',
     'Launch the development server after completing initialization. Enabled by default (default: true)',
-    !isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)
+    !isCI() && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX)
   )
   .option(
     '--no-dev',
diff --git a/code/lib/cli-storybook/src/sandbox.ts b/code/lib/cli-storybook/src/sandbox.ts
index 2800c56a9d4d..b28d9e54c4c2 100644
--- a/code/lib/cli-storybook/src/sandbox.ts
+++ b/code/lib/cli-storybook/src/sandbox.ts
@@ -226,7 +226,7 @@ export const sandbox = async ({
         // @ts-ignore-error (no types for this)
         const { initiate } = await import('create-storybook');
         await initiate({
-          dev: isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX),
+          dev: isCI() && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX),
           ...options,
           features: ['docs', 'test'],
         });
diff --git a/code/lib/create-storybook/src/bin/index.ts b/code/lib/create-storybook/src/bin/index.ts
index c32beb1ad84a..226ed2211c0e 100644
--- a/code/lib/create-storybook/src/bin/index.ts
+++ b/code/lib/create-storybook/src/bin/index.ts
@@ -51,8 +51,10 @@ const createStorybookProgram = program
 
 createStorybookProgram
   .action(async (options) => {
+    const isNeitherCiNorSandbox =
+      !isCI() && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX);
     options.debug = options.debug ?? false;
-    options.dev = options.dev ?? (isCI && !optionalEnvToBoolean(process.env.IN_STORYBOOK_SANDBOX));
+    options.dev = options.dev ?? isNeitherCiNorSandbox;
 
     await initiate(options as CommandOptions).catch(() => process.exit(1));
   })
diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
index b17093e8569a..ee929c6a3734 100644
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -354,7 +354,7 @@ export async function baseGenerator(
   }).start();
 
   try {
-    if (!isCI) {
+    if (!isCI()) {
       const { hasEslint, isStorybookPluginInstalled, isFlatConfig, eslintConfigFile } =
         // TODO: Investigate why packageManager type does not match on CI
         await extractEslintInfo(packageManager as any);
diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index da422ec48fe8..d9c84d10c085 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -442,7 +442,7 @@ export async function doInitiate(options: CommandOptions): Promise<
     )
   );
 
-  const isInteractive = process.stdout.isTTY && !isCI;
+  const isInteractive = process.stdout.isTTY && !isCI();
 
   const settings = await globalSettings();
   const promptOptions = {

From 8733611ac02997dc75692bc1809443b8c79cbabd Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 31 Jul 2025 12:14:30 +0200
Subject: [PATCH 011/130] Comment out userSince test in event-log-checker for
 discussion on CI value provision

---
 scripts/event-log-checker.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts
index 228329f1b295..f98a4f5c6470 100644
--- a/scripts/event-log-checker.ts
+++ b/scripts/event-log-checker.ts
@@ -119,9 +119,11 @@ async function run() {
       assert.equal(mainEvent.context.anonymousId, oneWayHash(unhashedId));
     });
 
-    test(`main event should contain a userSince value`, () => {
-      assert.ok(typeof mainEvent.metadata.userSince === 'number');
-    });
+    // Not sure if it's worth testing this as we are not providing this value in CI.
+    // For now the code is commented out so we can discuss later.
+    // test(`main event should contain a userSince value`, () => {
+    //   assert.ok(typeof mainEvent.metadata.userSince === 'number');
+    // });
 
     const {
       expected: { renderer, builder, framework },

From 9e0c214cfb0fa5420a3a66413b2e2f68776847f3 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 31 Jul 2025 12:19:43 +0200
Subject: [PATCH 012/130] bundle in utilities

---
 code/lib/create-storybook/src/bin/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/lib/create-storybook/src/bin/index.ts b/code/lib/create-storybook/src/bin/index.ts
index 226ed2211c0e..eab35fee0863 100644
--- a/code/lib/create-storybook/src/bin/index.ts
+++ b/code/lib/create-storybook/src/bin/index.ts
@@ -1,7 +1,6 @@
-import { isCI, optionalEnvToBoolean } from 'storybook/internal/common';
-
 import { program } from 'commander';
 
+import { isCI, optionalEnvToBoolean } from '../../../../core/src/common/utils/envs';
 import { addToGlobalContext } from '../../../../core/src/telemetry';
 import { version } from '../../package.json';
 import type { CommandOptions } from '../generators/types';

From c5354dc61829c9d77c3c687dc666541a0c447062 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 31 Jul 2025 13:40:23 +0200
Subject: [PATCH 013/130] Refactor: Update imports in initiate.ts to use
 centralized utilities

- Replaced direct imports of `isCI` and `logger` from internal paths with imports from centralized utility modules.
- This change enhances maintainability and consistency across the codebase.
---
 code/lib/create-storybook/src/initiate.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index d9c84d10c085..3404532f8d34 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -1,9 +1,6 @@
 import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 
-import { isCI } from 'storybook/internal/common';
-import { logger } from 'storybook/internal/node-logger';
-
 import boxen from 'boxen';
 import { findUp } from 'find-up';
 import picocolors from 'picocolors';
@@ -25,10 +22,12 @@ import { ProjectType, installableProjectTypes } from '../../../core/src/cli/proj
 import type { JsPackageManager } from '../../../core/src/common/js-package-manager/JsPackageManager';
 import { JsPackageManagerFactory } from '../../../core/src/common/js-package-manager/JsPackageManagerFactory';
 import { HandledError } from '../../../core/src/common/utils/HandledError';
+import { isCI } from '../../../core/src/common/utils/envs';
 import { commandLog, paddedLog } from '../../../core/src/common/utils/log';
 import { getProjectRoot, invalidateProjectRootCache } from '../../../core/src/common/utils/paths';
 import versions from '../../../core/src/common/versions';
 import { withTelemetry } from '../../../core/src/core-server/withTelemetry';
+import { logger } from '../../../core/src/node-logger';
 import { NxProjectDetectedError } from '../../../core/src/server-errors';
 import { telemetry } from '../../../core/src/telemetry';
 import angularGenerator from './generators/ANGULAR';

From b3fa2732a4291245739d49b55ff738341c88e058 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:18:49 +0000
Subject: [PATCH 014/130] Write changelog for 9.2.0-alpha.0 [skip ci]

---
 CHANGELOG.prerelease.md | 3 +++
 code/package.json       | 3 ++-
 docs/versions/next.json | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 3b75ceecf9b7..7410a7c665a8 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,6 @@
+## 9.2.0-alpha.0
+
+
 ## 9.1.0-beta.3
 
 - Core: Prevent interactions panel from flickering and showing incorrect state - [#32150](https://github.com/storybookjs/storybook/pull/32150), thanks @ghengeveld!
diff --git a/code/package.json b/code/package.json
index 6dad699baabd..9a771eb8e9c6 100644
--- a/code/package.json
+++ b/code/package.json
@@ -285,5 +285,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "9.2.0-alpha.0"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 04c02ef62750..1ac8c7a5236d 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"9.1.0-beta.3","info":{"plain":"- Core: Prevent interactions panel from flickering and showing incorrect state - [#32150](https://github.com/storybookjs/storybook/pull/32150), thanks @ghengeveld!"}}
+{"version":"9.2.0-alpha.0","info":{"plain":""}}

From 4dad3f978523a5041943697735af2abf72b579c9 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:23:48 +0000
Subject: [PATCH 015/130] Bump version from "9.1.0" to "9.2.0-alpha.0" [skip
 ci]

---
 code/addons/a11y/package.json                 |  2 +-
 code/addons/docs/package.json                 |  2 +-
 code/addons/jest/package.json                 |  2 +-
 code/addons/links/package.json                |  2 +-
 code/addons/onboarding/package.json           |  2 +-
 code/addons/pseudo-states/package.json        |  2 +-
 code/addons/themes/package.json               |  2 +-
 code/addons/vitest/package.json               |  2 +-
 code/builders/builder-vite/package.json       |  2 +-
 code/builders/builder-webpack5/package.json   |  2 +-
 code/core/package.json                        |  2 +-
 code/core/src/common/versions.ts              | 86 +++++++++----------
 code/core/src/manager-api/version.ts          |  2 +-
 code/frameworks/angular/package.json          |  2 +-
 code/frameworks/ember/package.json            |  2 +-
 code/frameworks/html-vite/package.json        |  2 +-
 code/frameworks/nextjs-vite/package.json      |  2 +-
 code/frameworks/nextjs/package.json           |  2 +-
 code/frameworks/preact-vite/package.json      |  2 +-
 .../react-native-web-vite/package.json        |  2 +-
 code/frameworks/react-vite/package.json       |  2 +-
 code/frameworks/react-webpack5/package.json   |  2 +-
 code/frameworks/server-webpack5/package.json  |  2 +-
 code/frameworks/svelte-vite/package.json      |  2 +-
 code/frameworks/sveltekit/package.json        |  2 +-
 code/frameworks/vue3-vite/package.json        |  2 +-
 .../web-components-vite/package.json          |  2 +-
 code/lib/cli-sb/package.json                  |  2 +-
 code/lib/cli-storybook/package.json           |  2 +-
 code/lib/codemod/package.json                 |  2 +-
 code/lib/core-webpack/package.json            |  2 +-
 code/lib/create-storybook/package.json        |  2 +-
 code/lib/csf-plugin/package.json              |  2 +-
 code/lib/eslint-plugin/package.json           |  2 +-
 code/lib/react-dom-shim/package.json          |  2 +-
 code/package.json                             |  5 +-
 code/presets/create-react-app/package.json    |  2 +-
 code/presets/react-webpack/package.json       |  2 +-
 code/presets/server-webpack/package.json      |  2 +-
 code/renderers/html/package.json              |  2 +-
 code/renderers/preact/package.json            |  2 +-
 code/renderers/react/package.json             |  2 +-
 code/renderers/server/package.json            |  2 +-
 code/renderers/svelte/package.json            |  2 +-
 code/renderers/vue3/package.json              |  2 +-
 code/renderers/web-components/package.json    |  2 +-
 46 files changed, 89 insertions(+), 90 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 571b3fcdd331..99016e43bd36 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 2a9065d8e8a5..ca975da0fe4d 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index b8e4eacc4f92..679bd118f6d9 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 6f019f4713fc..ed351d6fac19 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 1dbab29136d6..90265436a7f6 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/pseudo-states/package.json b/code/addons/pseudo-states/package.json
index 19e38542174c..9969e8779aef 100644
--- a/code/addons/pseudo-states/package.json
+++ b/code/addons/pseudo-states/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 6aa981a83fbf..220218bde61d 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json
index 1efa08eae6d8..eee4201fc3a4 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/vitest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-vitest",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook addon for testing components",
   "keywords": [
     "storybook-addons",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index c6801ab13420..1793f1b28e2b 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 98e29f1aee3a..9bf33ad994eb 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/package.json b/code/core/package.json
index 800806ae725d..81b8e09bec8c 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index 2f38ad76eda0..ff8b97c51ba2 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,46 +1,46 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '9.1.0',
-  '@storybook/addon-docs': '9.1.0',
-  '@storybook/addon-jest': '9.1.0',
-  '@storybook/addon-links': '9.1.0',
-  '@storybook/addon-onboarding': '9.1.0',
-  'storybook-addon-pseudo-states': '9.1.0',
-  '@storybook/addon-themes': '9.1.0',
-  '@storybook/addon-vitest': '9.1.0',
-  '@storybook/builder-vite': '9.1.0',
-  '@storybook/builder-webpack5': '9.1.0',
-  storybook: '9.1.0',
-  '@storybook/angular': '9.1.0',
-  '@storybook/ember': '9.1.0',
-  '@storybook/html-vite': '9.1.0',
-  '@storybook/nextjs': '9.1.0',
-  '@storybook/nextjs-vite': '9.1.0',
-  '@storybook/preact-vite': '9.1.0',
-  '@storybook/react-native-web-vite': '9.1.0',
-  '@storybook/react-vite': '9.1.0',
-  '@storybook/react-webpack5': '9.1.0',
-  '@storybook/server-webpack5': '9.1.0',
-  '@storybook/svelte-vite': '9.1.0',
-  '@storybook/sveltekit': '9.1.0',
-  '@storybook/vue3-vite': '9.1.0',
-  '@storybook/web-components-vite': '9.1.0',
-  sb: '9.1.0',
-  '@storybook/cli': '9.1.0',
-  '@storybook/codemod': '9.1.0',
-  '@storybook/core-webpack': '9.1.0',
-  'create-storybook': '9.1.0',
-  '@storybook/csf-plugin': '9.1.0',
-  'eslint-plugin-storybook': '9.1.0',
-  '@storybook/react-dom-shim': '9.1.0',
-  '@storybook/preset-create-react-app': '9.1.0',
-  '@storybook/preset-react-webpack': '9.1.0',
-  '@storybook/preset-server-webpack': '9.1.0',
-  '@storybook/html': '9.1.0',
-  '@storybook/preact': '9.1.0',
-  '@storybook/react': '9.1.0',
-  '@storybook/server': '9.1.0',
-  '@storybook/svelte': '9.1.0',
-  '@storybook/vue3': '9.1.0',
-  '@storybook/web-components': '9.1.0',
+  '@storybook/addon-a11y': '9.2.0-alpha.0',
+  '@storybook/addon-docs': '9.2.0-alpha.0',
+  '@storybook/addon-jest': '9.2.0-alpha.0',
+  '@storybook/addon-links': '9.2.0-alpha.0',
+  '@storybook/addon-onboarding': '9.2.0-alpha.0',
+  'storybook-addon-pseudo-states': '9.2.0-alpha.0',
+  '@storybook/addon-themes': '9.2.0-alpha.0',
+  '@storybook/addon-vitest': '9.2.0-alpha.0',
+  '@storybook/builder-vite': '9.2.0-alpha.0',
+  '@storybook/builder-webpack5': '9.2.0-alpha.0',
+  storybook: '9.2.0-alpha.0',
+  '@storybook/angular': '9.2.0-alpha.0',
+  '@storybook/ember': '9.2.0-alpha.0',
+  '@storybook/html-vite': '9.2.0-alpha.0',
+  '@storybook/nextjs': '9.2.0-alpha.0',
+  '@storybook/nextjs-vite': '9.2.0-alpha.0',
+  '@storybook/preact-vite': '9.2.0-alpha.0',
+  '@storybook/react-native-web-vite': '9.2.0-alpha.0',
+  '@storybook/react-vite': '9.2.0-alpha.0',
+  '@storybook/react-webpack5': '9.2.0-alpha.0',
+  '@storybook/server-webpack5': '9.2.0-alpha.0',
+  '@storybook/svelte-vite': '9.2.0-alpha.0',
+  '@storybook/sveltekit': '9.2.0-alpha.0',
+  '@storybook/vue3-vite': '9.2.0-alpha.0',
+  '@storybook/web-components-vite': '9.2.0-alpha.0',
+  sb: '9.2.0-alpha.0',
+  '@storybook/cli': '9.2.0-alpha.0',
+  '@storybook/codemod': '9.2.0-alpha.0',
+  '@storybook/core-webpack': '9.2.0-alpha.0',
+  'create-storybook': '9.2.0-alpha.0',
+  '@storybook/csf-plugin': '9.2.0-alpha.0',
+  'eslint-plugin-storybook': '9.2.0-alpha.0',
+  '@storybook/react-dom-shim': '9.2.0-alpha.0',
+  '@storybook/preset-create-react-app': '9.2.0-alpha.0',
+  '@storybook/preset-react-webpack': '9.2.0-alpha.0',
+  '@storybook/preset-server-webpack': '9.2.0-alpha.0',
+  '@storybook/html': '9.2.0-alpha.0',
+  '@storybook/preact': '9.2.0-alpha.0',
+  '@storybook/react': '9.2.0-alpha.0',
+  '@storybook/server': '9.2.0-alpha.0',
+  '@storybook/svelte': '9.2.0-alpha.0',
+  '@storybook/vue3': '9.2.0-alpha.0',
+  '@storybook/web-components': '9.2.0-alpha.0',
 };
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index 7f04c973a68e..4d9aa46aed7e 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '9.1.0';
+export const version = '9.2.0-alpha.0';
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 7f16b7bc1619..7fa0d9dc389f 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 7e1aecd0ddf7..aded4f3ae206 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Ember: Develop, document, and test Ember components in isolation",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 212ddcaf796f..e85990660f83 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index bb7810bb06de..6c077ee62dbd 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 41f014a6c713..b836c3ab921d 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 9e758ef8eb62..f4d89039fbb3 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 591c27c19f57..64c89d303f91 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 03792ec35f10..de926383c8dc 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 114dd5ea4189..e012ca94c1e3 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 645187137944..0184499d2685 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index bf3bc4d17b22..dd4ff9b96eba 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 97ef9c854081..420c41e54caa 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 22a8b4e82cc3..fffa69f87045 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 2b35fba9bff3..b589f3563fa7 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 4d7cec18843a..2851a97b646d 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 2489defcb1b8..44fd7d267d59 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index d1bc86c41de3..b67b31c359e6 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 29ef1d613741..3946822feeeb 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 3c86e0c7c280..ff90f2439624 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 5cfae53d7d44..36ea338e6ea7 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json
index 4194224b9c3e..6c6944503b24 100644
--- a/code/lib/eslint-plugin/package.json
+++ b/code/lib/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Best practice rules for Storybook",
   "keywords": [
     "eslint",
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 93f8da927642..1726680f0725 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index 9a771eb8e9c6..e2adbdb59597 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -285,6 +285,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "9.2.0-alpha.0"
+  }
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index ad1542051c56..c581ae790f52 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index e7346997c18f..dc5352c717d1 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 662656cf0c19..1aca127d2591 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index c3193c582cc6..efd7035b4d1c 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 7f3f89d139ff..92b2f08c8b2e 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 3602dc07d566..482e1cd0b041 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index ec2af944d8eb..d8faab118759 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index b696e462d941..72a74d1ca80b 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 49b114699642..73ba656fe832 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index b03bc01dca07..37a45d6ee9f4 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "9.1.0",
+  "version": "9.2.0-alpha.0",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",

From 29048f69e2012e98b3880c94b517efa4488e2607 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 31 Jul 2025 10:49:43 -0600
Subject: [PATCH 016/130] Docs: Further improvements

---
 docs/_snippets/automock-register-full.md      |  21 ++
 docs/_snippets/automock-register-mock-file.md |  21 ++
 docs/_snippets/automock-register-spy.md       |  21 ++
 docs/_snippets/automocked-modules-in-story.md | 282 ++++++++++++++++++
 .../mocking-modules.mdx                       |  82 +----
 5 files changed, 361 insertions(+), 66 deletions(-)
 create mode 100644 docs/_snippets/automock-register-full.md
 create mode 100644 docs/_snippets/automock-register-mock-file.md
 create mode 100644 docs/_snippets/automock-register-spy.md
 create mode 100644 docs/_snippets/automocked-modules-in-story.md

diff --git a/docs/_snippets/automock-register-full.md b/docs/_snippets/automock-register-full.md
new file mode 100644
index 000000000000..f4d448838dc0
--- /dev/null
+++ b/docs/_snippets/automock-register-full.md
@@ -0,0 +1,21 @@
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
+sb.mock(import('../lib/session.ts'));
+// 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
+sb.mock(import('uuid'));
+
+// ...rest of the file
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
+sb.mock('../lib/session.ts');
+// 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
+sb.mock('uuid');
+
+// ...rest of the file
+```
diff --git a/docs/_snippets/automock-register-mock-file.md b/docs/_snippets/automock-register-mock-file.md
new file mode 100644
index 000000000000..6ecefc4ffbb1
--- /dev/null
+++ b/docs/_snippets/automock-register-mock-file.md
@@ -0,0 +1,21 @@
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+import { sb } from 'storybook/test';
+
+// 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
+sb.mock(import('../lib/session.ts'));
+// 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
+sb.mock(import('uuid'));
+
+// ...rest of the file
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { sb } from 'storybook/test';
+
+// 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
+sb.mock('../lib/session.ts');
+// 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
+sb.mock('uuid');
+
+// ...rest of the file
+```
diff --git a/docs/_snippets/automock-register-spy.md b/docs/_snippets/automock-register-spy.md
new file mode 100644
index 000000000000..17f667d9c52a
--- /dev/null
+++ b/docs/_snippets/automock-register-spy.md
@@ -0,0 +1,21 @@
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically spies on all exports from the `lib/session` local module
+sb.mock(import('../lib/session.ts'), { spy: true });
+// 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
+sb.mock(import('uuid'), { spy: true });
+
+// ...rest of the file
+```
+
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { sb } from 'storybook/test';
+
+// 👇 Automatically spies on all exports from the `lib/session` local module
+sb.mock('../lib/session.ts', { spy: true });
+// 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
+sb.mock('uuid', { spy: true });
+
+// ...rest of the file
+```
diff --git a/docs/_snippets/automocked-modules-in-story.md b/docs/_snippets/automocked-modules-in-story.md
new file mode 100644
index 000000000000..b1edf2aacb3b
--- /dev/null
+++ b/docs/_snippets/automocked-modules-in-story.md
@@ -0,0 +1,282 @@
+```ts filename="EventForm.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+import { expect, mocked } from 'storybook/test';
+
+import { AuthButton } from './AuthButton.component';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta: Meta<AuthButton> = {
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+  },
+};
+export default meta;
+
+type Story = StoryObj<AuthButton>;
+
+export const LogIn: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```ts filename="AuthButton.stories.ts" renderer="common" language="ts"
+// Replace your-framework with the name of your framework (e.g. react-vite, vue3-vite, etc.)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+import { expect, mocked } from 'storybook/test';
+
+import { AuthButton } from './AuthButton';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta = {
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+  },
+} satisfies Meta<typeof AuthButton>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LogIn: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```js filename="EventForm.stories.js" renderer="common" language="js"
+import { expect } from 'storybook/test';
+
+import { AuthButton } from './AuthButton';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+export default {
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    uuidv4.mockReturnValue('1234-5678-90ab-cdef');
+    getUserFromSession.mockReturnValue({ name: 'John Doe' });
+  },
+};
+
+export const LogIn = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```svelte filename="EventForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, mocked } from 'storybook/test';
+
+  import { AuthButton } from './AuthButton.svelte';
+
+  import { v4 as uuidv4 } from 'uuid';
+  import { getUserFromSession } from '../lib/session';
+
+  const { Story } = defineMeta({
+    component: AuthButton,
+    // 👇 This will run before each story is rendered
+    beforeEach: async () => {
+      // 👇 Force known, consistent behavior for mocked modules
+      mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+      mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+    },
+  });
+</script>
+
+<Story
+  name="LogIn"
+  play={async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  }}
+/>
+```
+
+```ts filename="EventForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+// Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
+import type { Meta, StoryObj } from '@storybook/your-framework';
+import { expect, mocked } from 'storybook/test';
+
+import { AuthButton } from './AuthButton.svelte';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta = {
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+  },
+} satisfies Meta<typeof AuthButton>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LogIn: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```svelte filename="EventForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, mocked } from 'storybook/test';
+
+  import { AuthButton } from './AuthButton.svelte';
+
+  import { v4 as uuidv4 } from 'uuid';
+  import { getUserFromSession } from '../lib/session';
+
+  const { Story } = defineMeta({
+    component: AuthButton,
+    // 👇 This will run before each story is rendered
+    beforeEach: async () => {
+      // 👇 Force known, consistent behavior for mocked modules
+      uuidv4.mockReturnValue('1234-5678-90ab-cdef');
+      getUserFromSession.mockReturnValue({ name: 'John Doe' });
+    },
+  });
+</script>
+
+<Story
+  name="LogIn"
+  play={async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  }}
+/>
+```
+
+```js filename="EventForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { expect } from 'storybook/test';
+
+import { AuthButton } from './AuthButton.svelte';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+export default {
+  component: AuthButton,
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    uuidv4.mockReturnValue('1234-5678-90ab-cdef');
+    getUserFromSession.mockReturnValue({ name: 'John Doe' });
+  },
+};
+
+export const LogIn = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```ts filename="EventForm.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { expect, mocked } from 'storybook/test';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+const meta: Meta = {
+  component: 'demo-auth-button',
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
+    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const LogIn: Story = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
+
+```js filename="EventForm.stories.js" renderer="web-components" language="js"
+import { expect } from 'storybook/test';
+
+import { v4 as uuidv4 } from 'uuid';
+import { getUserFromSession } from '../lib/session';
+
+export default {
+  component: 'demo-auth-button',
+  // 👇 This will run before each story is rendered
+  beforeEach: async () => {
+    // 👇 Force known, consistent behavior for mocked modules
+    uuidv4.mockReturnValue('1234-5678-90ab-cdef');
+    getUserFromSession.mockReturnValue({ name: 'John Doe' });
+  },
+};
+
+export const LogIn = {
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByRole('button', { name: 'Sign in' });
+    userEvent.click(button);
+
+    // Assert that the getUserFromSession function was called
+    expect(getUserFromSession).toHaveBeenCalled();
+  },
+};
+```
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index c80e13b104f1..7d6c419668e5 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -26,6 +26,8 @@ export function AuthButton() {
 }
 ```
 
+The above example is written with React, but the same principles apply to other renderers like Vue, Svelte, or Web Components. The important part is the usage of the two module dependencies.
+
 When writing stories or tests for this component, you may want to mock the `getUserFromSession` function to control the user data returned, or mock the `uuidv4` function to return a predictable ID. This allows you to test the component's behavior without relying on the actual implementations of these modules.
 
 For maximum flexibility, Storybook provides three ways to mock modules for your stories. Let's walk through each of them, starting with the most straightforward approach.
@@ -57,17 +59,9 @@ For most cases, you should register a mocked module as spy-only, by setting the
 
 For example, if you want to spy on the `getUserFromSession` function and the `uuidv4` function from the `uuid` package, you can call the `sb.mock` utility function in your `.storybook/preview.js|ts` file:
 
-{/* TODO: Snippetize */}
-```ts title=".storybook/preview.ts"
-import { sb } from 'storybook/test';
+<CodeSnippets path="automock-register-spy.md" />
 
-// 👇 Automatically spies on all exports from the `lib/session` local module
-sb.mock('../lib/session.ts', { spy: true });
-// 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
-sb.mock('uuid', { spy: true });
-
-// ...rest of the file
-```
+If you need to mock an external module that has a deeper import path (e.g. `lodash-es/add`), register the mock with that path.
 
 You can then [control the behavior of these modules](#using-automocked-modules-in-stories) and make assertions about them in your stories, such as checking if a function was called or what arguments it was called with.
 
@@ -75,17 +69,7 @@ You can then [control the behavior of these modules](#using-automocked-modules-i
 
 For cases where you need to prevent the original module's functionality from executing, set the `spy` option to `false` (or omit it, because that is the default value). This will automatically replace all exports from the module with [Vitest mock functions](https://vitest.dev/api/mock.html), allowing you to control their behavior and make assertions while being certain that the original functionality never runs.
 
-{/* TODO: Snippetize */}
-```ts title=".storybook/preview.ts"
-import { sb } from 'storybook/test';
-
-// 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
-sb.mock('../lib/session.ts');
-// 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
-sb.mock('uuid');
-
-// ...rest of the file
-```
+<CodeSnippets path="automock-register-full.md" />
 
 <Callout variant="warning">
 
@@ -107,7 +91,7 @@ export function getUserFromSession() {
 }
 ```
 
-For packages in your `node_modules`, create a `__mocks__` directory in the root of your project and create the mock file there. For example, to mock the `uuid` package, create a file named `uuid.js|ts` in the `__mocks__` directory:
+For packages in your `node_modules`, create a `__mocks__` directory in the root of your project and create the mock file there. For example, to mock the `uuid` package, create a file named `uuid.js` in the `__mocks__` directory:
 
 ```js title="__mocks__/uuid.js"
 export function v4() {
@@ -115,7 +99,14 @@ export function v4() {
 }
 ```
 
-The root of your project is typically the directory where `.git` is located. You can set the project root manually by providing the `STORYBOOK_PROJECT_ROOT` environment variable when running or building Storybook.
+If you need to mock an external module that has a deeper import path (e.g. `lodash-es/add`), create a corresponding mock file (e.g. `__mocks__/lodash-es/add.js`) in the root of your project.
+
+The root of your project is determined differently depending on your builder:
+
+- For Vite projects, the root is equivalent to `process.cwd()`, which is the directory where you run the Storybook command, or the `root` definition in your Vite configuration.
+- For Webpack projects, the root is equivalent to `process.cwd()`, which is the directory where you run the Storybook command, or the `context` definition in your Webpack configuration.
+
+You can set the project root manually by providing the `STORYBOOK_PROJECT_ROOT` environment variable when running or building Storybook.
 
 <Callout variant="info">
 
@@ -127,17 +118,7 @@ They must export the same named exports as the original module. If you want to m
 
 You can then use the `sb.mock` utility to register these mock files in your `preview.js|ts` file:
 
-{/* TODO: Snippetize */}
-```ts title=".storybook/preview.ts"
-import { sb } from 'storybook/test';
-
-// 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
-sb.mock('../lib/session.ts');
-// 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
-sb.mock('uuid');
-
-// ...rest of the file
-```
+<CodeSnippets path="automock-register-mock-file.md" />
 
 Note that the API for registering automatically mocked modules and mock files is the same. The only difference is that `sb.mock` will first look for a mock file in the appropriate directory before automatically mocking the module.
 
@@ -145,38 +126,7 @@ Note that the API for registering automatically mocked modules and mock files is
 
 All registered automocked modules are used the same way within your stories. You can control the behavior, such as defining what it returns, and make assertions about the modules.
 
-{/* TODO: Snippetize */}
-```ts title="AuthButton.stories.ts"
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, mocked } from 'storybook/test';
-import { AuthButton } from './AuthButton';
-
-import { v4 as uuidv4 } from 'uuid';
-import { getUserFromSession } from '../lib/session';
-
-const meta = {
-  component: AuthButton,
-  // 👇 This will run before each story is rendered
-  beforeEach: async () => {
-    // 👇 Force known, consistent behavior for mocked modules
-    mocked(uuidv4).mockReturnValue('1234-5678-90ab-cdef');
-    mocked(getUserFromSession).mockReturnValue({ name: 'John Doe' });
-  },
-} satisfies Meta<typeof AuthButton>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const LogIn: Story = {
-  play: async ({ canvas, userEvent }) => {
-    const button = canvas.getByRole('button', { name: 'Sign in' });
-    userEvent.click(button);
-
-    // Assert that the getUserFromSession function was called
-    expect(getUserFromSession).toHaveBeenCalled();
-  },
-};
-```
+<CodeSnippets path="automocked-modules-in-story.md" />
 
 Mocked functions created with the `sb.mock` utility are full [Vitest mock functions](https://vitest.dev/api/mock.html), which means you can use all the methods available on them. Some of the most useful methods include:
 

From e4cd834affdda5b8afefcd18912caed115db699f Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 31 Jul 2025 11:37:38 -0600
Subject: [PATCH 017/130] More details about project roots

---
 .../mocking-data-and-modules/mocking-modules.mdx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index 7d6c419668e5..c9be3652388f 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -103,10 +103,13 @@ If you need to mock an external module that has a deeper import path (e.g. `loda
 
 The root of your project is determined differently depending on your builder:
 
-- For Vite projects, the root is equivalent to `process.cwd()`, which is the directory where you run the Storybook command, or the `root` definition in your Vite configuration.
-- For Webpack projects, the root is equivalent to `process.cwd()`, which is the directory where you run the Storybook command, or the `context` definition in your Webpack configuration.
+**Vite projects**
 
-You can set the project root manually by providing the `STORYBOOK_PROJECT_ROOT` environment variable when running or building Storybook.
+The root `__mocks__` directory should be placed in the [`root` directory](https://vite.dev/config/shared-options.html#root), as defined in your project's Vite configuration. If that is unavailable, it defaults to the directory containing your `.storybook` directory.
+
+**Webpack projects**
+
+The root `__mocks__` directory should be placed in the [`context` directory](https://webpack.js.org/configuration/entry-context/#context), as defined in your project's Webpack configuration. If that is unavailable, it defaults to root of your repository.
 
 <Callout variant="info">
 

From 8483d0b828a25462eb37187b564acd27b5f0ad15 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 31 Jul 2025 11:44:29 -0600
Subject: [PATCH 018/130] Fixes

---
 docs/_snippets/automock-register-full.md      |  2 +-
 docs/_snippets/automock-register-mock-file.md |  2 +-
 docs/_snippets/automock-register-spy.md       |  2 +-
 docs/_snippets/automocked-modules-in-story.md | 18 +++++++++---------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/_snippets/automock-register-full.md b/docs/_snippets/automock-register-full.md
index f4d448838dc0..5bcaaad2b28d 100644
--- a/docs/_snippets/automock-register-full.md
+++ b/docs/_snippets/automock-register-full.md
@@ -13,7 +13,7 @@ sb.mock(import('uuid'));
 import { sb } from 'storybook/test';
 
 // 👇 Automatically replaces all exports from the `lib/session` local module with mock functions
-sb.mock('../lib/session.ts');
+sb.mock('../lib/session.js');
 // 👇 Automatically replaces all exports from the `uuid` package in `node_modules` with mock functions
 sb.mock('uuid');
 
diff --git a/docs/_snippets/automock-register-mock-file.md b/docs/_snippets/automock-register-mock-file.md
index 6ecefc4ffbb1..a4febca91487 100644
--- a/docs/_snippets/automock-register-mock-file.md
+++ b/docs/_snippets/automock-register-mock-file.md
@@ -13,7 +13,7 @@ sb.mock(import('uuid'));
 import { sb } from 'storybook/test';
 
 // 👇 Replaces imports of this module with imports to `../lib/__mocks__/session.ts`
-sb.mock('../lib/session.ts');
+sb.mock('../lib/session.js');
 // 👇 Replaces imports of this module with imports to `../__mocks__/uuid.ts`
 sb.mock('uuid');
 
diff --git a/docs/_snippets/automock-register-spy.md b/docs/_snippets/automock-register-spy.md
index 17f667d9c52a..15486afa63b0 100644
--- a/docs/_snippets/automock-register-spy.md
+++ b/docs/_snippets/automock-register-spy.md
@@ -13,7 +13,7 @@ sb.mock(import('uuid'), { spy: true });
 import { sb } from 'storybook/test';
 
 // 👇 Automatically spies on all exports from the `lib/session` local module
-sb.mock('../lib/session.ts', { spy: true });
+sb.mock('../lib/session.js', { spy: true });
 // 👇 Automatically spies on all exports from the `uuid` package in `node_modules`
 sb.mock('uuid', { spy: true });
 
diff --git a/docs/_snippets/automocked-modules-in-story.md b/docs/_snippets/automocked-modules-in-story.md
index b1edf2aacb3b..9aa23a41f93f 100644
--- a/docs/_snippets/automocked-modules-in-story.md
+++ b/docs/_snippets/automocked-modules-in-story.md
@@ -1,4 +1,4 @@
-```ts filename="EventForm.stories.ts" renderer="angular" language="ts"
+```ts filename="AuthButton.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { expect, mocked } from 'storybook/test';
 
@@ -65,7 +65,7 @@ export const LogIn: Story = {
 };
 ```
 
-```js filename="EventForm.stories.js" renderer="common" language="js"
+```js filename="AuthButton.stories.js" renderer="common" language="js"
 import { expect } from 'storybook/test';
 
 import { AuthButton } from './AuthButton';
@@ -94,7 +94,7 @@ export const LogIn = {
 };
 ```
 
-```svelte filename="EventForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="AuthButton.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { expect, mocked } from 'storybook/test';
@@ -127,7 +127,7 @@ export const LogIn = {
 />
 ```
 
-```ts filename="EventForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+```ts filename="AuthButton.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect, mocked } from 'storybook/test';
@@ -161,10 +161,10 @@ export const LogIn: Story = {
 };
 ```
 
-```svelte filename="EventForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="AuthButton.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { expect, mocked } from 'storybook/test';
+  import { expect } from 'storybook/test';
 
   import { AuthButton } from './AuthButton.svelte';
 
@@ -194,7 +194,7 @@ export const LogIn: Story = {
 />
 ```
 
-```js filename="EventForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+```js filename="AuthButton.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import { expect } from 'storybook/test';
 
 import { AuthButton } from './AuthButton.svelte';
@@ -223,7 +223,7 @@ export const LogIn = {
 };
 ```
 
-```ts filename="EventForm.stories.ts" renderer="web-components" language="ts"
+```ts filename="AuthButton.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { expect, mocked } from 'storybook/test';
 
@@ -254,7 +254,7 @@ export const LogIn: Story = {
 };
 ```
 
-```js filename="EventForm.stories.js" renderer="web-components" language="js"
+```js filename="AuthButton.stories.js" renderer="web-components" language="js"
 import { expect } from 'storybook/test';
 
 import { v4 as uuidv4 } from 'uuid';

From f6868f0a34fc6e74b3531944b8c16e999d7df82c Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 31 Jul 2025 14:33:13 -0600
Subject: [PATCH 019/130] Spell out `process.cwd` as root

---
 .../mocking-data-and-modules/mocking-modules.mdx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index c9be3652388f..0f2b6c5ad8ca 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -105,11 +105,11 @@ The root of your project is determined differently depending on your builder:
 
 **Vite projects**
 
-The root `__mocks__` directory should be placed in the [`root` directory](https://vite.dev/config/shared-options.html#root), as defined in your project's Vite configuration. If that is unavailable, it defaults to the directory containing your `.storybook` directory.
+The root `__mocks__` directory should be placed in the [`root` directory](https://vite.dev/config/shared-options.html#root), as defined in your project's Vite configuration (typically `process.cwd()`) If that is unavailable, it defaults to the directory containing your `.storybook` directory.
 
 **Webpack projects**
 
-The root `__mocks__` directory should be placed in the [`context` directory](https://webpack.js.org/configuration/entry-context/#context), as defined in your project's Webpack configuration. If that is unavailable, it defaults to root of your repository.
+The root `__mocks__` directory should be placed in the [`context` directory](https://webpack.js.org/configuration/entry-context/#context), as defined in your project's Webpack configuration (typically `process.cwd()`). If that is unavailable, it defaults to the root of your repository.
 
 <Callout variant="info">
 

From 09e097b16a44828cf66465268448196c1da62a6d Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:22:05 +0800
Subject: [PATCH 020/130] Telemetry: Send index stats on dev exit

---
 code/core/src/core-server/dev-server.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/code/core/src/core-server/dev-server.ts b/code/core/src/core-server/dev-server.ts
index d6a06ca5155e..fbd956dfed50 100644
--- a/code/core/src/core-server/dev-server.ts
+++ b/code/core/src/core-server/dev-server.ts
@@ -7,6 +7,7 @@ import compression from '@polka/compression';
 import polka from 'polka';
 import invariant from 'tiny-invariant';
 
+import { telemetry } from '../telemetry';
 import type { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { doTelemetry } from './utils/doTelemetry';
 import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
@@ -19,6 +20,7 @@ import { openInBrowser } from './utils/open-in-browser';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
 import { useStatics } from './utils/server-statics';
+import { summarizeIndex } from './utils/summarizeIndex';
 
 export async function storybookDevServer(options: Options) {
   const [server, core] = await Promise.all([getServer(options), options.presets.apply('core')]);
@@ -130,5 +132,28 @@ export async function storybookDevServer(options: Options) {
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, initializedStoryIndexGenerator, options);
 
+  // Duplicative to withTelemetry's cancelTelemetry because
+  // - this is a long-running process and withTelemetry has already exited
+  // - we want to report the index stats and don't have it e.g. init
+  async function cancelTelemetry() {
+    const payload = { eventType: 'dev' };
+    try {
+      const generator = await initializedStoryIndexGenerator;
+      const indexAndStats = await generator?.getIndexAndStats();
+      if (indexAndStats) {
+        Object.assign(payload, {
+          storyIndex: summarizeIndex(indexAndStats.storyIndex),
+          storyStats: indexAndStats.stats,
+        });
+      }
+    } catch (err) {}
+    await telemetry('canceled', payload, { immediate: true });
+    process.exit(0);
+  }
+
+  if (!core?.disableTelemetry) {
+    process.on('SIGINT', cancelTelemetry);
+  }
+
   return { previewResult, managerResult, address, networkAddress };
 }

From a08989ba5583395a54de9341b3835e4d7a8a39ad Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 1 Aug 2025 09:51:16 +0800
Subject: [PATCH 021/130] Fix test install in agentic environments

---
 code/lib/create-storybook/src/initiate.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index 3404532f8d34..326be9d0bac9 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -476,7 +476,8 @@ export async function doInitiate(options: CommandOptions): Promise<
   let selectedFeatures = new Set<GeneratorFeature>(options.features || []);
   if (installType === 'recommended') {
     selectedFeatures.add('docs');
-    if (isInteractive) {
+    // Don't install in CI but install in non-TTY environments like agentic installs
+    if (!isCI()) {
       selectedFeatures.add('test');
     }
     if (newUser) {

From 53e5d1d7102a26aa95e706f47753b2db575c4e8e Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 1 Aug 2025 15:47:05 +0200
Subject: [PATCH 022/130] Introduce a __STORYBOOK_UNSAFE_TOCBOT__ option from
 addon docs

---
 code/addons/docs/src/preview.ts   | 7 +++++++
 code/addons/docs/src/typings.d.ts | 1 +
 2 files changed, 8 insertions(+)

diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
index 713352b025ea..4a5a57123b12 100644
--- a/code/addons/docs/src/preview.ts
+++ b/code/addons/docs/src/preview.ts
@@ -1,5 +1,12 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
+import * as tocbot from 'tocbot';
+
+if (!globalThis.__STORYBOOK_UNSAFE_TOCBOT__) {
+  // Users that load dynamic content need to have a way to refresh the TOC, so we expose the tocbot instance
+  globalThis.__STORYBOOK_UNSAFE_TOCBOT__ = tocbot.default ?? tocbot;
+}
+
 const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
   (acc, entry) => {
     const [tag, option] = entry;
diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts
index 468759c8ba22..2deb8921d2ad 100644
--- a/code/addons/docs/src/typings.d.ts
+++ b/code/addons/docs/src/typings.d.ts
@@ -7,6 +7,7 @@ declare var __DOCS_CONTEXT__: any;
 declare var PREVIEW_URL: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var TAGS_OPTIONS: import('storybook/internal/types').TagsOptions;
+declare var __STORYBOOK_UNSAFE_TOCBOT__: typeof import('tocbot').default;
 
 declare module '*.md';
 declare module '*.md?raw';

From 0510d857feb94806517c99030e09b053488b9d19 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 1 Aug 2025 16:55:47 +0200
Subject: [PATCH 023/130] lazy load lazy-universal-dotenv

---
 code/core/src/common/utils/envs.ts                 | 7 +++----
 code/core/src/core-server/presets/common-preset.ts | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/core/src/common/utils/envs.ts b/code/core/src/common/utils/envs.ts
index 5fcde6e41cde..e825bd6af2ae 100644
--- a/code/core/src/common/utils/envs.ts
+++ b/code/core/src/common/utils/envs.ts
@@ -1,15 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - Needed for Angular sandbox running without --no-link option. Do NOT convert to @ts-expect-error!
-import { getEnvironment } from 'lazy-universal-dotenv';
-
 import { nodePathsToArray } from './paths';
 
 // Load environment variables starts with STORYBOOK_ to the client side.
 
-export function loadEnvs(options: { production?: boolean } = {}): {
+export async function loadEnvs(options: { production?: boolean } = {}): Promise<{
   stringified: Record<string, string>;
   raw: Record<string, string>;
-} {
+}> {
+  const { getEnvironment } = await import('lazy-universal-dotenv');
   const defaultNodeEnv = options.production ? 'production' : 'development';
 
   const env: Record<string, string | undefined> = {
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index cb1601e56e6f..d3a402e3fc64 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -144,7 +144,8 @@ export const previewHead = async (base: any, { configDir, presets }: Options) =>
 };
 
 export const env = async () => {
-  return loadEnvs({ production: true }).raw;
+  const { raw } = await loadEnvs({ production: true });
+  return raw;
 };
 
 export const previewBody = async (base: any, { configDir, presets }: Options) => {

From 4988688299340f54adc2267150137ee65c9a1dd6 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 1 Aug 2025 15:27:15 +0000
Subject: [PATCH 024/130] Write changelog for 9.2.0-alpha.1 [skip ci]

---
 CHANGELOG.prerelease.md | 6 ++++++
 code/package.json       | 3 ++-
 docs/versions/next.json | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 7410a7c665a8..4130c77de4da 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,9 @@
+## 9.2.0-alpha.1
+
+- Addon Docs: Add `__STORYBOOK_UNSAFE_TOCBOT__` global - [#32176](https://github.com/storybookjs/storybook/pull/32176), thanks @yannbf!
+- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!
+- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!
+
 ## 9.2.0-alpha.0
 
 
diff --git a/code/package.json b/code/package.json
index e2adbdb59597..3dd33287aa26 100644
--- a/code/package.json
+++ b/code/package.json
@@ -285,5 +285,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "9.2.0-alpha.1"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 1ac8c7a5236d..47e250f0d12b 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"9.2.0-alpha.0","info":{"plain":""}}
+{"version":"9.2.0-alpha.1","info":{"plain":"- Addon Docs: Add `__STORYBOOK_UNSAFE_TOCBOT__` global - [#32176](https://github.com/storybookjs/storybook/pull/32176), thanks @yannbf!\n- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!\n- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!"}}

From f148faedf271e262c73b48ad1a0ce384f667e19c Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 1 Aug 2025 10:26:23 -0600
Subject: [PATCH 025/130] Move troubleshooting to bottom

---
 .../mocking-data-and-modules/mocking-modules.mdx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
index 0f2b6c5ad8ca..bb9d592ad24f 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx
@@ -170,14 +170,6 @@ While this feature uses Vitest's mocking engine, the implementation within Story
 - Runtime Mocking: While the module swap is static, you can still control the behavior of the mocked functions at runtime within a play function or `beforeEach` hook (e.g., `mocked(myFunction).mockReturnValue('new value')`).
 - No Factory Functions: The `sb.mock()` API does not accept a factory function as its second argument (e.g., `sb.mock('path', () => ({...}))`). This is because all mocking decisions are resolved at build time, whereas factories are executed at runtime.
 
-### Troubleshooting
-
-#### Receiving an `exports is not defined` error
-
-Webpack projects may encounter an `exports is not defined` error when using automocking. This is usually caused by attempting to mock a module with CommonJS (CJS) entry points. Automocking with Webpack only works with modules that have ESModules (ESM) entry points exclusively, so you must use a [mock file](#mock-files) to mock CJS modules.
-
----
-
 ## Alternative methods
 
 If [automocking](#automocking) is not suitable for your project, there are two alternative methods to mock modules in Storybook: [subpath imports](#subpath-imports) and [builder aliases](#builder-aliases). These methods require a bit more setup but provide similar functionality to automocking, allowing you to control the behavior of modules in your stories.
@@ -331,3 +323,11 @@ Here's an example of using the [`mockdate`](https://github.com/boblauer/MockDate
 <CodeSnippets path="before-each-in-meta-mock-date.md" />
 
 {/* prettier-ignore-end */}
+
+-----
+
+## Troubleshooting
+
+### Receiving an `exports is not defined` error
+
+Webpack projects may encounter an `exports is not defined` error when using [automocking](#automocking). This is usually caused by attempting to mock a module with CommonJS (CJS) entry points. Automocking with Webpack only works with modules that have ESModules (ESM) entry points exclusively, so you must use a [mock file](#mock-files) to mock CJS modules.

From 04e1436b6995dc49bd1fb0669798d542eace5e1a Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 1 Aug 2025 16:27:08 +0000
Subject: [PATCH 026/130] Bump version from "9.2.0-alpha.0" to "9.2.0-alpha.1"
 [skip ci]

---
 code/addons/a11y/package.json                 |  2 +-
 code/addons/docs/package.json                 |  2 +-
 code/addons/jest/package.json                 |  2 +-
 code/addons/links/package.json                |  2 +-
 code/addons/onboarding/package.json           |  2 +-
 code/addons/pseudo-states/package.json        |  2 +-
 code/addons/themes/package.json               |  2 +-
 code/addons/vitest/package.json               |  2 +-
 code/builders/builder-vite/package.json       |  2 +-
 code/builders/builder-webpack5/package.json   |  2 +-
 code/core/package.json                        |  2 +-
 code/core/src/common/versions.ts              | 86 +++++++++----------
 code/core/src/manager-api/version.ts          |  2 +-
 code/frameworks/angular/package.json          |  2 +-
 code/frameworks/ember/package.json            |  2 +-
 code/frameworks/html-vite/package.json        |  2 +-
 code/frameworks/nextjs-vite/package.json      |  2 +-
 code/frameworks/nextjs/package.json           |  2 +-
 code/frameworks/preact-vite/package.json      |  2 +-
 .../react-native-web-vite/package.json        |  2 +-
 code/frameworks/react-vite/package.json       |  2 +-
 code/frameworks/react-webpack5/package.json   |  2 +-
 code/frameworks/server-webpack5/package.json  |  2 +-
 code/frameworks/svelte-vite/package.json      |  2 +-
 code/frameworks/sveltekit/package.json        |  2 +-
 code/frameworks/vue3-vite/package.json        |  2 +-
 .../web-components-vite/package.json          |  2 +-
 code/lib/cli-sb/package.json                  |  2 +-
 code/lib/cli-storybook/package.json           |  2 +-
 code/lib/codemod/package.json                 |  2 +-
 code/lib/core-webpack/package.json            |  2 +-
 code/lib/create-storybook/package.json        |  2 +-
 code/lib/csf-plugin/package.json              |  2 +-
 code/lib/eslint-plugin/package.json           |  2 +-
 code/lib/react-dom-shim/package.json          |  2 +-
 code/package.json                             |  5 +-
 code/presets/create-react-app/package.json    |  2 +-
 code/presets/react-webpack/package.json       |  2 +-
 code/presets/server-webpack/package.json      |  2 +-
 code/renderers/html/package.json              |  2 +-
 code/renderers/preact/package.json            |  2 +-
 code/renderers/react/package.json             |  2 +-
 code/renderers/server/package.json            |  2 +-
 code/renderers/svelte/package.json            |  2 +-
 code/renderers/vue3/package.json              |  2 +-
 code/renderers/web-components/package.json    |  2 +-
 46 files changed, 89 insertions(+), 90 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 99016e43bd36..991da00db8ea 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index ca975da0fe4d..2694a297a7c1 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 679bd118f6d9..a23a5636a34b 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index ed351d6fac19..ba979fa92f96 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 90265436a7f6..f068f507ff29 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/pseudo-states/package.json b/code/addons/pseudo-states/package.json
index 9969e8779aef..fbe1b33bceaf 100644
--- a/code/addons/pseudo-states/package.json
+++ b/code/addons/pseudo-states/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 220218bde61d..f2e5f87b47f0 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json
index eee4201fc3a4..0aafd8e56b87 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/vitest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-vitest",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook addon for testing components",
   "keywords": [
     "storybook-addons",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 1793f1b28e2b..59e4d1a6a268 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 9bf33ad994eb..0832654bf388 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/package.json b/code/core/package.json
index 81b8e09bec8c..11a1ddc5f769 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index ff8b97c51ba2..0c5e2ae37c8f 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,46 +1,46 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '9.2.0-alpha.0',
-  '@storybook/addon-docs': '9.2.0-alpha.0',
-  '@storybook/addon-jest': '9.2.0-alpha.0',
-  '@storybook/addon-links': '9.2.0-alpha.0',
-  '@storybook/addon-onboarding': '9.2.0-alpha.0',
-  'storybook-addon-pseudo-states': '9.2.0-alpha.0',
-  '@storybook/addon-themes': '9.2.0-alpha.0',
-  '@storybook/addon-vitest': '9.2.0-alpha.0',
-  '@storybook/builder-vite': '9.2.0-alpha.0',
-  '@storybook/builder-webpack5': '9.2.0-alpha.0',
-  storybook: '9.2.0-alpha.0',
-  '@storybook/angular': '9.2.0-alpha.0',
-  '@storybook/ember': '9.2.0-alpha.0',
-  '@storybook/html-vite': '9.2.0-alpha.0',
-  '@storybook/nextjs': '9.2.0-alpha.0',
-  '@storybook/nextjs-vite': '9.2.0-alpha.0',
-  '@storybook/preact-vite': '9.2.0-alpha.0',
-  '@storybook/react-native-web-vite': '9.2.0-alpha.0',
-  '@storybook/react-vite': '9.2.0-alpha.0',
-  '@storybook/react-webpack5': '9.2.0-alpha.0',
-  '@storybook/server-webpack5': '9.2.0-alpha.0',
-  '@storybook/svelte-vite': '9.2.0-alpha.0',
-  '@storybook/sveltekit': '9.2.0-alpha.0',
-  '@storybook/vue3-vite': '9.2.0-alpha.0',
-  '@storybook/web-components-vite': '9.2.0-alpha.0',
-  sb: '9.2.0-alpha.0',
-  '@storybook/cli': '9.2.0-alpha.0',
-  '@storybook/codemod': '9.2.0-alpha.0',
-  '@storybook/core-webpack': '9.2.0-alpha.0',
-  'create-storybook': '9.2.0-alpha.0',
-  '@storybook/csf-plugin': '9.2.0-alpha.0',
-  'eslint-plugin-storybook': '9.2.0-alpha.0',
-  '@storybook/react-dom-shim': '9.2.0-alpha.0',
-  '@storybook/preset-create-react-app': '9.2.0-alpha.0',
-  '@storybook/preset-react-webpack': '9.2.0-alpha.0',
-  '@storybook/preset-server-webpack': '9.2.0-alpha.0',
-  '@storybook/html': '9.2.0-alpha.0',
-  '@storybook/preact': '9.2.0-alpha.0',
-  '@storybook/react': '9.2.0-alpha.0',
-  '@storybook/server': '9.2.0-alpha.0',
-  '@storybook/svelte': '9.2.0-alpha.0',
-  '@storybook/vue3': '9.2.0-alpha.0',
-  '@storybook/web-components': '9.2.0-alpha.0',
+  '@storybook/addon-a11y': '9.2.0-alpha.1',
+  '@storybook/addon-docs': '9.2.0-alpha.1',
+  '@storybook/addon-jest': '9.2.0-alpha.1',
+  '@storybook/addon-links': '9.2.0-alpha.1',
+  '@storybook/addon-onboarding': '9.2.0-alpha.1',
+  'storybook-addon-pseudo-states': '9.2.0-alpha.1',
+  '@storybook/addon-themes': '9.2.0-alpha.1',
+  '@storybook/addon-vitest': '9.2.0-alpha.1',
+  '@storybook/builder-vite': '9.2.0-alpha.1',
+  '@storybook/builder-webpack5': '9.2.0-alpha.1',
+  storybook: '9.2.0-alpha.1',
+  '@storybook/angular': '9.2.0-alpha.1',
+  '@storybook/ember': '9.2.0-alpha.1',
+  '@storybook/html-vite': '9.2.0-alpha.1',
+  '@storybook/nextjs': '9.2.0-alpha.1',
+  '@storybook/nextjs-vite': '9.2.0-alpha.1',
+  '@storybook/preact-vite': '9.2.0-alpha.1',
+  '@storybook/react-native-web-vite': '9.2.0-alpha.1',
+  '@storybook/react-vite': '9.2.0-alpha.1',
+  '@storybook/react-webpack5': '9.2.0-alpha.1',
+  '@storybook/server-webpack5': '9.2.0-alpha.1',
+  '@storybook/svelte-vite': '9.2.0-alpha.1',
+  '@storybook/sveltekit': '9.2.0-alpha.1',
+  '@storybook/vue3-vite': '9.2.0-alpha.1',
+  '@storybook/web-components-vite': '9.2.0-alpha.1',
+  sb: '9.2.0-alpha.1',
+  '@storybook/cli': '9.2.0-alpha.1',
+  '@storybook/codemod': '9.2.0-alpha.1',
+  '@storybook/core-webpack': '9.2.0-alpha.1',
+  'create-storybook': '9.2.0-alpha.1',
+  '@storybook/csf-plugin': '9.2.0-alpha.1',
+  'eslint-plugin-storybook': '9.2.0-alpha.1',
+  '@storybook/react-dom-shim': '9.2.0-alpha.1',
+  '@storybook/preset-create-react-app': '9.2.0-alpha.1',
+  '@storybook/preset-react-webpack': '9.2.0-alpha.1',
+  '@storybook/preset-server-webpack': '9.2.0-alpha.1',
+  '@storybook/html': '9.2.0-alpha.1',
+  '@storybook/preact': '9.2.0-alpha.1',
+  '@storybook/react': '9.2.0-alpha.1',
+  '@storybook/server': '9.2.0-alpha.1',
+  '@storybook/svelte': '9.2.0-alpha.1',
+  '@storybook/vue3': '9.2.0-alpha.1',
+  '@storybook/web-components': '9.2.0-alpha.1',
 };
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index 4d9aa46aed7e..da9405f83de9 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '9.2.0-alpha.0';
+export const version = '9.2.0-alpha.1';
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 7fa0d9dc389f..d4168a091a22 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index aded4f3ae206..7d6b614ad02f 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Ember: Develop, document, and test Ember components in isolation",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index e85990660f83..f0a3b90c2d10 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index 6c077ee62dbd..02a5c6bd401b 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index b836c3ab921d..290de72091ea 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index f4d89039fbb3..99de50c3bc5a 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 64c89d303f91..630a06327dd6 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index de926383c8dc..4e5404bcde0c 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index e012ca94c1e3..a23b454a8e61 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 0184499d2685..cd6214d35f6f 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index dd4ff9b96eba..65369c3bc800 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 420c41e54caa..d7682d994fb4 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index fffa69f87045..82b43e81adf7 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index b589f3563fa7..3860138726de 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 2851a97b646d..dd7b99f04ae6 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 44fd7d267d59..fadfea160bdf 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index b67b31c359e6..7d163cb1ebb9 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 3946822feeeb..0baa63309428 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index ff90f2439624..8d5382c6c84e 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 36ea338e6ea7..1f0301941e5b 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json
index 6c6944503b24..68042b463c39 100644
--- a/code/lib/eslint-plugin/package.json
+++ b/code/lib/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Best practice rules for Storybook",
   "keywords": [
     "eslint",
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 1726680f0725..8caebb8a3437 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index 3dd33287aa26..d109e886e7bc 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -285,6 +285,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "9.2.0-alpha.1"
+  }
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index c581ae790f52..293cc781c3a4 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index dc5352c717d1..0bf9d7c28628 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 1aca127d2591..f3d1e0b88692 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index efd7035b4d1c..396f6ec30ce2 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 92b2f08c8b2e..c5c7a6407914 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 482e1cd0b041..15d062a79eab 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index d8faab118759..bbb4638a2823 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 72a74d1ca80b..740131dff48c 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 73ba656fe832..cd1d84095050 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 37a45d6ee9f4..85d1aceb9567 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "9.2.0-alpha.0",
+  "version": "9.2.0-alpha.1",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",

From 53046fe8dabfabef30fdfc4e0c80773159342c39 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 4 Aug 2025 14:36:11 +0800
Subject: [PATCH 027/130] Onboarding: Tweak referral wording in survey

---
 .../onboarding/src/features/IntentSurvey/IntentSurvey.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.tsx b/code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.tsx
index b9b703831ca1..282fbec199ee 100644
--- a/code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.tsx
+++ b/code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.tsx
@@ -111,7 +111,7 @@ export const IntentSurvey = ({
       },
     },
     referrer: {
-      label: 'How did you learn about Storybook?',
+      label: 'How did you discover Storybook?',
       type: 'select',
       required: true,
       options: shuffleObject({

From d92b88add36f22fdd9922061b651b4bb4572ac75 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Mon, 4 Aug 2025 08:50:57 +0000
Subject: [PATCH 028/130] Update CHANGELOG.md for v9.1.1 [skip ci]

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8979b190287d..7a3d4a5410ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 9.1.1
+
+- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!
+- Onboarding: Tweak referral wording in survey - [#32185](https://github.com/storybookjs/storybook/pull/32185), thanks @shilman!
+- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!
+
 ## 9.1.0
 
 Storybook 9.1 is packed with new features and improvements to enhance accessibility, streamline testing, and make your development workflow even smoother!

From bc01f9333508e0d443f10281b3edf7dd383e2dde Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 4 Aug 2025 14:19:34 +0200
Subject: [PATCH 029/130] add vitest integration support

---
 .../vitest/src/vitest-plugin/test-utils.ts    |   7 +-
 .../csf-tools/test-syntax/transformer.test.ts |   6 +-
 .../src/csf-tools/test-syntax/transformer.ts  |   5 +-
 .../vitest-plugin/transformer.test.ts         | 119 +++++++
 .../csf-tools/vitest-plugin/transformer.ts    | 306 +++++++++++-------
 5 files changed, 311 insertions(+), 132 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 0983d029c7fc..d27df877ef76 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -34,7 +34,8 @@ export const testStory = (
   exportName: string,
   story: ComposedStoryFn,
   meta: ComponentAnnotations,
-  skipTags: string[]
+  skipTags: string[],
+  testName?: string
 ) => {
   return async (context: TestContext & { story: ComposedStoryFn }) => {
     const annotations = getCsfFactoryAnnotations(story, meta);
@@ -60,6 +61,10 @@ export const testStory = (
     await setViewport(composedStory.parameters, composedStory.globals);
     await composedStory.run();
 
+    if (testName) {
+      await composedStory.runTest(testName);
+    }
+
     _task.meta.reports = composedStory.reporting.reports;
   };
 };
diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
index ff67e866971d..19ed0606e87d 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.test.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.test.ts
@@ -84,7 +84,7 @@ describe('transformer', () => {
             await Primary.play(context);
             console.log('test');
           },
-          name: "Primary: just a log"
+          name: "just a log"
         });
         export const PrimaryUsingContext = meta.story({
           ...Primary.composed,
@@ -93,7 +93,7 @@ describe('transformer', () => {
             await Primary.play(context);
             const button = context.canvas.getByRole('button');
           },
-          name: "Primary: using context"
+          name: "using context"
         });
         export const PrimaryDestructuringContext = meta.story({
           ...Primary.composed,
@@ -105,7 +105,7 @@ describe('transformer', () => {
             } = context;
             const button = await canvas.findByRole('button');
           },
-          name: "Primary: destructuring context"
+          name: "destructuring context"
         });
       `);
     });
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
index 6e93730ba7f9..5938a91b8997 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.ts
@@ -123,10 +123,7 @@ export async function testTransform({
               true // async
             )
           ),
-          t.objectProperty(
-            t.identifier('name'),
-            t.stringLiteral(`${storyInfo.name || storyExportName}: ${testName}`)
-          ),
+          t.objectProperty(t.identifier('name'), t.stringLiteral(testName)),
         ]);
 
         // Create export statement
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 7d9d89464aa2..3eff699a0bb4 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -784,6 +784,42 @@ describe('transformer', () => {
         _describe.skip("No valid tests found");
       `);
       });
+      it('should support test annotation', async () => {
+        const code = `
+        import { config } from '#.storybook/preview';
+        const meta = config.meta({ component: Button });
+        export const A = meta.story({});
+        A.test("foo", () => {}, { args: { primary: true }});
+        A.test("bar", () => {});
+      `;
+
+        const result = await transform({ code });
+
+        expect(result.code).toMatchInlineSnapshot(`
+          import { test as _test, expect as _expect, describe as _describe } from "vitest";
+          import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
+          import { config } from '#.storybook/preview';
+          const meta = config.meta({
+            component: Button,
+            title: "automatic/calculated/title"
+          });
+          export const A = meta.story({});
+          A.test("foo", () => {}, {
+            args: {
+              primary: true
+            }
+          });
+          A.test("bar", () => {});
+          const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _describe("A", () => {
+              _test("render test", _testStory("A", A, meta, []));
+              _test("foo", _testStory("A", A, meta, [], "foo"));
+              _test("bar", _testStory("A", A, meta, [], "bar"));
+            });
+          }
+        `);
+      });
     });
 
     describe('tags filtering mechanism', () => {
@@ -933,6 +969,89 @@ describe('transformer', () => {
         expect(originalPosition.line, 'original line location').toBe(originalPrimaryLine);
         expect(originalPosition.column, 'original column location').toBe(originalPrimaryColumn);
       });
+
+      it('should remap the location of story tests', async () => {
+        const originalCode = `
+        import { config } from '#.storybook/preview';
+        const meta = config.meta({});
+        export const Primary = meta.story({});
+        Primary.test("foo", () => {});
+      `;
+
+        const { code: transformedCode, map } = await transform({
+          code: originalCode,
+        });
+
+        expect(transformedCode).toMatchInlineSnapshot(`
+          import { test as _test, expect as _expect, describe as _describe } from "vitest";
+          import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
+          import { config } from '#.storybook/preview';
+          const meta = config.meta({
+            title: "automatic/calculated/title"
+          });
+          export const Primary = meta.story({});
+          Primary.test("foo", () => {});
+          const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _describe("Primary", () => {
+              _test("render test", _testStory("Primary", Primary, meta, []));
+              _test("foo", _testStory("Primary", Primary, meta, [], "foo"));
+            });
+          }
+        `);
+
+        const consumer = await new SourceMapConsumer(map as unknown as RawSourceMap);
+
+        // Locate `_test("render test"...` in the transformed code
+        const testPrimaryLine =
+          transformedCode.split('\n').findIndex((line) => line.includes('_test("render test"')) + 1;
+        const testPrimaryColumn = transformedCode
+          .split('\n')
+          [testPrimaryLine - 1].indexOf('_test("render test"');
+
+        // Get the original position from the source map for `_test("render test"...`
+        const originalPosition = consumer.originalPositionFor({
+          line: testPrimaryLine,
+          column: testPrimaryColumn,
+        });
+
+        // Locate `export const Primary` in the original code
+        const originalPrimaryLine =
+          originalCode.split('\n').findIndex((line) => line.includes('export const Primary')) + 1;
+        const originalPrimaryColumn = originalCode
+          .split('\n')
+          [originalPrimaryLine - 1].indexOf('export const Primary');
+
+        // The original locations of the transformed code should match with the ones of the original code
+        expect(originalPosition.line, 'original line location').toBe(originalPrimaryLine);
+        expect(originalPosition.column, 'original column location').toBe(originalPrimaryColumn);
+
+        // Locate `_test("foo"...` in the transformed code
+        const storyTestLine =
+          transformedCode.split('\n').findIndex((line) => line.includes('_test("foo"')) + 1;
+        const storyTestColumn = transformedCode
+          .split('\n')
+          [storyTestLine - 1].indexOf('_test("foo"');
+
+        // Get the original position from the source map for `_test("foo"...`
+        const originalTestPosition = consumer.originalPositionFor({
+          line: storyTestLine,
+          column: storyTestColumn,
+        });
+
+        // Locate `Primary.test("foo"'` in the original code
+        const originalStoryTestLine =
+          originalCode.split('\n').findIndex((line) => line.includes('Primary.test("foo"')) + 1;
+        const originalStoryTestColumn = originalCode
+          .split('\n')
+          [originalStoryTestLine - 1].indexOf('Primary.test("foo"');
+
+        // The original locations of the transformed code should match with the ones of the original code
+        expect(originalTestPosition.line, 'original line location').toBe(originalStoryTestLine);
+        expect(originalTestPosition.column, 'original column location').toBe(
+          originalStoryTestColumn
+        );
+      });
     });
   });
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 22745c1537e0..dc52d2a74ec0 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -96,7 +96,7 @@ export async function vitestTransform({
 
   // Filter out stories based on the passed tags filter
   const validStories: (typeof parsed)['_storyStatements'] = {};
-  Object.keys(parsed._stories).map((key) => {
+  Object.keys(parsed._stories).forEach((key) => {
     const finalTags = combineTags(
       'test',
       'dev',
@@ -133,143 +133,201 @@ export async function vitestTransform({
     ];
 
     ast.program.body.unshift(...imports);
-  } else {
-    const vitestExpectId = parsed._file.path.scope.generateUidIdentifier('expect');
-    const testStoryId = parsed._file.path.scope.generateUidIdentifier('testStory');
-    const skipTagsId = t.identifier(JSON.stringify(tagsFilter.skip));
-
-    /**
-     * In Storybook users might be importing stories from other story files. As a side effect, tests
-     * can get re-triggered. To avoid this, we add a guard to only run tests if the current file is
-     * the one running the test.
-     *
-     * Const isRunningFromThisFile = import.meta.url.includes(expect.getState().testPath ??
-     * globalThis.**vitest_worker**.filepath) if(isRunningFromThisFile) { ... }
-     */
-    function getTestGuardDeclaration() {
-      const isRunningFromThisFileId =
-        parsed._file.path.scope.generateUidIdentifier('isRunningFromThisFile');
-
-      // expect.getState().testPath
-      const testPathProperty = t.memberExpression(
-        t.callExpression(t.memberExpression(vitestExpectId, t.identifier('getState')), []),
-        t.identifier('testPath')
-      );
-
-      // There is a bug in Vitest where expect.getState().testPath is undefined when called outside of a test function so we add this fallback in the meantime
-      // https://github.com/vitest-dev/vitest/issues/6367
-      // globalThis.__vitest_worker__.filepath
-      const filePathProperty = t.memberExpression(
-        t.memberExpression(t.identifier('globalThis'), t.identifier('__vitest_worker__')),
-        t.identifier('filepath')
-      );
-
-      // Combine testPath and filepath using the ?? operator
-      const nullishCoalescingExpression = t.logicalExpression(
-        '??',
-        // TODO: switch order of testPathProperty and filePathProperty when the bug is fixed
-        // https://github.com/vitest-dev/vitest/issues/6367 (or probably just use testPathProperty)
-        filePathProperty,
-        testPathProperty
-      );
-
-      // Create the final expression: convertToFilePath(import.meta.url).includes(...)
-      const includesCall = t.callExpression(
-        t.memberExpression(
-          t.callExpression(t.identifier('convertToFilePath'), [
-            t.memberExpression(
-              t.memberExpression(t.identifier('import'), t.identifier('meta')),
-              t.identifier('url')
-            ),
-          ]),
-          t.identifier('includes')
-        ),
-        [nullishCoalescingExpression]
-      );
-
-      const isRunningFromThisFileDeclaration = t.variableDeclaration('const', [
-        t.variableDeclarator(isRunningFromThisFileId, includesCall),
-      ]);
-      return { isRunningFromThisFileDeclaration, isRunningFromThisFileId };
-    }
 
-    const { isRunningFromThisFileDeclaration, isRunningFromThisFileId } = getTestGuardDeclaration();
-
-    ast.program.body.push(isRunningFromThisFileDeclaration);
-
-    const getTestStatementForStory = ({
-      localName,
-      exportName,
-      testTitle,
-      node,
-    }: {
-      localName: string;
-      exportName: string;
-      testTitle: string;
-      node: t.Node;
-    }): t.ExpressionStatement => {
-      // Create the _test expression directly using the exportName identifier
-      const testStoryCall = t.expressionStatement(
-        t.callExpression(vitestTestId, [
-          t.stringLiteral(testTitle),
-          t.callExpression(testStoryId, [
-            t.stringLiteral(exportName),
-            t.identifier(localName),
-            t.identifier(metaExportName),
-            skipTagsId,
-          ]),
-        ])
-      );
+    return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
+  }
+
+  const vitestExpectId = parsed._file.path.scope.generateUidIdentifier('expect');
+  const testStoryId = parsed._file.path.scope.generateUidIdentifier('testStory');
+  const skipTagsId = t.identifier(JSON.stringify(tagsFilter.skip));
+
+  /**
+   * In Storybook users might be importing stories from other story files. As a side effect, tests
+   * can get re-triggered. To avoid this, we add a guard to only run tests if the current file is
+   * the one running the test.
+   *
+   * Const isRunningFromThisFile = import.meta.url.includes(expect.getState().testPath ??
+   * globalThis.**vitest_worker**.filepath) if(isRunningFromThisFile) { ... }
+   */
+  function getTestGuardDeclaration() {
+    const isRunningFromThisFileId =
+      parsed._file.path.scope.generateUidIdentifier('isRunningFromThisFile');
+
+    // expect.getState().testPath
+    const testPathProperty = t.memberExpression(
+      t.callExpression(t.memberExpression(vitestExpectId, t.identifier('getState')), []),
+      t.identifier('testPath')
+    );
+
+    // There is a bug in Vitest where expect.getState().testPath is undefined when called outside of a test function so we add this fallback in the meantime
+    // https://github.com/vitest-dev/vitest/issues/6367
+    // globalThis.__vitest_worker__.filepath
+    const filePathProperty = t.memberExpression(
+      t.memberExpression(t.identifier('globalThis'), t.identifier('__vitest_worker__')),
+      t.identifier('filepath')
+    );
+
+    // Combine testPath and filepath using the ?? operator
+    const nullishCoalescingExpression = t.logicalExpression(
+      '??',
+      // TODO: switch order of testPathProperty and filePathProperty when the bug is fixed
+      // https://github.com/vitest-dev/vitest/issues/6367 (or probably just use testPathProperty)
+      filePathProperty,
+      testPathProperty
+    );
+
+    // Create the final expression: import.meta.url.includes(...)
+    const includesCall = t.callExpression(
+      t.memberExpression(
+        t.callExpression(t.identifier('convertToFilePath'), [
+          t.memberExpression(
+            t.memberExpression(t.identifier('import'), t.identifier('meta')),
+            t.identifier('url')
+          ),
+        ]),
+        t.identifier('includes')
+      ),
+      [nullishCoalescingExpression]
+    );
+
+    const isRunningFromThisFileDeclaration = t.variableDeclaration('const', [
+      t.variableDeclarator(isRunningFromThisFileId, includesCall),
+    ]);
+    return { isRunningFromThisFileDeclaration, isRunningFromThisFileId };
+  }
+
+  const { isRunningFromThisFileDeclaration, isRunningFromThisFileId } = getTestGuardDeclaration();
+
+  ast.program.body.push(isRunningFromThisFileDeclaration);
+
+  const getTestStatementForStory = ({
+    localName,
+    exportName,
+    testTitle,
+    node,
+    overrideSourcemap = true,
+  }: {
+    localName: string;
+    exportName: string;
+    testTitle: string;
+    node: t.Node;
+    overrideSourcemap?: boolean;
+  }): t.ExpressionStatement => {
+    // Create the _test expression directly using the exportName identifier
+    const testStoryCall = t.expressionStatement(
+      t.callExpression(vitestTestId, [
+        t.stringLiteral(testTitle),
+        t.callExpression(testStoryId, [
+          t.stringLiteral(exportName),
+          t.identifier(localName),
+          t.identifier(metaExportName),
+          skipTagsId,
+        ]),
+      ])
+    );
 
+    if (overrideSourcemap) {
       // Preserve sourcemaps location
       testStoryCall.loc = node.loc;
+    }
 
-      // Return just the testStoryCall as composeStoryCall is not needed
-      return testStoryCall;
-    };
+    // Return just the testStoryCall as composeStoryCall is not needed
+    return testStoryCall;
+  };
+
+  const getDescribeStatementForStory = (options: {
+    localName: string;
+    exportName: string;
+    tests: (typeof parsed._storyTests)[string];
+    node: t.Node;
+  }): t.ExpressionStatement => {
+    const { localName, exportName, tests, node } = options;
+    const describeBlock = t.callExpression(vitestDescribeId, [
+      t.stringLiteral(exportName),
+      t.arrowFunctionExpression(
+        [],
+        t.blockStatement([
+          getTestStatementForStory({
+            ...options,
+            testTitle: 'render test',
+            overrideSourcemap: false,
+          }),
+          ...tests.map(({ name: testName, node: testNode }) => {
+            const testStatement = t.expressionStatement(
+              t.callExpression(vitestTestId, [
+                t.stringLiteral(testName),
+                t.callExpression(testStoryId, [
+                  t.stringLiteral(exportName),
+                  t.identifier(localName),
+                  t.identifier(metaExportName),
+                  t.arrayExpression([]),
+                  t.stringLiteral(testName),
+                ]),
+              ])
+            );
+            testStatement.loc = testNode.loc;
+            return testStatement;
+          }),
+        ])
+      ),
+    ]);
 
-    const storyTestStatements = Object.entries(validStories)
-      .map(([exportName, node]) => {
-        if (node === null) {
-          logger.warn(
-            dedent`
+    describeBlock.loc = node.loc;
+    return t.expressionStatement(describeBlock);
+  };
+
+  const storyTestStatements = Object.entries(validStories)
+    .map(([exportName, node]) => {
+      if (node === null) {
+        logger.warn(
+          dedent`
             [Storybook]: Could not transform "${exportName}" story into test at "${fileName}".
             Please make sure to define stories in the same file and not re-export stories coming from other files".
           `
-          );
-          return;
-        }
+        );
+        return;
+      }
 
-        const localName = parsed._stories[exportName].localName ?? exportName;
-        // use the story's name as the test title for vitest, and fallback to exportName
-        const testTitle = parsed._stories[exportName].name ?? exportName;
-        return getTestStatementForStory({ testTitle, localName, exportName, node });
-      })
-      .filter((st) => !!st) as t.ExpressionStatement[];
+      const localName = parsed._stories[exportName].localName ?? exportName;
+      // use the story's name as the test title for vitest, and fallback to exportName
+      const testTitle = parsed._stories[exportName].name ?? exportName;
+      const tests = parsed._storyTests[exportName];
 
-    const testBlock = t.ifStatement(isRunningFromThisFileId, t.blockStatement(storyTestStatements));
+      if (tests?.length > 0) {
+        return getDescribeStatementForStory({ localName, exportName, tests, node });
+      }
 
-    ast.program.body.push(testBlock);
+      return getTestStatementForStory({ testTitle, localName, exportName, node });
+    })
+    .filter((st) => !!st) as t.ExpressionStatement[];
 
-    const imports = [
-      t.importDeclaration(
-        [
-          t.importSpecifier(vitestTestId, t.identifier('test')),
-          t.importSpecifier(vitestExpectId, t.identifier('expect')),
-        ],
-        t.stringLiteral('vitest')
-      ),
-      t.importDeclaration(
-        [
-          t.importSpecifier(testStoryId, t.identifier('testStory')),
-          t.importSpecifier(t.identifier('convertToFilePath'), t.identifier('convertToFilePath')),
-        ],
-        t.stringLiteral('@storybook/addon-vitest/internal/test-utils')
-      ),
-    ];
+  const testBlock = t.ifStatement(isRunningFromThisFileId, t.blockStatement(storyTestStatements));
 
-    ast.program.body.unshift(...imports);
-  }
+  ast.program.body.push(testBlock);
+
+  const hasTests = Object.keys(validStories).some(
+    (exportName) => parsed._storyTests[exportName]?.length > 0
+  );
+
+  const imports = [
+    t.importDeclaration(
+      [
+        t.importSpecifier(vitestTestId, t.identifier('test')),
+        t.importSpecifier(vitestExpectId, t.identifier('expect')),
+        ...(hasTests ? [t.importSpecifier(vitestDescribeId, t.identifier('describe'))] : []),
+      ],
+      t.stringLiteral('vitest')
+    ),
+    t.importDeclaration(
+      [
+        t.importSpecifier(testStoryId, t.identifier('testStory')),
+        t.importSpecifier(t.identifier('convertToFilePath'), t.identifier('convertToFilePath')),
+      ],
+      t.stringLiteral('@storybook/addon-vitest/internal/test-utils')
+    ),
+  ];
+
+  ast.program.body.unshift(...imports);
 
   return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
 }

From 5f9bb806df2cf74a6514835a90d1a64dddded427 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 6 Aug 2025 11:15:09 +0200
Subject: [PATCH 030/130] Make vitest integration work

---
 .../vitest/src/vitest-plugin/test-utils.ts    |  14 +-
 code/core/src/csf-tools/CsfFile.ts            |   2 +-
 .../csf-tools/test-syntax/transformer.test.ts |  11 +
 .../src/csf-tools/test-syntax/transformer.ts  | 227 +++++++++---------
 .../vitest-plugin/transformer.test.ts         |  16 +-
 .../csf-tools/vitest-plugin/transformer.ts    |   2 +-
 code/core/src/csf/csf-factories.ts            |  29 +--
 code/core/src/csf/story.ts                    |   3 +
 .../modules/store/csf/normalizeStory.ts       |   2 +
 .../modules/store/csf/portable-stories.ts     |  14 +-
 .../modules/store/csf/prepareStory.ts         |   1 +
 code/core/src/types/modules/composedStory.ts  |   5 +-
 code/core/src/types/modules/story.ts          |   2 +
 13 files changed, 182 insertions(+), 146 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index d27df877ef76..ffaed2cb47c9 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -1,5 +1,6 @@
 import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
+import { sanitize } from 'storybook/internal/csf';
 import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
 
 import { server } from '@vitest/browser/context';
@@ -56,15 +57,18 @@ export const testStory = (
     const _task = context.task as RunnerTask & {
       meta: TaskMeta & { storyId: string; reports: Report[] };
     };
-    _task.meta.storyId = composedStory.id;
-
-    await setViewport(composedStory.parameters, composedStory.globals);
-    await composedStory.run();
 
     if (testName) {
-      await composedStory.runTest(testName);
+      // TODO: this should be reworked
+      _task.meta.storyId = `${composedStory.id}-${sanitize(testName)}`;
+    } else {
+      _task.meta.storyId = composedStory.id;
     }
 
+    await setViewport(composedStory.parameters, composedStory.globals);
+
+    await composedStory.run(undefined, testName);
+
     _task.meta.reports = composedStory.reporting.reports;
   };
 };
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 228b9a614087..32f4b7245f8b 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -908,7 +908,7 @@ export class CsfFile {
             importPath: fileName,
             rawComponentPath: this._rawComponentPath,
             exportName,
-            name: `${story.name}: ${test.name}`,
+            name: test.name,
             title: this.meta?.title,
             metaId: this.meta?.id,
             tags: [...tags, 'test-fn'],
diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
index 19ed0606e87d..c82e495ca131 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.test.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.test.ts
@@ -77,6 +77,9 @@ describe('transformer', () => {
             label: 'Primary Button'
           }
         });
+        Primary.test('just a log', () => {
+          console.log('test');
+        });
         export const PrimaryJustALog = meta.story({
           ...Primary.composed,
           tags: ["test-fn"],
@@ -86,6 +89,9 @@ describe('transformer', () => {
           },
           name: "just a log"
         });
+        Primary.test('using context', context => {
+          const button = context.canvas.getByRole('button');
+        });
         export const PrimaryUsingContext = meta.story({
           ...Primary.composed,
           tags: ["test-fn"],
@@ -95,6 +101,11 @@ describe('transformer', () => {
           },
           name: "using context"
         });
+        Primary.test('destructuring context', async ({
+          canvas
+        }) => {
+          const button = await canvas.findByRole('button');
+        });
         export const PrimaryDestructuringContext = meta.story({
           ...Primary.composed,
           tags: ["test-fn"],
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
index 5938a91b8997..ccd887fa27ed 100644
--- a/code/core/src/csf-tools/test-syntax/transformer.ts
+++ b/code/core/src/csf-tools/test-syntax/transformer.ts
@@ -36,117 +36,128 @@ export async function testTransform({
   const ast = parsed._ast;
 
   const metaExportName = parsed._metaVariableName ?? 'meta';
-
-  // Generate new story exports from tests attached to stories by replacing test calls in place
-  Object.entries(parsed._stories).forEach(([storyExportName, storyInfo]) => {
-    ast.program.body.forEach((node, index) => {
-      if (!t.isExpressionStatement(node)) {
-        return;
-      }
-
-      const { expression } = node;
-
-      if (!t.isCallExpression(expression)) {
-        return;
-      }
-
-      const { callee, arguments: args } = expression;
-
-      const isStoryTest =
-        t.isMemberExpression(callee) &&
-        t.isIdentifier(callee.object) &&
-        callee.object.name === storyExportName &&
-        t.isIdentifier(callee.property) &&
-        callee.property.name === 'test';
-
-      if (isStoryTest) {
-        // Get test name and body
-        const testName = (args[0] as t.StringLiteral).value;
-        const testFunction = args[1] as t.FunctionExpression | t.ArrowFunctionExpression;
-
-        // Create export name from story name + test name
-        // e.g. Primary.test('exists in the dom', ...) -> "PrimaryExistsInTheDom"
-        const testExportName = toPascalCase(`${storyExportName} ${testName}`);
-
-        // Create a new story object with the test function integrated as play function
-        const newStoryObject = t.objectExpression([
-          t.spreadElement(
-            t.memberExpression(t.identifier(storyExportName), t.identifier('composed'))
-          ),
-          // Add 'test-fn' tag
-          t.objectProperty(
-            t.identifier('tags'),
-            t.arrayExpression([
-              // TODO: Tags can't be spread as they have to be statically analyzable
-              // This is not a problem because tags are added by the indexer, but
-              // for portable stories (ran via the CLI) it will likely be a problem
-              // t.spreadElement(
-              //   t.memberExpression(
-              //     t.memberExpression(t.identifier(storyExportName), t.identifier('composed')),
-              //     t.identifier('tags')
-              //   )
-              // ),
-              // Add the test-fn tag
-              t.stringLiteral('test-fn'),
-            ])
-          ),
-          t.objectProperty(
-            t.identifier('play'),
-            t.arrowFunctionExpression(
-              [t.identifier('context')],
-              t.blockStatement([
-                // Reuse original story's play function
-                t.expressionStatement(
-                  t.awaitExpression(
-                    t.callExpression(
-                      t.memberExpression(t.identifier(storyExportName), t.identifier('play')),
-                      [t.identifier('context')]
-                    )
+  const storyExports = Object.keys(parsed._stories);
+  const newDeclarations: {
+    node: t.ExpressionStatement;
+    declaration: t.ExportNamedDeclaration;
+  }[] = [];
+
+  // Generate new story exports from tests attached to stories
+  ast.program.body.forEach((node) => {
+    if (!t.isExpressionStatement(node)) {
+      return;
+    }
+
+    const { expression } = node;
+
+    if (!t.isCallExpression(expression)) {
+      return;
+    }
+
+    const { callee, arguments: args } = expression;
+
+    const isStoryTest =
+      t.isMemberExpression(callee) &&
+      t.isIdentifier(callee.object) &&
+      storyExports.includes(callee.object.name) &&
+      t.isIdentifier(callee.property) &&
+      callee.property.name === 'test';
+
+    if (isStoryTest) {
+      const storyExportName = (callee.object as t.Identifier).name;
+      // Get test name and body
+      const testName = (args[0] as t.StringLiteral).value;
+      const testFunction = args[1] as t.FunctionExpression | t.ArrowFunctionExpression;
+
+      // Create export name from story name + test name
+      // e.g. Primary.test('exists in the dom', ...) -> "PrimaryExistsInTheDom"
+      const testExportName = toPascalCase(`${storyExportName} ${testName}`);
+
+      // Create a new story object with the test function integrated as play function
+      const newStoryObject = t.objectExpression([
+        t.spreadElement(
+          t.memberExpression(t.identifier(storyExportName), t.identifier('composed'))
+        ),
+        // Add 'test-fn' tag
+        t.objectProperty(
+          t.identifier('tags'),
+          t.arrayExpression([
+            // TODO: Tags can't be spread as they have to be statically analyzable
+            // This is not a problem because tags are added by the indexer, but
+            // for portable stories (ran via the CLI) it will likely be a problem
+            // t.spreadElement(
+            //   t.memberExpression(
+            //     t.memberExpression(t.identifier(storyExportName), t.identifier('composed')),
+            //     t.identifier('tags')
+            //   )
+            // ),
+            // Add the test-fn tag
+            t.stringLiteral('test-fn'),
+          ])
+        ),
+        t.objectProperty(
+          t.identifier('play'),
+          t.arrowFunctionExpression(
+            [t.identifier('context')],
+            t.blockStatement([
+              // Reuse original story's play function
+              t.expressionStatement(
+                t.awaitExpression(
+                  t.callExpression(
+                    t.memberExpression(t.identifier(storyExportName), t.identifier('play')),
+                    [t.identifier('context')]
                   )
-                ),
-                // handle cases where the context is destructured in the play function
-                ...(testFunction.params.length > 0 && t.isObjectPattern(testFunction.params[0])
-                  ? [
-                      t.variableDeclaration('const', [
-                        t.variableDeclarator(
-                          testFunction.params[0] as t.ObjectPattern,
-                          t.identifier('context')
-                        ),
-                      ]),
-                    ]
-                  : []),
-                // add the body of the test function
-                ...(t.isBlockStatement(testFunction.body)
-                  ? testFunction.body.body
-                  : [t.expressionStatement(testFunction.body)]),
-              ]),
-              true // async
+                )
+              ),
+              // handle cases where the context is destructured in the play function
+              ...(testFunction.params.length > 0 && t.isObjectPattern(testFunction.params[0])
+                ? [
+                    t.variableDeclaration('const', [
+                      t.variableDeclarator(
+                        testFunction.params[0] as t.ObjectPattern,
+                        t.identifier('context')
+                      ),
+                    ]),
+                  ]
+                : []),
+              // add the body of the test function
+              ...(t.isBlockStatement(testFunction.body)
+                ? testFunction.body.body
+                : [t.expressionStatement(testFunction.body)]),
+            ]),
+            true // async
+          )
+        ),
+        t.objectProperty(t.identifier('name'), t.stringLiteral(testName)),
+      ]);
+
+      // Create export statement
+      const exportDeclaration = t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            t.identifier(testExportName),
+            t.callExpression(
+              t.memberExpression(t.identifier(metaExportName), t.identifier('story')),
+              [newStoryObject]
             )
           ),
-          t.objectProperty(t.identifier('name'), t.stringLiteral(testName)),
-        ]);
-
-        // Create export statement
-        const exportDeclaration = t.exportNamedDeclaration(
-          t.variableDeclaration('const', [
-            t.variableDeclarator(
-              t.identifier(testExportName),
-              t.callExpression(
-                t.memberExpression(t.identifier(metaExportName), t.identifier('story')),
-                [newStoryObject]
-              )
-            ),
-          ]),
-          []
-        );
-
-        // Preserve source map location from original test call
-        exportDeclaration.loc = node.loc;
-
-        // Replace the original test call with the new export in place
-        ast.program.body[index] = exportDeclaration;
-      }
-    });
+        ]),
+        []
+      );
+
+      // Preserve source map location from original test call
+      exportDeclaration.loc = node.loc;
+
+      newDeclarations.push({ node, declaration: exportDeclaration });
+    }
+  });
+
+  // Add the new declarations after their corresponding test calls, in reverse order to avoid index issues
+  newDeclarations.reverse().forEach(({ node, declaration }) => {
+    const index = ast.program.body.indexOf(node);
+    if (index !== -1) {
+      ast.program.body.splice(index + 1, 0, declaration);
+    }
   });
 
   return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 3eff699a0bb4..de69fc8ad242 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -813,7 +813,7 @@ describe('transformer', () => {
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("A", () => {
-              _test("render test", _testStory("A", A, meta, []));
+              _test("base story", _testStory("A", A, meta, []));
               _test("foo", _testStory("A", A, meta, [], "foo"));
               _test("bar", _testStory("A", A, meta, [], "bar"));
             });
@@ -918,7 +918,7 @@ describe('transformer', () => {
     });
 
     describe('source map calculation', () => {
-      it('should remap the location of an inline named export to its relative testStory function', async () => {
+      it.skip('should remap the location of an inline named export to its relative testStory function', async () => {
         const originalCode = `
         import { config } from '#.storybook/preview';
         const meta = config.meta({});
@@ -945,14 +945,14 @@ describe('transformer', () => {
 
         const consumer = await new SourceMapConsumer(map as unknown as RawSourceMap);
 
-        // Locate `__test("Primary"...` in the transformed code
+        // Locate `_test("base story"...` in the transformed code
         const testPrimaryLine =
-          transformedCode.split('\n').findIndex((line) => line.includes('_test("Primary"')) + 1;
+          transformedCode.split('\n').findIndex((line) => line.includes('_test("base story"')) + 1;
         const testPrimaryColumn = transformedCode
           .split('\n')
-          [testPrimaryLine - 1].indexOf('_test("Primary"');
+          [testPrimaryLine - 1].indexOf('_test("base story"');
 
-        // Get the original position from the source map for `__test("Primary"...`
+        // Get the original position from the source map for `_test("base story"...`
         const originalPosition = consumer.originalPositionFor({
           line: testPrimaryLine,
           column: testPrimaryColumn,
@@ -970,7 +970,7 @@ describe('transformer', () => {
         expect(originalPosition.column, 'original column location').toBe(originalPrimaryColumn);
       });
 
-      it('should remap the location of story tests', async () => {
+      it.skip('should remap the location of story tests', async () => {
         const originalCode = `
         import { config } from '#.storybook/preview';
         const meta = config.meta({});
@@ -994,7 +994,7 @@ describe('transformer', () => {
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("Primary", () => {
-              _test("render test", _testStory("Primary", Primary, meta, []));
+              _test("base story", _testStory("Primary", Primary, meta, []));
               _test("foo", _testStory("Primary", Primary, meta, [], "foo"));
             });
           }
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index dc52d2a74ec0..28a7cab25366 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -249,7 +249,7 @@ export async function vitestTransform({
         t.blockStatement([
           getTestStatementForStory({
             ...options,
-            testTitle: 'render test',
+            testTitle: 'base story',
             overrideSourcemap: false,
           }),
           ...tests.map(({ name: testName, node: testNode }) => {
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index e5c2a6efb94d..1e3b579fdb4c 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -108,8 +108,9 @@ function defineMeta<
     _tag: 'Meta',
     input,
     preview,
-    get composed(): never {
-      throw new Error('Not implemented');
+    get composed() {
+      // TODO: check this later
+      return composeConfigs([preview.input, input]);
     },
     // @ts-expect-error hard
     story(
@@ -144,13 +145,15 @@ export interface Story<
   meta: Meta<TRenderer>;
   __compose: () => ComposedStoryFn<TRenderer>;
   play: TInput['play'];
-  run: (context?: Partial<StoryContext<TRenderer, Partial<TRenderer['args']>>>) => Promise<void>;
+  run: (
+    context?: Partial<StoryContext<TRenderer, Partial<TRenderer['args']>>>,
+    testName?: string
+  ) => Promise<void>;
 
   extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(
     input: TInput
   ): Story<TRenderer, TInput>;
   test: (name: string, fn: TestFunction<TRenderer, TRenderer['args']>) => void;
-  __runTest: (name: string) => Promise<void>;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
@@ -162,8 +165,7 @@ function defineStory<
   TInput extends StoryAnnotations<TRenderer, TRenderer['args']>,
 >(input: TInput, meta: Meta<TRenderer>): Story<TRenderer, TInput> {
   let composed: ComposedStoryFn<TRenderer>;
-  const __tests: Record<string, () => Promise<void>> = {};
-
+  input.__tests ??= {};
   const compose = () => {
     if (!composed) {
       composed = composeStory(
@@ -180,14 +182,6 @@ function defineStory<
     input,
     meta,
     __compose: compose,
-    __runTest: (name: string) => {
-      if (!__tests[name]) {
-        // eslint-disable-next-line local-rules/no-uncategorized-errors
-        throw new Error(`Test ${name} not found for story ${compose().name}`);
-      }
-
-      return __tests[name]();
-    },
     get composed() {
       const composed = compose();
       const { args, argTypes, parameters, id, tags, globals, storyName: name } = composed;
@@ -200,11 +194,8 @@ function defineStory<
       return compose().run ?? (async () => {});
     },
     test(name: string, fn: TestFunction<TRenderer, TRenderer['args']>) {
-      __tests[name] = async () => {
-        // TODO: figure out best type for the context
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        await fn(this.composed as any);
-      };
+      // @ts-expect-error fix this later
+      input.__tests[name] = fn;
       return this;
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index 497a5678adac..c7c5b3eb6e6b 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -533,6 +533,9 @@ export type StoryAnnotations<
 
   /** @deprecated */
   story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
+
+  /** @private */
+  __tests?: Record<string, (context: StoryContext<TRenderer>) => Promise<void>>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
 export type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index 0aefda972f3e..9d550454101f 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -62,6 +62,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.afterEach),
     ...normalizeArrays(story?.afterEach),
   ];
+  const __tests = storyAnnotations.__tests;
   const { render, play, tags = [], globals = {} } = storyObject;
 
   const id = parameters.__id || toId(meta.id, exportName);
@@ -79,6 +80,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     afterEach,
     globals,
     ...(render && { render }),
+    ...(__tests && { __tests }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
   };
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 3d5750e2a1c8..c65fb72198ca 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -214,10 +214,13 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     return story.playFunction!(context);
   };
 
-  const run = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
+  const run = (
+    extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
+    testName?: string
+  ) => {
     const context = initializeContext();
     Object.assign(context, extraContext);
-    return runStory(story, context);
+    return runStory(story, context, testName);
   };
 
   const playFunction = story.playFunction ? play : undefined;
@@ -376,7 +379,8 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
 // Will make a follow up PR for that
 async function runStory<TRenderer extends Renderer>(
   story: PreparedStory<TRenderer>,
-  context: StoryContext<TRenderer>
+  context: StoryContext<TRenderer>,
+  testName?: string
 ) {
   for (const callback of [...cleanups].reverse()) {
     await callback();
@@ -423,6 +427,10 @@ async function runStory<TRenderer extends Renderer>(
     await playFunction(context);
   }
 
+  if (testName) {
+    await story.__tests?.[testName](context);
+  }
+
   let cleanUp: CleanupCallback | undefined;
   if (isTestEnvironment()) {
     cleanUp = pauseAnimations();
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 42d17914ad48..81efa4430689 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -165,6 +165,7 @@ export function prepareStory<TRenderer extends Renderer>(
     testingLibraryRender,
     renderToCanvas: projectAnnotations.renderToCanvas,
     usesMount,
+    __tests: storyAnnotations.__tests,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(
diff --git a/code/core/src/types/modules/composedStory.ts b/code/core/src/types/modules/composedStory.ts
index 00cd9d4ff79f..50bb5dfb1ddc 100644
--- a/code/core/src/types/modules/composedStory.ts
+++ b/code/core/src/types/modules/composedStory.ts
@@ -44,7 +44,10 @@ export type ComposedStoryFn<
   args: TArgs;
   id: StoryId;
   play?: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
-  run: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  run: (
+    context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
+    testName?: string
+  ) => Promise<void>;
   load: () => Promise<void>;
   storyName: string;
   parameters: Parameters;
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index 72b963431bc6..ed10ecc1fcca 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -114,6 +114,8 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
     storyGlobals: Globals;
+    /** @private */
+    __tests?: Record<string, (context: StoryContext<TRenderer>) => Promise<void>>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

From 3c00cc8f2be24a87a03c5f4a9e7b785fddf0a6fb Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 11:14:18 +0200
Subject: [PATCH 031/130] more experiments

---
 code/addons/vitest/src/vitest-plugin/index.ts |   2 -
 .../src/plugins/test-fn-plugin.ts             |  24 ---
 code/builders/builder-vite/src/vite-config.ts |   2 -
 .../components/test-fn.stories.tsx            |  24 ++-
 code/core/src/csf-tools/CsfFile.ts            |  41 ++---
 code/core/src/csf-tools/index.ts              |   1 -
 .../csf-tools/test-syntax/transformer.test.ts | 124 -------------
 .../src/csf-tools/test-syntax/transformer.ts  | 164 ------------------
 code/core/src/csf/csf-factories.ts            |  39 +++--
 code/core/src/csf/story.ts                    |   3 +-
 code/core/src/manager/globals-runtime.ts      |  30 +++-
 .../modules/preview-web/render/StoryRender.ts |   5 +
 .../preview-api/modules/store/StoryStore.ts   |  14 +-
 .../modules/store/csf/normalizeStory.ts       |   3 +
 .../modules/store/csf/portable-stories.ts     |   2 +-
 .../modules/store/csf/prepareStory.ts         |   1 +
 .../modules/store/csf/processCSFFile.ts       |  17 +-
 code/core/src/types/modules/story.ts          |   3 +-
 18 files changed, 138 insertions(+), 361 deletions(-)
 delete mode 100644 code/builders/builder-vite/src/plugins/test-fn-plugin.ts
 delete mode 100644 code/core/src/csf-tools/test-syntax/transformer.test.ts
 delete mode 100644 code/core/src/csf-tools/test-syntax/transformer.ts

diff --git a/code/addons/vitest/src/vitest-plugin/index.ts b/code/addons/vitest/src/vitest-plugin/index.ts
index 4dcb74249513..0e8bbfc949ca 100644
--- a/code/addons/vitest/src/vitest-plugin/index.ts
+++ b/code/addons/vitest/src/vitest-plugin/index.ts
@@ -29,7 +29,6 @@ import picocolors from 'picocolors';
 import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
-import { storybookTestFn } from '../../../../builders/builder-vite/src/plugins/test-fn-plugin';
 // ! Relative import to prebundle it without needing to depend on the Vite builder
 import { withoutVitePlugins } from '../../../../builders/builder-vite/src/utils/without-vite-plugins';
 import type { InternalOptions, UserOptions } from './types';
@@ -429,7 +428,6 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     },
   };
 
-  plugins.push(await storybookTestFn());
   plugins.push(storybookTestPlugin);
 
   // When running tests via the Storybook UI, we need
diff --git a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts b/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
deleted file mode 100644
index 0c8d422efe1a..000000000000
--- a/code/builders/builder-vite/src/plugins/test-fn-plugin.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { testTransform } from 'storybook/internal/csf-tools';
-
-/** This transforms the test function of a story into another story */
-export async function storybookTestFn(): Promise<any> {
-  // export async function storybookTestFn(): Promise<Plugin> {
-  const storiesRegex = /\.stories\.(tsx?|jsx?)$/;
-
-  return {
-    name: 'storybook:test-function',
-    enforce: 'post',
-    async transform(src: any, id: any) {
-      if (!storiesRegex.test(id)) {
-        return undefined;
-      }
-
-      const result = await testTransform({
-        code: src,
-        fileName: id,
-      });
-      return result;
-    },
-  };
-}
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index da8d15948181..520cbabce487 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -25,7 +25,6 @@ import {
   pluginWebpackStats,
   stripStoryHMRBoundary,
 } from './plugins';
-import { storybookTestFn } from './plugins/test-fn-plugin';
 import type { BuilderOptions } from './types';
 
 export type PluginConfigType = 'build' | 'development';
@@ -99,7 +98,6 @@ export async function pluginConfig(options: Options) {
     await csfPlugin(options),
     await injectExportOrderPlugin(),
     await stripStoryHMRBoundary(),
-    await storybookTestFn(),
     {
       name: 'storybook:allow-storybook-dir',
       enforce: 'post',
diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 4c62680e87f1..baecf2d9a6ae 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -15,11 +15,27 @@ const meta = preview.meta({
   tags: ['some-tag'],
 });
 
-export const Default = meta.story({});
-Default.test('Exists in the dom', async ({ canvas }) => {
-  const button = canvas.getByText('Default');
-  await expect(button).toBeInTheDocument();
+export const Default = meta.story({
+  args: {
+    children: 'From story',
+  },
+  play: async ({ canvas }) => {
+    const button = canvas.getByText('From test');
+    await expect(button).toBeInTheDocument();
+  },
 });
+Default.test(
+  'Exists in the dom',
+  {
+    args: {
+      children: 'From test',
+    },
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('From test');
+    await expect(button).toBeInTheDocument();
+  }
+);
 Default.test('onClick is called', async ({ canvas, userEvent, args }) => {
   const button = canvas.getByText('Default');
   await userEvent.click(button);
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 32f4b7245f8b..f5e5b8b55983 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -11,7 +11,7 @@ import {
   types as t,
   traverse,
 } from 'storybook/internal/babel';
-import { isExportStory, storyNameFromExport, toId } from 'storybook/internal/csf';
+import { isExportStory, sanitize, storyNameFromExport, toId } from 'storybook/internal/csf';
 import { logger } from 'storybook/internal/node-logger';
 import type {
   ComponentAnnotations,
@@ -682,7 +682,8 @@ export class CsfFile {
               story.name = storyName;
             }
           }
-          // B.test('foo', () => {}, options)
+          // B.test('foo', () => {})
+          // B.test('foo', context, () => {})
           if (
             t.isCallExpression(expression) &&
             t.isMemberExpression(expression.callee) &&
@@ -690,30 +691,31 @@ export class CsfFile {
             t.isIdentifier(expression.callee.property) &&
             expression.callee.property.name === 'test' &&
             expression.arguments.length >= 2 &&
-            t.isStringLiteral(expression.arguments[0]) &&
-            (t.isFunctionExpression(expression.arguments[1]) ||
-              t.isArrowFunctionExpression(expression.arguments[1]))
+            t.isStringLiteral(expression.arguments[0])
           ) {
             const exportName = expression.callee.object.name;
             const testName = expression.arguments[0].value;
-            const testFunction = expression.arguments[1];
-            const testOptions = expression.arguments[2] || null;
+            const testFunction =
+              expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
+            const testOptions = expression.arguments.length === 2 ? null : expression.arguments[1];
 
             if (!self._storyTests[exportName]) {
               self._storyTests[exportName] = [];
             }
 
-            self._storyTests[exportName].push({
-              function: testFunction,
-              name: testName,
-              options: testOptions,
-              node: expression,
-              // can't set id because meta title isn't available yet
-              // so it's set later on
-              id: '',
-            });
-
-            self._stories[exportName].__stats.tests = true;
+            if (t.isArrowFunctionExpression(testFunction) || t.isFunctionExpression(testFunction)) {
+              self._storyTests[exportName].push({
+                function: testFunction,
+                name: testName,
+                options: testOptions,
+                node: expression,
+                // can't set id because meta title isn't available yet
+                // so it's set later on
+                id: 'FIXME',
+              });
+
+              self._stories[exportName].__stats.tests = true;
+            }
           }
         },
       },
@@ -830,8 +832,7 @@ export class CsfFile {
 
         if (self._storyTests[key]) {
           self._storyTests[key].forEach((test) => {
-            const testStoryName = `${story.name}: ${test.name}`;
-            test.id = toId((self._meta?.id || self._meta?.title) as string, testStoryName);
+            test.id = id + ':' + sanitize(test.name);
           });
         }
 
diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts
index 9d5f784798ed..a2dcddb3cc0e 100644
--- a/code/core/src/csf-tools/index.ts
+++ b/code/core/src/csf-tools/index.ts
@@ -3,5 +3,4 @@ export * from './ConfigFile';
 export * from './getStorySortParameter';
 export * from './enrichCsf';
 export { babelParse } from 'storybook/internal/babel';
-export { testTransform } from './test-syntax/transformer';
 export { vitestTransform } from './vitest-plugin/transformer';
diff --git a/code/core/src/csf-tools/test-syntax/transformer.test.ts b/code/core/src/csf-tools/test-syntax/transformer.test.ts
deleted file mode 100644
index c82e495ca131..000000000000
--- a/code/core/src/csf-tools/test-syntax/transformer.test.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-
-import dedent from 'ts-dedent';
-
-import { testTransform as originalTransform } from './transformer';
-
-vi.mock('storybook/internal/common', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('storybook/internal/common')>();
-  return {
-    ...actual,
-    getStoryTitle: vi.fn(() => 'automatic/calculated/title'),
-  };
-});
-
-expect.addSnapshotSerializer({
-  serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
-  test: (val) => true,
-});
-
-const transform = async ({ code = '', fileName = 'src/components/Button.stories.js' }) => {
-  const transformed = await originalTransform({
-    code,
-    fileName,
-  });
-  if (typeof transformed === 'string') {
-    return { code: transformed, map: null };
-  }
-
-  return transformed;
-};
-
-describe('transformer', () => {
-  describe('test syntax', () => {
-    it('should no-op in non-CSF4 stories', async () => {
-      const code = dedent`
-        export default {};
-        export const Primary = {};
-      `;
-
-      const result = await transform({ code });
-
-      expect(result.code).toMatchInlineSnapshot(`
-        export default {};
-        export const Primary = {};
-      `);
-    });
-    it('should add test statement to const declared exported stories', async () => {
-      const code = `
-        import preview from '#.storybook/preview';
-        const meta = preview.meta({ component: Button });
-        export const Primary = meta.story({ 
-          args: {
-            label: 'Primary Button',
-          }
-        });
-        
-        Primary.test('just a log', () => {
-          console.log('test');
-        });
-        Primary.test('using context', (context) => {
-          const button = context.canvas.getByRole('button');
-        });
-        Primary.test('destructuring context', async ({ canvas }) => {
-          const button = await canvas.findByRole('button');
-        });
-      `;
-
-      const result = await transform({ code });
-
-      expect(result.code).toMatchInlineSnapshot(`
-        import preview from '#.storybook/preview';
-        const meta = preview.meta({
-          component: Button
-        });
-        export const Primary = meta.story({
-          args: {
-            label: 'Primary Button'
-          }
-        });
-        Primary.test('just a log', () => {
-          console.log('test');
-        });
-        export const PrimaryJustALog = meta.story({
-          ...Primary.composed,
-          tags: ["test-fn"],
-          play: async context => {
-            await Primary.play(context);
-            console.log('test');
-          },
-          name: "just a log"
-        });
-        Primary.test('using context', context => {
-          const button = context.canvas.getByRole('button');
-        });
-        export const PrimaryUsingContext = meta.story({
-          ...Primary.composed,
-          tags: ["test-fn"],
-          play: async context => {
-            await Primary.play(context);
-            const button = context.canvas.getByRole('button');
-          },
-          name: "using context"
-        });
-        Primary.test('destructuring context', async ({
-          canvas
-        }) => {
-          const button = await canvas.findByRole('button');
-        });
-        export const PrimaryDestructuringContext = meta.story({
-          ...Primary.composed,
-          tags: ["test-fn"],
-          play: async context => {
-            await Primary.play(context);
-            const {
-              canvas
-            } = context;
-            const button = await canvas.findByRole('button');
-          },
-          name: "destructuring context"
-        });
-      `);
-    });
-  });
-});
diff --git a/code/core/src/csf-tools/test-syntax/transformer.ts b/code/core/src/csf-tools/test-syntax/transformer.ts
deleted file mode 100644
index ccd887fa27ed..000000000000
--- a/code/core/src/csf-tools/test-syntax/transformer.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { types as t } from 'storybook/internal/babel';
-
-import { formatCsf, loadCsf } from '../CsfFile';
-
-function toPascalCase(text: string): string {
-  return text
-    .replace(/[^a-zA-Z0-9\s]/g, ' ')
-    .split(/\s+/)
-    .filter((word) => word.length > 0)
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join('');
-}
-
-export async function testTransform({
-  code,
-  fileName,
-}: {
-  code: string;
-  fileName: string;
-}): Promise<ReturnType<typeof formatCsf>> {
-  const isStoryFile = /\.stor(y|ies)\./.test(fileName);
-  if (!isStoryFile) {
-    return code;
-  }
-
-  const parsed = loadCsf(code, {
-    fileName,
-    transformInlineMeta: true,
-    makeTitle: (title) => title || 'unknown',
-  }).parse();
-
-  if (!parsed._metaIsFactory) {
-    return code;
-  }
-
-  const ast = parsed._ast;
-
-  const metaExportName = parsed._metaVariableName ?? 'meta';
-  const storyExports = Object.keys(parsed._stories);
-  const newDeclarations: {
-    node: t.ExpressionStatement;
-    declaration: t.ExportNamedDeclaration;
-  }[] = [];
-
-  // Generate new story exports from tests attached to stories
-  ast.program.body.forEach((node) => {
-    if (!t.isExpressionStatement(node)) {
-      return;
-    }
-
-    const { expression } = node;
-
-    if (!t.isCallExpression(expression)) {
-      return;
-    }
-
-    const { callee, arguments: args } = expression;
-
-    const isStoryTest =
-      t.isMemberExpression(callee) &&
-      t.isIdentifier(callee.object) &&
-      storyExports.includes(callee.object.name) &&
-      t.isIdentifier(callee.property) &&
-      callee.property.name === 'test';
-
-    if (isStoryTest) {
-      const storyExportName = (callee.object as t.Identifier).name;
-      // Get test name and body
-      const testName = (args[0] as t.StringLiteral).value;
-      const testFunction = args[1] as t.FunctionExpression | t.ArrowFunctionExpression;
-
-      // Create export name from story name + test name
-      // e.g. Primary.test('exists in the dom', ...) -> "PrimaryExistsInTheDom"
-      const testExportName = toPascalCase(`${storyExportName} ${testName}`);
-
-      // Create a new story object with the test function integrated as play function
-      const newStoryObject = t.objectExpression([
-        t.spreadElement(
-          t.memberExpression(t.identifier(storyExportName), t.identifier('composed'))
-        ),
-        // Add 'test-fn' tag
-        t.objectProperty(
-          t.identifier('tags'),
-          t.arrayExpression([
-            // TODO: Tags can't be spread as they have to be statically analyzable
-            // This is not a problem because tags are added by the indexer, but
-            // for portable stories (ran via the CLI) it will likely be a problem
-            // t.spreadElement(
-            //   t.memberExpression(
-            //     t.memberExpression(t.identifier(storyExportName), t.identifier('composed')),
-            //     t.identifier('tags')
-            //   )
-            // ),
-            // Add the test-fn tag
-            t.stringLiteral('test-fn'),
-          ])
-        ),
-        t.objectProperty(
-          t.identifier('play'),
-          t.arrowFunctionExpression(
-            [t.identifier('context')],
-            t.blockStatement([
-              // Reuse original story's play function
-              t.expressionStatement(
-                t.awaitExpression(
-                  t.callExpression(
-                    t.memberExpression(t.identifier(storyExportName), t.identifier('play')),
-                    [t.identifier('context')]
-                  )
-                )
-              ),
-              // handle cases where the context is destructured in the play function
-              ...(testFunction.params.length > 0 && t.isObjectPattern(testFunction.params[0])
-                ? [
-                    t.variableDeclaration('const', [
-                      t.variableDeclarator(
-                        testFunction.params[0] as t.ObjectPattern,
-                        t.identifier('context')
-                      ),
-                    ]),
-                  ]
-                : []),
-              // add the body of the test function
-              ...(t.isBlockStatement(testFunction.body)
-                ? testFunction.body.body
-                : [t.expressionStatement(testFunction.body)]),
-            ]),
-            true // async
-          )
-        ),
-        t.objectProperty(t.identifier('name'), t.stringLiteral(testName)),
-      ]);
-
-      // Create export statement
-      const exportDeclaration = t.exportNamedDeclaration(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(
-            t.identifier(testExportName),
-            t.callExpression(
-              t.memberExpression(t.identifier(metaExportName), t.identifier('story')),
-              [newStoryObject]
-            )
-          ),
-        ]),
-        []
-      );
-
-      // Preserve source map location from original test call
-      exportDeclaration.loc = node.loc;
-
-      newDeclarations.push({ node, declaration: exportDeclaration });
-    }
-  });
-
-  // Add the new declarations after their corresponding test calls, in reverse order to avoid index issues
-  newDeclarations.reverse().forEach(({ node, declaration }) => {
-    const index = ast.program.body.indexOf(node);
-    if (index !== -1) {
-      ast.program.body.splice(index + 1, 0, declaration);
-    }
-  });
-
-  return formatCsf(parsed, { sourceMaps: true, sourceFileName: fileName }, code);
-}
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 1e3b579fdb4c..d5daaa37fdf1 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -1,4 +1,4 @@
-import type { AddonTypes, PlayFunction, StoryContext } from 'storybook/internal/csf';
+import type { AddonTypes, StoryContext } from 'storybook/internal/csf';
 import { combineTags } from 'storybook/internal/csf';
 import type {
   Args,
@@ -121,10 +121,7 @@ function defineMeta<
   };
 }
 
-type TestFunction<
-  TRenderer extends Renderer,
-  TArgs extends TRenderer['args'] = Args,
-> = PlayFunction<TRenderer, TArgs>;
+type TestFunction<TRenderer extends Renderer> = (context: StoryContext<TRenderer>) => Promise<void>;
 
 export interface Story<
   TRenderer extends Renderer,
@@ -153,7 +150,13 @@ export interface Story<
   extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(
     input: TInput
   ): Story<TRenderer, TInput>;
-  test: (name: string, fn: TestFunction<TRenderer, TRenderer['args']>) => void;
+  test(name: string, fn: TestFunction<TRenderer>): void;
+  test(
+    name: string,
+    annotations: StoryAnnotations<TRenderer, TRenderer['args']>,
+    fn: TestFunction<TRenderer>
+  ): void;
+  __testFunction?: TestFunction<TRenderer>;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
@@ -193,17 +196,31 @@ function defineStory<
     get run() {
       return compose().run ?? (async () => {});
     },
-    test(name: string, fn: TestFunction<TRenderer, TRenderer['args']>) {
-      // @ts-expect-error fix this later
-      input.__tests[name] = fn;
-      return this;
+    test(
+      name: string,
+      overridesOrTestFn: StoryAnnotations<TRenderer, TRenderer['args']> | TestFunction<TRenderer>,
+      testFn?: TestFunction<TRenderer>
+    ): void {
+      const hasOverrides = typeof overridesOrTestFn !== 'function';
+      const annotations = (hasOverrides ? overridesOrTestFn : {}) as StoryAnnotations<
+        TRenderer,
+        TRenderer['args']
+      >;
+      const testFunction = (hasOverrides ? testFn : overridesOrTestFn) as TestFunction<TRenderer>;
+
+      // Build the story for this test (clone if annotations present)
+      const testStory = this.extend(annotations);
+      testStory.input.__testFunction = testFunction;
+      // Store in registry
+      this.input.__tests![name] = testStory;
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {
       return defineStory(
         {
           ...this.input,
           ...input,
-          args: { ...this.input.args, ...input.args },
+          // TODO: Discuss
+          args: { ...(this.composed.args || {}), ...input.args },
           argTypes: combineParameters(this.input.argTypes, input.argTypes),
           afterEach: [
             ...normalizeArrays(this.input?.afterEach ?? []),
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index c7c5b3eb6e6b..99358bf2d5e4 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -535,7 +535,8 @@ export type StoryAnnotations<
   story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
 
   /** @private */
-  __tests?: Record<string, (context: StoryContext<TRenderer>) => Promise<void>>;
+  __tests?: Record<string, StoryAnnotations<TRenderer, TRenderer['args']>>;
+  __testFunction?: (context: StoryContext<TRenderer>) => Promise<void>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
 export type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<
diff --git a/code/core/src/manager/globals-runtime.ts b/code/core/src/manager/globals-runtime.ts
index efec08c4b07b..3f1a1729e896 100644
--- a/code/core/src/manager/globals-runtime.ts
+++ b/code/core/src/manager/globals-runtime.ts
@@ -10,10 +10,34 @@ globalPackages.forEach((key) => {
   globalThis[globalsNameReferenceMap[key]] = globalsNameValueMap[key];
 });
 
-globalThis.sendTelemetryError = (error) => {
-  if (!shouldSkipError(error)) {
-    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const errorQueue: any[] = [];
+
+const flushErrorQueue = () => {
+  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+  if (channel) {
+    errorQueue.forEach((error) => {
+      channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
+    });
+    errorQueue.length = 0;
+    clearInterval(interval);
+  }
+};
+
+const interval: NodeJS.Timeout = setInterval(flushErrorQueue, 1000);
+
+globalThis.sendTelemetryError = (error: any) => {
+  if (shouldSkipError(error)) {
+    return;
+  }
+
+  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+
+  if (channel) {
     channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
+  } else {
+    // if the channel is not available, we queue the error to be sent later
+    errorQueue.push(error);
   }
 };
 
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 4e5bc7d89c4c..49ef05188e1c 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -207,6 +207,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       unboundStoryFn,
       playFunction,
       runStep,
+      __testFunction,
     } = story;
 
     if (forceRemount && !initial) {
@@ -379,6 +380,10 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         }
       }
 
+      if (__testFunction) {
+        await __testFunction(context);
+      }
+
       await this.runPhase(abortSignal, 'completing', async () => {
         if (isTestEnvironment()) {
           this.store.addCleanupCallbacks(story, pauseAnimations());
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 3a0c7493a01b..27351157fecb 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -198,6 +198,7 @@ export class StoryStore<TRenderer extends Renderer> {
   }): PreparedStory<TRenderer> {
     const storyAnnotations = csfFile.stories[storyId];
 
+    console.log('storyFromCSFFile: initial annotations', storyAnnotations);
     if (!storyAnnotations) {
       throw new MissingStoryFromCsfFileError({ storyId });
     }
@@ -211,6 +212,7 @@ export class StoryStore<TRenderer extends Renderer> {
     );
     this.args.setInitial(story);
     this.hooks[story.id] = this.hooks[story.id] || new HooksContext();
+    console.log('storyFromCSFFile: prepared story', story);
     return story;
   }
 
@@ -226,6 +228,7 @@ export class StoryStore<TRenderer extends Renderer> {
   }
 
   async loadEntry(id: StoryId) {
+    console.log('loadEntry: loading id', id);
     const entry = await this.storyIdToEntry(id);
 
     const storyImports = entry.type === 'docs' ? entry.storiesImports : [];
@@ -242,11 +245,12 @@ export class StoryStore<TRenderer extends Renderer> {
   }
 
   // A prepared story does not include args, globals or hooks. These are stored in the story store
-  // and updated separtely to the (immutable) story.
+  // and updated separately to the (immutable) story.
   getStoryContext(story: PreparedStory<TRenderer>, { forceInitialArgs = false } = {}) {
     const userGlobals = this.userGlobals.get();
     const { initialGlobals } = this.userGlobals;
     const reporting = new ReporterAPI();
+    console.log('getStoryContext: for story', story);
     return prepareContext({
       ...story,
       args: forceInitialArgs ? story.initialArgs : this.args.get(story.id),
@@ -285,11 +289,13 @@ export class StoryStore<TRenderer extends Renderer> {
   ): Record<StoryId, StoryContextForEnhancers<TRenderer>> {
     const { cachedCSFFiles } = this;
 
+    console.log('extract: extracting stories', cachedCSFFiles);
+
     if (!cachedCSFFiles) {
       throw new CalledExtractOnStoreError();
     }
 
-    return Object.entries(this.storyIndex.entries).reduce(
+    const stories = Object.entries(this.storyIndex.entries).reduce(
       (acc, [storyId, { type, importPath }]) => {
         if (type === 'docs') {
           return acc;
@@ -329,5 +335,9 @@ export class StoryStore<TRenderer extends Renderer> {
       },
       {} as Record<string, any>
     );
+
+    console.log('extract: stories', stories);
+
+    return stories;
   }
 }
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index 9d550454101f..6f52526956bf 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -62,7 +62,9 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.afterEach),
     ...normalizeArrays(story?.afterEach),
   ];
+  console.log('normalizeStory', storyAnnotations);
   const __tests = storyAnnotations.__tests;
+  const __testFunction = storyAnnotations.__testFunction;
   const { render, play, tags = [], globals = {} } = storyObject;
 
   const id = parameters.__id || toId(meta.id, exportName);
@@ -81,6 +83,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     globals,
     ...(render && { render }),
     ...(__tests && { __tests }),
+    ...(__testFunction && { __testFunction }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
   };
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index c65fb72198ca..ab5d37f541b0 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -428,7 +428,7 @@ async function runStory<TRenderer extends Renderer>(
   }
 
   if (testName) {
-    await story.__tests?.[testName](context);
+    await story.__tests?.[testName].__testFunction?.(context);
   }
 
   let cleanUp: CleanupCallback | undefined;
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 81efa4430689..df6f9425dd45 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -166,6 +166,7 @@ export function prepareStory<TRenderer extends Renderer>(
     renderToCanvas: projectAnnotations.renderToCanvas,
     usesMount,
     __tests: storyAnnotations.__tests,
+    __testFunction: storyAnnotations.__testFunction,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(
diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index fa35d8385dc5..7b8b0af5a82a 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -1,5 +1,5 @@
 import { logger } from 'storybook/internal/client-logger';
-import { isExportStory, isStory } from 'storybook/internal/csf';
+import { isExportStory, isStory, sanitize } from 'storybook/internal/csf';
 import type { ComponentTitle, Parameters, Path, Renderer } from 'storybook/internal/types';
 import type {
   CSFFile,
@@ -49,6 +49,7 @@ export function processCSFFile<TRenderer extends Renderer>(
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
 
   const firstStory = Object.values(namedExports)[0];
+  console.log('processing CSF file');
   if (isStory<TRenderer>(firstStory)) {
     const meta: NormalizedComponentAnnotations<TRenderer> =
       normalizeComponentAnnotations<TRenderer>(firstStory.meta.input, title, importPath);
@@ -62,6 +63,20 @@ export function processCSFFile<TRenderer extends Renderer>(
         checkDisallowedParameters(storyMeta.parameters);
 
         csfFile.stories[storyMeta.id] = storyMeta;
+
+        // if the story has tests, we need to add those to the csfFile
+        if (storyMeta.__tests) {
+          Object.entries(storyMeta.__tests).forEach(([testName, test]) => {
+            const testId = storyMeta.id + ':' + sanitize(testName);
+            test.parameters ??= {};
+            // @ts-expect-error TODO discuss later
+            test.parameters.__id = testId;
+            // @ts-expect-error TODO discuss later
+            console.log('Adding story test', testId, test.input);
+            // @ts-expect-error TODO discuss later
+            csfFile.stories[testId] = normalizeStory(testName, test.input, meta);
+          });
+        }
       }
     });
 
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index ed10ecc1fcca..f113900c7fd5 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -114,8 +114,9 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
     storyGlobals: Globals;
+    __testFunction?: (context: StoryContext<TRenderer>) => Promise<void>;
     /** @private */
-    __tests?: Record<string, (context: StoryContext<TRenderer>) => Promise<void>>;
+    __tests?: Record<string, StoryAnnotations<TRenderer, TRenderer['args']>>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

From cde0b32db0f29ac0e434f3101c5816ab926d76a9 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 15:14:40 +0200
Subject: [PATCH 032/130] cleanup

---
 .../builder-vite/src/plugins/index.ts         |  1 -
 code/builders/builder-webpack5/package.json   |  8 +----
 .../src/loaders/test-fn-loader.ts             | 34 -------------------
 .../src/preview/iframe-webpack.config.ts      | 10 ------
 code/core/src/manager/globals-runtime.ts      | 30 ++--------------
 5 files changed, 4 insertions(+), 79 deletions(-)
 delete mode 100644 code/builders/builder-webpack5/src/loaders/test-fn-loader.ts

diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts
index 97d9b04b8bae..bc72dc8755d5 100644
--- a/code/builders/builder-vite/src/plugins/index.ts
+++ b/code/builders/builder-vite/src/plugins/index.ts
@@ -2,6 +2,5 @@ export * from './inject-export-order-plugin';
 export * from './strip-story-hmr-boundaries';
 export * from './code-generator-plugin';
 export * from './csf-plugin';
-export * from './test-fn-plugin';
 export * from './external-globals-plugin';
 export * from './webpack-stats-plugin';
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 01d01575ded6..0832654bf388 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -41,11 +41,6 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
-    "./loaders/test-fn-loader": {
-      "types": "./dist/loaders/test-fn-loader.d.ts",
-      "node": "./dist/loaders/test-fn-loader.js",
-      "require": "./dist/loaders/test-fn-loader.js"
-    },
     "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
@@ -109,8 +104,7 @@
       "./src/index.ts",
       "./src/presets/custom-webpack-preset.ts",
       "./src/presets/preview-preset.ts",
-      "./src/loaders/export-order-loader.ts",
-      "./src/loaders/test-fn-loader.ts"
+      "./src/loaders/export-order-loader.ts"
     ],
     "platform": "node"
   },
diff --git a/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts b/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
deleted file mode 100644
index 4dd852a7ec84..000000000000
--- a/code/builders/builder-webpack5/src/loaders/test-fn-loader.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { testTransform } from 'storybook/internal/csf-tools';
-
-import type { LoaderContext } from 'webpack';
-
-/** This transforms the test function of a story into another story */
-export default async function loader(
-  this: LoaderContext<any>,
-  source: string,
-  map: any,
-  meta: any
-) {
-  const callback = this.async();
-  const storiesRegex = /\.stories\.(tsx?|jsx?)$/;
-
-  try {
-    // Only process story files
-    if (!storiesRegex.test(this.resourcePath)) {
-      return callback(null, source, map, meta);
-    }
-
-    const result = await testTransform({
-      code: source,
-      fileName: this.resourcePath,
-    });
-
-    // Handle both string and GeneratorResult types
-    const transformedCode = typeof result === 'string' ? result : result.code;
-
-    return callback(null, transformedCode, map, meta);
-  } catch (err) {
-    // If transformation fails, return original source
-    return callback(null, source, map, meta);
-  }
-}
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 692c5d7c4bc3..545fa159695f 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -218,16 +218,6 @@ export default async (
             },
           ],
         },
-        {
-          test: /\.stories\.(tsx?|jsx?)$/,
-          exclude: /node_modules/,
-          enforce: 'post',
-          use: [
-            {
-              loader: require.resolve('@storybook/builder-webpack5/loaders/test-fn-loader'),
-            },
-          ],
-        },
         {
           test: /\.m?js$/,
           type: 'javascript/auto',
diff --git a/code/core/src/manager/globals-runtime.ts b/code/core/src/manager/globals-runtime.ts
index 3f1a1729e896..efec08c4b07b 100644
--- a/code/core/src/manager/globals-runtime.ts
+++ b/code/core/src/manager/globals-runtime.ts
@@ -10,34 +10,10 @@ globalPackages.forEach((key) => {
   globalThis[globalsNameReferenceMap[key]] = globalsNameValueMap[key];
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const errorQueue: any[] = [];
-
-const flushErrorQueue = () => {
-  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
-  if (channel) {
-    errorQueue.forEach((error) => {
-      channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
-    });
-    errorQueue.length = 0;
-    clearInterval(interval);
-  }
-};
-
-const interval: NodeJS.Timeout = setInterval(flushErrorQueue, 1000);
-
-globalThis.sendTelemetryError = (error: any) => {
-  if (shouldSkipError(error)) {
-    return;
-  }
-
-  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
-
-  if (channel) {
+globalThis.sendTelemetryError = (error) => {
+  if (!shouldSkipError(error)) {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
-  } else {
-    // if the channel is not available, we queue the error to be sent later
-    errorQueue.push(error);
   }
 };
 

From 6cc74e2f4a9905cc1f30fd76bc46e853927f483f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:06:26 +0200
Subject: [PATCH 033/130] cleanup

---
 .../components/test-fn.stories.tsx            | 42 +++++++++++++------
 code/core/src/csf/csf-factories.ts            |  8 ++--
 code/core/src/csf/index.ts                    |  4 ++
 code/core/src/csf/story.ts                    |  3 +-
 .../preview-api/modules/store/StoryStore.ts   |  5 +--
 .../modules/store/csf/normalizeStory.ts       |  1 -
 .../modules/store/csf/processCSFFile.ts       | 14 +++----
 code/core/src/types/modules/indexer.ts        |  7 +++-
 code/vitest.workspace.ts                      | 14 +++----
 9 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index baecf2d9a6ae..14ff1dde23a0 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -17,27 +17,45 @@ const meta = preview.meta({
 
 export const Default = meta.story({
   args: {
-    children: 'From story',
-  },
-  play: async ({ canvas }) => {
-    const button = canvas.getByText('From test');
-    await expect(button).toBeInTheDocument();
+    children: 'Arg from story',
   },
 });
+Default.test('simple', async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Arg from story');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+});
 Default.test(
-  'Exists in the dom',
+  'with overrides',
   {
     args: {
-      children: 'From test',
+      children: 'Arg from test',
     },
   },
   async ({ canvas }) => {
-    const button = canvas.getByText('From test');
+    const button = canvas.getByText('Arg from test');
     await expect(button).toBeInTheDocument();
   }
 );
-Default.test('onClick is called', async ({ canvas, userEvent, args }) => {
-  const button = canvas.getByText('Default');
-  await userEvent.click(button);
-  await expect(args.onClick).toHaveBeenCalled();
+Default.test(
+  'with play function',
+  {
+    play: async ({ canvas }) => {
+      const button = canvas.getByText('Arg from story');
+      await expect(button).toBeInTheDocument();
+    },
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from story');
+    await expect(button).toBeEnabled();
+  }
+);
+export const Extended = Default.extend({
+  args: {
+    children: 'Arg from extended story',
+  },
+});
+Extended.test('should have extended args', async ({ canvas }) => {
+  const button = canvas.getByText('Arg from extended story');
+  await expect(button).toBeEnabled();
 });
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index d5daaa37fdf1..b1a37f060192 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -208,10 +208,9 @@ function defineStory<
       >;
       const testFunction = (hasOverrides ? testFn : overridesOrTestFn) as TestFunction<TRenderer>;
 
-      // Build the story for this test (clone if annotations present)
-      const testStory = this.extend(annotations);
+      // A test is a clone of the story + the test function
+      const testStory = this.extend({ ...annotations, tags: ['test-fn'] });
       testStory.input.__testFunction = testFunction;
-      // Store in registry
       this.input.__tests![name] = testStory;
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {
@@ -219,8 +218,7 @@ function defineStory<
         {
           ...this.input,
           ...input,
-          // TODO: Discuss
-          args: { ...(this.composed.args || {}), ...input.args },
+          args: { ...(this.input.args || {}), ...input.args },
           argTypes: combineParameters(this.input.argTypes, input.argTypes),
           afterEach: [
             ...normalizeArrays(this.input?.afterEach ?? []),
diff --git a/code/core/src/csf/index.ts b/code/core/src/csf/index.ts
index 5501ed1a8e00..aac52e2a8a55 100644
--- a/code/core/src/csf/index.ts
+++ b/code/core/src/csf/index.ts
@@ -27,6 +27,10 @@ const sanitizeSafe = (string: string, part: string) => {
 export const toId = (kind: string, name?: string) =>
   `${sanitizeSafe(kind, 'kind')}${name ? `--${sanitizeSafe(name, 'name')}` : ''}`;
 
+/** Generate a storybook test ID from a story ID and test name. */
+export const toTestId = (parentId: string, testName: string) =>
+  `${parentId}:${sanitizeSafe(testName, 'test')}`;
+
 /** Transform a CSF named export into a readable story name */
 export const storyNameFromExport = (key: string) => toStartCaseStr(key);
 
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index 99358bf2d5e4..caefdf2ff8b3 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -2,6 +2,7 @@ import type { RemoveIndexSignature, Simplify, UnionToIntersection } from 'type-f
 
 import type { SBScalarType, SBType } from './SBType';
 import type { CoreTypes } from './core-annotations';
+import type { Story } from './csf-factories';
 
 export * from './SBType';
 export type StoryId = string;
@@ -535,7 +536,7 @@ export type StoryAnnotations<
   story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
 
   /** @private */
-  __tests?: Record<string, StoryAnnotations<TRenderer, TRenderer['args']>>;
+  __tests?: Record<string, Story<TRenderer>>;
   __testFunction?: (context: StoryContext<TRenderer>) => Promise<void>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 27351157fecb..04c1d8bfe90e 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -198,7 +198,6 @@ export class StoryStore<TRenderer extends Renderer> {
   }): PreparedStory<TRenderer> {
     const storyAnnotations = csfFile.stories[storyId];
 
-    console.log('storyFromCSFFile: initial annotations', storyAnnotations);
     if (!storyAnnotations) {
       throw new MissingStoryFromCsfFileError({ storyId });
     }
@@ -210,9 +209,9 @@ export class StoryStore<TRenderer extends Renderer> {
       componentAnnotations,
       csfFile.projectAnnotations ?? this.projectAnnotations
     );
+    // TODO: check type error later
     this.args.setInitial(story);
     this.hooks[story.id] = this.hooks[story.id] || new HooksContext();
-    console.log('storyFromCSFFile: prepared story', story);
     return story;
   }
 
@@ -228,7 +227,6 @@ export class StoryStore<TRenderer extends Renderer> {
   }
 
   async loadEntry(id: StoryId) {
-    console.log('loadEntry: loading id', id);
     const entry = await this.storyIdToEntry(id);
 
     const storyImports = entry.type === 'docs' ? entry.storiesImports : [];
@@ -250,7 +248,6 @@ export class StoryStore<TRenderer extends Renderer> {
     const userGlobals = this.userGlobals.get();
     const { initialGlobals } = this.userGlobals;
     const reporting = new ReporterAPI();
-    console.log('getStoryContext: for story', story);
     return prepareContext({
       ...story,
       args: forceInitialArgs ? story.initialArgs : this.args.get(story.id),
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index 6f52526956bf..b3cd6a53ed37 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -62,7 +62,6 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.afterEach),
     ...normalizeArrays(story?.afterEach),
   ];
-  console.log('normalizeStory', storyAnnotations);
   const __tests = storyAnnotations.__tests;
   const __testFunction = storyAnnotations.__testFunction;
   const { render, play, tags = [], globals = {} } = storyObject;
diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index 7b8b0af5a82a..62fcb0a7ed36 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -1,5 +1,5 @@
 import { logger } from 'storybook/internal/client-logger';
-import { isExportStory, isStory, sanitize } from 'storybook/internal/csf';
+import { isExportStory, isStory, toTestId } from 'storybook/internal/csf';
 import type { ComponentTitle, Parameters, Path, Renderer } from 'storybook/internal/types';
 import type {
   CSFFile,
@@ -49,7 +49,6 @@ export function processCSFFile<TRenderer extends Renderer>(
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
 
   const firstStory = Object.values(namedExports)[0];
-  console.log('processing CSF file');
   if (isStory<TRenderer>(firstStory)) {
     const meta: NormalizedComponentAnnotations<TRenderer> =
       normalizeComponentAnnotations<TRenderer>(firstStory.meta.input, title, importPath);
@@ -67,13 +66,10 @@ export function processCSFFile<TRenderer extends Renderer>(
         // if the story has tests, we need to add those to the csfFile
         if (storyMeta.__tests) {
           Object.entries(storyMeta.__tests).forEach(([testName, test]) => {
-            const testId = storyMeta.id + ':' + sanitize(testName);
-            test.parameters ??= {};
-            // @ts-expect-error TODO discuss later
-            test.parameters.__id = testId;
-            // @ts-expect-error TODO discuss later
-            console.log('Adding story test', testId, test.input);
-            // @ts-expect-error TODO discuss later
+            const testId = toTestId(storyMeta.id, testName);
+            // @ts-expect-error We provide the __id parameter because we don't want normalizeStory to calculate the id
+            test.input.parameters.__id = testId;
+            // @ts-expect-error Check type error later
             csfFile.stories[testId] = normalizeStory(testName, test.input, meta);
           });
         }
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index 554f96164a1c..bd49116ff980 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -133,6 +133,11 @@ export type StoryIndexInput = BaseIndexInput & {
   type: 'story';
 };
 
+export type TestIndexInput = BaseIndexInput & {
+  type: 'test';
+  parentId: StoryId;
+};
+
 /** The input for indexing a docs entry. */
 export type DocsIndexInput = BaseIndexInput & {
   type: 'docs';
@@ -140,7 +145,7 @@ export type DocsIndexInput = BaseIndexInput & {
   storiesImports?: Path[];
 };
 
-export type IndexInput = StoryIndexInput | DocsIndexInput;
+export type IndexInput = StoryIndexInput | DocsIndexInput | TestIndexInput;
 
 export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags'> {
   kind: ComponentTitle;
diff --git a/code/vitest.workspace.ts b/code/vitest.workspace.ts
index 210fcedad8f2..bf96863c6850 100644
--- a/code/vitest.workspace.ts
+++ b/code/vitest.workspace.ts
@@ -4,13 +4,13 @@ import { defineConfig, defineWorkspace } from 'vitest/config';
 
 export default defineWorkspace([
   'vitest-storybook.config.mts',
-  'addons/*/vitest.config.ts',
-  'frameworks/*/vitest.config.ts',
-  'lib/*/vitest.config.ts',
-  'core/vitest.config.ts',
-  'builders/*/vitest.config.ts',
-  'presets/*/vitest.config.ts',
-  'renderers/*/vitest.config.ts',
+  // 'addons/*/vitest.config.ts',
+  // 'frameworks/*/vitest.config.ts',
+  // 'lib/*/vitest.config.ts',
+  // 'core/vitest.config.ts',
+  // 'builders/*/vitest.config.ts',
+  // 'presets/*/vitest.config.ts',
+  // 'renderers/*/vitest.config.ts',
 ]);
 
 /**

From 9d544a67ad8b3482c1655e4ba09f6a189b45fcbd Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:09:43 +0200
Subject: [PATCH 034/130] prepare for index type test

---
 .../core-server/utils/StoryIndexGenerator.ts  |  20 +++-
 code/core/src/csf-tools/CsfFile.test.ts       | 109 ++++++------------
 code/core/src/csf-tools/CsfFile.ts            |  40 ++++---
 code/core/src/csf-tools/storyIndexer.test.ts  |   6 +-
 code/core/src/types/modules/api-stories.ts    |  10 +-
 code/core/src/types/modules/indexer.ts        |   7 +-
 code/renderers/server/src/preset.ts           |   1 +
 7 files changed, 91 insertions(+), 102 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index ccf1221f4853..9e78f13c5379 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -19,6 +19,7 @@ import type {
   StoryIndexEntry,
   StorybookConfigRaw,
   Tag,
+  TestIndexEntry,
 } from 'storybook/internal/types';
 
 import { findUp } from 'find-up';
@@ -35,7 +36,7 @@ import { autoName } from './autoName';
 import { type IndexStatsSummary, addStats } from './summarizeStats';
 
 // Extended type to keep track of the csf meta id so we know the component id when referencing docs in `extractDocs`
-type StoryIndexEntryWithExtra = StoryIndexEntry & {
+type StoryIndexEntryWithExtra = (StoryIndexEntry | TestIndexEntry) & {
   extra: { metaId?: string; stats: IndexInputStats };
 };
 /** A .mdx file will produce a docs entry */
@@ -439,8 +440,7 @@ export class StoryIndexGenerator {
         const id = input.__id ?? toId(input.metaId ?? title, storyNameFromExport(input.exportName));
         const tags = combineTags(...projectTags, ...(input.tags ?? []));
 
-        return {
-          type: 'story',
+        const commonMetadata = {
           id,
           extra: {
             metaId: input.metaId,
@@ -452,6 +452,20 @@ export class StoryIndexGenerator {
           componentPath,
           tags,
         };
+
+        if (input.type === 'test') {
+          return {
+            // TODO: change this to 'test' once we start working on UI.
+            type: 'story',
+            parentId: input.parentId,
+            ...commonMetadata,
+          };
+        }
+
+        return {
+          type: 'story',
+          ...commonMetadata,
+        };
       });
 
     // We need a docs entry attached to the CSF file if either:
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 7742765e7a56..64d7ffc3c70a 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -94,7 +94,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -110,7 +109,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -143,7 +141,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -177,7 +174,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -209,7 +205,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -239,7 +234,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -270,7 +264,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -284,7 +277,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -315,7 +307,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -329,7 +320,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -360,7 +350,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -374,7 +363,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -406,7 +394,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -420,7 +407,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -456,7 +442,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -473,7 +458,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -509,7 +493,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -526,7 +509,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -559,7 +541,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -573,7 +554,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -606,7 +586,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -620,7 +599,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -651,7 +629,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -665,7 +642,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -700,7 +676,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -734,7 +709,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -769,7 +743,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -809,7 +782,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -844,7 +816,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -861,7 +832,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -891,7 +861,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -905,7 +874,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -940,7 +908,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -957,7 +924,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -993,7 +959,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1076,7 +1041,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1090,7 +1054,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1146,7 +1109,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1160,7 +1122,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1240,7 +1201,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1275,7 +1235,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1308,7 +1267,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1343,7 +1301,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1427,7 +1384,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1463,7 +1419,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1506,7 +1461,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1544,7 +1498,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1607,7 +1560,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1645,7 +1597,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1679,7 +1630,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1712,7 +1662,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1748,7 +1697,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: true
               moduleMock: false
@@ -1784,7 +1732,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -1819,7 +1766,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: true
-              test: false
               storyFn: true
               mount: false
               moduleMock: false
@@ -1872,7 +1818,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1895,7 +1840,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1936,7 +1880,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -1982,7 +1925,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: true
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2043,7 +1985,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2083,7 +2024,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2123,7 +2063,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2163,7 +2102,6 @@ describe('CsfFile', () => {
             beforeEach: false
             globals: false
             tags: false
-            test: false
             storyFn: false
             mount: false
             moduleMock: false
@@ -2196,7 +2134,6 @@ describe('CsfFile', () => {
               beforeEach: true
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -2229,7 +2166,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: true
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: false
@@ -2261,7 +2197,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: true
@@ -2290,7 +2225,6 @@ describe('CsfFile', () => {
               beforeEach: false
               globals: false
               tags: false
-              test: false
               storyFn: false
               mount: false
               moduleMock: true
@@ -2325,7 +2259,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2339,7 +2272,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2370,7 +2302,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2403,7 +2334,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2417,7 +2347,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2469,6 +2398,41 @@ describe('CsfFile', () => {
         `);
       });
 
+      it('story test', () => {
+        expect(
+          parse(
+            dedent`
+              import { config } from '#.storybook/preview'
+              const meta = config.meta({ component: 'foo' });
+              export default meta;
+              export const A = meta.story({ args: { label: 'foo' } })
+              A.test('test name', { args: { label: 'bar' } }, async () => {})
+            `
+          )
+        ).toMatchInlineSnapshot(`
+          meta:
+            component: '''foo'''
+            title: Default Title
+          stories:
+            - id: default-title--a
+              name: A
+              __stats:
+                factory: true
+                tests: true
+                play: false
+                render: false
+                loaders: false
+                beforeEach: false
+                globals: false
+                tags: false
+                storyFn: false
+                mount: false
+                moduleMock: false
+              tags:
+                - test-fn
+        `);
+      });
+
       it('story name', () => {
         expect(
           parse(
@@ -2493,7 +2457,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2529,7 +2492,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
@@ -2565,7 +2527,6 @@ describe('CsfFile', () => {
                 beforeEach: false
                 globals: false
                 tags: false
-                test: false
                 storyFn: false
                 mount: false
                 moduleMock: false
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index f5e5b8b55983..1b0b6678d2b4 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -11,7 +11,7 @@ import {
   types as t,
   traverse,
 } from 'storybook/internal/babel';
-import { isExportStory, sanitize, storyNameFromExport, toId } from 'storybook/internal/csf';
+import { isExportStory, storyNameFromExport, toId, toTestId } from 'storybook/internal/csf';
 import { logger } from 'storybook/internal/node-logger';
 import type {
   ComponentAnnotations,
@@ -817,12 +817,10 @@ export class CsfFile {
           acc[key].tags = [...(acc[key].tags || []), 'play-fn'];
         }
         const stats = acc[key].__stats;
-        ['play', 'render', 'loaders', 'beforeEach', 'globals', 'tags', 'test'].forEach(
-          (annotation) => {
-            stats[annotation as keyof IndexInputStats] =
-              !!storyAnnotations[annotation] || !!self._metaAnnotations[annotation];
-          }
-        );
+        ['play', 'render', 'loaders', 'beforeEach', 'globals', 'tags'].forEach((annotation) => {
+          stats[annotation as keyof IndexInputStats] =
+            !!storyAnnotations[annotation] || !!self._metaAnnotations[annotation];
+        });
         const storyExport = self.getStoryExport(key);
         stats.storyFn = !!(
           t.isArrowFunctionExpression(storyExport) || t.isFunctionDeclaration(storyExport)
@@ -831,8 +829,12 @@ export class CsfFile {
         stats.moduleMock = !!self.imports.find((fname) => isModuleMock(fname));
 
         if (self._storyTests[key]) {
+          // TODO: if we want to add a tag for the story that contains tests, this is the place for it
+          // acc[key].tags = [...(acc[key].tags || []), 'story-with-tests'];
+
+          stats.tests = true;
           self._storyTests[key].forEach((test) => {
-            test.id = id + ':' + sanitize(test.name);
+            test.id = toTestId(id, test.name);
           });
         }
 
@@ -889,32 +891,32 @@ export class CsfFile {
     Object.entries(this._stories).map(([exportName, story]) => {
       // don't remove any duplicates or negations -- tags will be combined in the index
       const tags = [...(this._meta?.tags ?? []), ...(story.tags ?? [])];
-      index.push({
-        type: 'story',
+      const storyInput = {
         importPath: fileName,
         rawComponentPath: this._rawComponentPath,
         exportName,
-        name: story.name,
         title: this.meta?.title,
         metaId: this.meta?.id,
         tags,
         __id: story.id,
         __stats: story.__stats,
+      };
+
+      index.push({
+        ...storyInput,
+        type: 'story',
+        name: story.name,
       });
 
       if (this._storyTests[exportName]) {
         this._storyTests[exportName].forEach((test) => {
           index.push({
-            type: 'story', // perhaps this becomes type 'test'?
-            importPath: fileName,
-            rawComponentPath: this._rawComponentPath,
-            exportName,
+            ...storyInput,
+            type: 'test',
+            parentId: story.id,
             name: test.name,
-            title: this.meta?.title,
-            metaId: this.meta?.id,
-            tags: [...tags, 'test-fn'],
+            tags: [...storyInput.tags, 'test-fn'],
             __id: test.id,
-            __stats: story.__stats,
           });
         });
       }
diff --git a/code/core/src/csf-tools/storyIndexer.test.ts b/code/core/src/csf-tools/storyIndexer.test.ts
index 08fc869f5958..ef0987526ac1 100644
--- a/code/core/src/csf-tools/storyIndexer.test.ts
+++ b/code/core/src/csf-tools/storyIndexer.test.ts
@@ -50,10 +50,10 @@ describe('test fn', () => {
     expect(entries).toMatchInlineSnapshot(`
       [
         "A",
-        "A: first one",
-        "A: Second one",
+        "first one",
+        "Second one",
         "B",
-        "B: first one",
+        "first one",
       ]
     `);
   });
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 5dbe24143285..519c8372bc89 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -55,13 +55,19 @@ export interface API_StoryEntry extends API_BaseEntry {
   initialArgs?: Args;
 }
 
-export type API_LeafEntry = API_DocsEntry | API_StoryEntry;
+export interface API_TestEntry extends Omit<API_StoryEntry, 'type'> {
+  type: 'test';
+  parentId: StoryId;
+}
+
+export type API_LeafEntry = API_DocsEntry | API_StoryEntry | API_TestEntry;
 export type API_HashEntry =
   | API_RootEntry
   | API_GroupEntry
   | API_ComponentEntry
   | API_DocsEntry
-  | API_StoryEntry;
+  | API_StoryEntry
+  | API_TestEntry;
 
 /**
  * The `IndexHash` is our manager-side representation of the `StoryIndex`. We create entries in the
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index bd49116ff980..a5143ff8b4ae 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -75,12 +75,17 @@ export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
 };
 
+export type TestIndexEntry = BaseIndexEntry & {
+  type: 'test';
+  parentId: StoryId;
+};
+
 export type DocsIndexEntry = BaseIndexEntry & {
   storiesImports: Path[];
   type: 'docs';
 };
 
-export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
+export type IndexEntry = StoryIndexEntry | DocsIndexEntry | TestIndexEntry;
 
 export interface IndexInputStats {
   loaders?: boolean;
diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts
index acda308d5967..266e602304c4 100644
--- a/code/renderers/server/src/preset.ts
+++ b/code/renderers/server/src/preset.ts
@@ -30,6 +30,7 @@ export const experimental_indexers: PresetProperty<'experimental_indexers'> = (
           name: story.name,
           title: content.title,
           tags,
+          // TODO: Does this need change now with story tests?
           type: 'story',
         };
       });

From bef2d9ebd360968fc4f19eca00feaf11cc91c780 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:20:31 +0200
Subject: [PATCH 035/130] update tests

---
 .../utils/StoryIndexGenerator.test.ts         |   3 -
 code/core/src/csf-tools/CsfFile.test.ts       |  50 +-
 .../vitest-plugin/transformer.test.ts         |   1 -
 code/core/src/csf/csf-factories.test.ts       |  37 +-
 .../modules/preview-web/PreviewWeb.test.ts    | 522 ++++++++---------
 .../modules/store/StoryStore.test.ts          | 532 +++++++++---------
 6 files changed, 589 insertions(+), 556 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index 513ce2af5755..777dc6982bb3 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -106,7 +106,6 @@ describe('StoryIndexGenerator', () => {
             "render": 0,
             "storyFn": 0,
             "tags": 1,
-            "test": 0,
           }
         `);
       });
@@ -555,7 +554,6 @@ describe('StoryIndexGenerator', () => {
             "render": 1,
             "storyFn": 1,
             "tags": 5,
-            "test": 0,
           }
         `);
       });
@@ -836,7 +834,6 @@ describe('StoryIndexGenerator', () => {
             "render": 1,
             "storyFn": 1,
             "tags": 5,
-            "test": 0,
           }
         `);
       });
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 64d7ffc3c70a..4202024830ba 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -1799,10 +1799,8 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           exportName: A
-          name: A
           title: custom foo title
           metaId: component-id
           tags:
@@ -1821,10 +1819,10 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
-        - type: story
-          importPath: foo/bar.stories.js
+          type: story
+          name: A
+        - importPath: foo/bar.stories.js
           exportName: B
-          name: B
           title: custom foo title
           metaId: component-id
           tags:
@@ -1843,6 +1841,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: B
       `);
     });
 
@@ -1863,10 +1863,8 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           exportName: A
-          name: A
           title: custom foo title
           metaId: component-id
           tags:
@@ -1883,6 +1881,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
 
@@ -1902,10 +1902,8 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           exportName: A
-          name: A
           title: custom foo title
           tags:
             - component-tag
@@ -1928,6 +1926,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
 
@@ -1970,10 +1970,8 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           exportName: A
-          name: A
           title: custom foo title
           tags: []
           __id: custom-foo-title--a
@@ -1988,6 +1986,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
 
@@ -2009,10 +2009,8 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           exportName: A
-          name: A
           title: custom foo title
           tags: []
           __id: custom-foo-title--a
@@ -2027,6 +2025,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
 
@@ -2047,11 +2047,9 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           rawComponentPath: ../src/Component.js
           exportName: A
-          name: A
           title: custom foo title
           tags: []
           __id: custom-foo-title--a
@@ -2066,6 +2064,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
 
@@ -2086,11 +2086,9 @@ describe('CsfFile', () => {
       ).parse();
 
       expect(indexInputs).toMatchInlineSnapshot(`
-        - type: story
-          importPath: foo/bar.stories.js
+        - importPath: foo/bar.stories.js
           rawComponentPath: some-library
           exportName: A
-          name: A
           title: custom foo title
           tags: []
           __id: custom-foo-title--a
@@ -2105,6 +2103,8 @@ describe('CsfFile', () => {
             storyFn: false
             mount: false
             moduleMock: false
+          type: story
+          name: A
       `);
     });
   });
@@ -2428,8 +2428,6 @@ describe('CsfFile', () => {
                 storyFn: false
                 mount: false
                 moduleMock: false
-              tags:
-                - test-fn
         `);
       });
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index de69fc8ad242..0cd22aba76c7 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -814,7 +814,6 @@ describe('transformer', () => {
           if (_isRunningFromThisFile) {
             _describe("A", () => {
               _test("base story", _testStory("A", A, meta, []));
-              _test("foo", _testStory("A", A, meta, [], "foo"));
               _test("bar", _testStory("A", A, meta, [], "bar"));
             });
           }
diff --git a/code/core/src/csf/csf-factories.test.ts b/code/core/src/csf/csf-factories.test.ts
index c6aa1b7bdf59..33d2d8aece79 100644
--- a/code/core/src/csf/csf-factories.test.ts
+++ b/code/core/src/csf/csf-factories.test.ts
@@ -1,4 +1,4 @@
-import { expect, test, vi } from 'vitest';
+import { describe, expect, test, vi } from 'vitest';
 
 import { definePreview, definePreviewAddon } from './csf-factories';
 
@@ -44,10 +44,33 @@ test('addon parameters are inferred', () => {
   });
 });
 
-test('test function is defined', async () => {
-  const MyStory = meta.story({});
-  const testFn = vi.fn();
-  MyStory.test('should run test', testFn);
-  await MyStory.__runTest('should run test');
-  expect(testFn).toHaveBeenCalledWith(MyStory.composed);
+describe('test function', () => {
+  test('without overrides', async () => {
+    const MyStory = meta.story({ args: { label: 'foo' } });
+    const testFn = vi.fn();
+    const testName = 'should run test';
+
+    // register test
+    MyStory.test(testName, testFn);
+    const storyTest = MyStory.input.__tests![testName];
+    expect(storyTest.input.args).toEqual({ label: 'foo' });
+
+    // execute test
+    await storyTest.input.__testFunction?.();
+    expect(testFn).toHaveBeenCalled();
+  });
+  test('with overrides', async () => {
+    const MyStory = meta.story({ args: { label: 'foo' } });
+    const testFn = vi.fn();
+    const testName = 'should run test';
+
+    // register test
+    MyStory.test(testName, { args: { label: 'bar' } }, testFn);
+    const storyTest = MyStory.input.__tests![testName];
+    expect(storyTest.input.args).toEqual({ label: 'bar' });
+
+    // execute test
+    await storyTest.input.__testFunction?.();
+    expect(testFn).toHaveBeenCalled();
+  });
 });
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index 056d94e7e040..a56f4c0e6457 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -3847,267 +3847,275 @@ describe('PreviewWeb', () => {
       expect(extracted).toBe(true);
 
       expect(await preview.extract()).toMatchInlineSnapshot(`
-  {
-    "component-one--a": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-        "one": {
-          "mapping": {
-            "1": "mapped-1",
-          },
-          "name": "one",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "a",
-        "one": 1,
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--a",
-      "initialArgs": {
-        "foo": "a",
-        "one": 1,
-      },
-      "kind": "Component One",
-      "name": "A",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
-          },
-        },
-        "docs": {
-          "container": [MockFunction spy],
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "story": "A",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-one--b": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-        "one": {
-          "mapping": {
-            "1": "mapped-1",
-          },
-          "name": "one",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "b",
-        "one": 1,
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--b",
-      "initialArgs": {
-        "foo": "b",
-        "one": 1,
-      },
-      "kind": "Component One",
-      "name": "B",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+        {
+          "component-one--a": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "one": {
+                "mapping": {
+                  "1": "mapped-1",
+                },
+                "name": "one",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "a",
+              "one": 1,
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--a",
+            "initialArgs": {
+              "foo": "a",
+              "one": 1,
+            },
+            "kind": "Component One",
+            "name": "A",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "container": [MockFunction spy],
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "story": "A",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "container": [MockFunction spy],
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "story": "B",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-one--e": {
-      "argTypes": {},
-      "args": {},
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--e",
-      "initialArgs": {},
-      "kind": "Component One",
-      "name": "E",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+          "component-one--b": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "one": {
+                "mapping": {
+                  "1": "mapped-1",
+                },
+                "name": "one",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "b",
+              "one": 1,
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--b",
+            "initialArgs": {
+              "foo": "b",
+              "one": 1,
+            },
+            "kind": "Component One",
+            "name": "B",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "container": [MockFunction spy],
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "story": "B",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ExtraComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "story": "E",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-two--c": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
+          "component-one--e": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {},
+            "args": {},
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--e",
+            "initialArgs": {},
+            "kind": "Component One",
+            "name": "E",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ExtraComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "story": "E",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-      },
-      "args": {
-        "foo": "c",
-      },
-      "component": undefined,
-      "componentId": "component-two",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-two--c",
-      "initialArgs": {
-        "foo": "c",
-      },
-      "kind": "Component Two",
-      "name": "C",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+          "component-two--c": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "c",
+            },
+            "component": undefined,
+            "componentId": "component-two",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-two--c",
+            "initialArgs": {
+              "foo": "c",
+            },
+            "kind": "Component Two",
+            "name": "C",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentTwo.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "story": "C",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component Two",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentTwo.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "story": "C",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component Two",
-      "usesMount": false,
-    },
-  }
-`);
+        }
+      `);
     });
   });
 });
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index fe69e7f92979..8bb71ce2145f 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -280,74 +280,76 @@ describe('StoryStore', () => {
       });
 
       expect(store.extract()).toMatchInlineSnapshot(`
-  {
-    "component-one--a": {
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "a",
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--a",
-      "initialArgs": {
-        "foo": "a",
-      },
-      "kind": "Component One",
-      "name": "A",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+        {
+          "component-one--a": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "a": {
+                "name": "a",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "a",
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--a",
+            "initialArgs": {
+              "foo": "a",
+            },
+            "kind": "Component One",
+            "name": "A",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "fileName": "./src/ComponentOne-new.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "renderToCanvas": undefined,
+            "story": "A",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "fileName": "./src/ComponentOne-new.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "story": "A",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-  }
-`);
+        }
+      `);
     });
   });
 
@@ -472,204 +474,210 @@ describe('StoryStore', () => {
       await store.cacheAllCSFFiles();
 
       expect(store.extract()).toMatchInlineSnapshot(`
-  {
-    "component-one--a": {
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "a",
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--a",
-      "initialArgs": {
-        "foo": "a",
-      },
-      "kind": "Component One",
-      "name": "A",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
-          },
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "story": "A",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-one--b": {
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
-          },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "b",
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--b",
-      "initialArgs": {
-        "foo": "b",
-      },
-      "kind": "Component One",
-      "name": "B",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
-          },
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "story": "B",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-two--c": {
-      "argTypes": {
-        "a": {
-          "name": "a",
-          "type": {
-            "name": "string",
+        {
+          "component-one--a": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "a": {
+                "name": "a",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "a",
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--a",
+            "initialArgs": {
+              "foo": "a",
+            },
+            "kind": "Component One",
+            "name": "A",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "renderToCanvas": undefined,
+            "story": "A",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
+          "component-one--b": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "a": {
+                "name": "a",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "b",
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--b",
+            "initialArgs": {
+              "foo": "b",
+            },
+            "kind": "Component One",
+            "name": "B",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "renderToCanvas": undefined,
+            "story": "B",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-      },
-      "args": {
-        "foo": "c",
-      },
-      "component": undefined,
-      "componentId": "component-two",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-two--c",
-      "initialArgs": {
-        "foo": "c",
-      },
-      "kind": "Component Two",
-      "name": "C",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+          "component-two--c": {
+            "__testFunction": undefined,
+            "__tests": undefined,
+            "argTypes": {
+              "a": {
+                "name": "a",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "c",
+            },
+            "component": undefined,
+            "componentId": "component-two",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-two--c",
+            "initialArgs": {
+              "foo": "c",
+            },
+            "kind": "Component Two",
+            "name": "C",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "fileName": "./src/ComponentTwo.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "renderToCanvas": undefined,
+            "story": "C",
+            "storyGlobals": {},
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component Two",
+            "usesMount": false,
           },
-        },
-        "fileName": "./src/ComponentTwo.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "renderToCanvas": undefined,
-      "story": "C",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component Two",
-      "usesMount": false,
-    },
-  }
-`);
+        }
+      `);
     });
 
     it('does not include (legacy) docs only stories by default', async () => {

From 87446ca41629762dedeffe471c5257429d993593 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:22:42 +0200
Subject: [PATCH 036/130] update types

---
 .../component-testing/components/test-fn.stories.tsx  | 11 +++++++++++
 code/core/src/csf/csf-factories.ts                    |  3 +--
 code/core/src/csf/story.ts                            |  6 +++++-
 code/core/src/types/modules/csf.ts                    |  1 +
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 14ff1dde23a0..1bc36738c0a6 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { TestFunction } from 'storybook/internal/types';
+
 import { expect, fn } from 'storybook/test';
 
 import preview from '../../../../.storybook/preview';
@@ -25,6 +27,15 @@ Default.test('simple', async ({ canvas, userEvent, args }) => {
   await userEvent.click(button);
   await expect(args.onClick).toHaveBeenCalled();
 });
+
+const doTest: TestFunction = async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Arg from story');
+  await userEvent.click(button);
+  // TODO: fix type error later
+  await expect(args.onClick).toHaveBeenCalled();
+};
+Default.test('referring to function in file', doTest);
+
 Default.test(
   'with overrides',
   {
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index b1a37f060192..90600820b98a 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -8,6 +8,7 @@ import type {
   ProjectAnnotations,
   Renderer,
   StoryAnnotations,
+  TestFunction,
 } from 'storybook/internal/types';
 
 import {
@@ -121,8 +122,6 @@ function defineMeta<
   };
 }
 
-type TestFunction<TRenderer extends Renderer> = (context: StoryContext<TRenderer>) => Promise<void>;
-
 export interface Story<
   TRenderer extends Renderer,
   TInput extends StoryAnnotations<TRenderer, TRenderer['args']> = StoryAnnotations<
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index caefdf2ff8b3..57b54a8a8a09 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -285,6 +285,10 @@ export type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> =
   context: PlayFunctionContext<TRenderer, TArgs>
 ) => Promise<void> | void;
 
+export type TestFunction<TRenderer extends Renderer = Renderer, TArgs = TRenderer['args']> = (
+  context: StoryContext<TRenderer, TArgs>
+) => Promise<void> | void;
+
 // This is the type of story function passed to a decorator -- does not rely on being passed any context
 export type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (
   update?: StoryContextUpdate<Partial<TArgs>>
@@ -537,7 +541,7 @@ export type StoryAnnotations<
 
   /** @private */
   __tests?: Record<string, Story<TRenderer>>;
-  __testFunction?: (context: StoryContext<TRenderer>) => Promise<void>;
+  __testFunction?: TestFunction<TRenderer, TArgs>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
 export type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<
diff --git a/code/core/src/types/modules/csf.ts b/code/core/src/types/modules/csf.ts
index 47bb4e46b554..ad2891060eca 100644
--- a/code/core/src/types/modules/csf.ts
+++ b/code/core/src/types/modules/csf.ts
@@ -32,6 +32,7 @@ export type {
   LoaderFunction,
   Parameters,
   PartialStoryFn,
+  TestFunction,
   PlayFunction,
   PlayFunctionContext,
   ProjectAnnotations as BaseProjectAnnotations,

From 110822c53c0ab9f02e51ba2ff65730b033c5847c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:33:14 +0200
Subject: [PATCH 037/130] update tests

---
 code/core/src/csf-tools/CsfFile.test.ts | 33 ++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 4202024830ba..0b45fd9d12ce 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -1953,7 +1953,7 @@ describe('CsfFile', () => {
     });
   });
 
-  describe('componenent paths', () => {
+  describe('component paths', () => {
     it('no component', () => {
       const { indexInputs } = loadCsf(
         dedent`
@@ -2398,7 +2398,7 @@ describe('CsfFile', () => {
         `);
       });
 
-      it('story test', () => {
+      it('story test - index snapshot', () => {
         expect(
           parse(
             dedent`
@@ -2406,7 +2406,7 @@ describe('CsfFile', () => {
               const meta = config.meta({ component: 'foo' });
               export default meta;
               export const A = meta.story({ args: { label: 'foo' } })
-              A.test('test name', { args: { label: 'bar' } }, async () => {})
+              A.test('simple test', async () => {})
             `
           )
         ).toMatchInlineSnapshot(`
@@ -2431,6 +2431,33 @@ describe('CsfFile', () => {
         `);
       });
 
+      it('story test - parsing', () => {
+        const data = loadCsf(
+          dedent`
+            import { config } from '#.storybook/preview'
+            const meta = config.meta({ component: 'foo' });
+            export default meta;
+            export const A = meta.story({ args: { label: 'foo' } })
+            A.test('simple test', async () => {})
+            A.test('with overrides', { args: { label: 'bar' } }, async () => {})
+            const runTest = () => {}
+            A.test('with function reference', runTest, async () => {})
+          `,
+          { makeTitle }
+        ).parse();
+        const story = data._stories['A'];
+        expect(story.__stats.tests).toBe(true);
+
+        const storyTests = data._storyTests['A'];
+        expect(storyTests).toHaveLength(3);
+        expect(storyTests[0].name).toBe('simple test');
+        expect(storyTests[1].name).toBe('with overrides');
+        expect(storyTests[2].name).toBe('with function reference');
+        expect(storyTests[0].function).toBeDefined();
+        expect(storyTests[1].function).toBeDefined();
+        expect(storyTests[2].function).toBeDefined();
+      });
+
       it('story name', () => {
         expect(
           parse(

From b803204b680b09f4a0f71ddedf13f536682c7ccc Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:41:29 +0200
Subject: [PATCH 038/130] support function references

---
 code/core/src/csf-tools/CsfFile.ts           |  9 +++++++--
 code/core/src/csf-tools/storyIndexer.test.ts | 17 +++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 1b0b6678d2b4..ac5b4ad47aa1 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -280,7 +280,7 @@ export class CsfFile {
     string,
     Array<{
       node: t.Node;
-      function: t.FunctionExpression | t.ArrowFunctionExpression;
+      function: t.Node;
       name: string;
       id: string;
       options: any;
@@ -703,7 +703,12 @@ export class CsfFile {
               self._storyTests[exportName] = [];
             }
 
-            if (t.isArrowFunctionExpression(testFunction) || t.isFunctionExpression(testFunction)) {
+            // TODO: Do we want to support function references?
+            if (
+              t.isArrowFunctionExpression(testFunction) ||
+              t.isFunctionExpression(testFunction) ||
+              t.isIdentifier(testFunction)
+            ) {
               self._storyTests[exportName].push({
                 function: testFunction,
                 name: testName,
diff --git a/code/core/src/csf-tools/storyIndexer.test.ts b/code/core/src/csf-tools/storyIndexer.test.ts
index ef0987526ac1..7ce38a5cf317 100644
--- a/code/core/src/csf-tools/storyIndexer.test.ts
+++ b/code/core/src/csf-tools/storyIndexer.test.ts
@@ -41,19 +41,20 @@ describe('test fn', () => {
           import { config } from '#.storybook/preview'
           const meta = config.meta({ component: 'foo' });
           export const A = meta.story({})
-          A.test('first one', () => {})
-          A.test('Second one', () => {})
-          export const B = meta.story({})
-          B.test('first one', () => {})
+          A.test('async test function', async () => {})
+          A.test('sync test function', () => {})
+          A.test('with overrides', { args: { label: 'bar' } }, () => {})
+          const reference = () => {}
+          A.test('with function reference', reference)
         `
     );
     expect(entries).toMatchInlineSnapshot(`
       [
         "A",
-        "first one",
-        "Second one",
-        "B",
-        "first one",
+        "async test function",
+        "sync test function",
+        "with overrides",
+        "with function reference",
       ]
     `);
   });

From 5dce7ad0685bc341b8bab76c6e6154ca8d91ac4f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 19 Aug 2025 18:42:40 +0200
Subject: [PATCH 039/130] add test render phase

---
 .../preview-api/modules/preview-web/render/StoryRender.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 49ef05188e1c..a0feaf85eb6d 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -40,6 +40,8 @@ export type RenderPhase =
   | 'rendering'
   | 'playing'
   | 'played'
+  | 'testing'
+  | 'tested'
   | 'completing'
   | 'completed'
   | 'afterEach'
@@ -381,7 +383,11 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       }
 
       if (__testFunction) {
-        await __testFunction(context);
+        await this.runPhase(abortSignal, 'testing', async () => {
+          await __testFunction(context);
+        });
+
+        await this.runPhase(abortSignal, 'tested');
       }
 
       await this.runPhase(abortSignal, 'completing', async () => {

From 08b3fb20694d3c868f1cccfb6d6ef7d4796a4b14 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 11:47:25 +0200
Subject: [PATCH 040/130] prepare for the UI work

---
 .../core-server/utils/StoryIndexGenerator.ts  | 21 +++++++++++--------
 code/core/src/csf-tools/CsfFile.ts            |  6 ++++--
 code/core/src/csf/story.ts                    |  5 +++--
 code/core/src/types/modules/api-stories.ts    |  8 +++----
 code/core/src/types/modules/indexer.ts        |  6 ++++--
 code/core/src/types/modules/story.ts          |  6 ++++--
 6 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 9e78f13c5379..985b3a9083b3 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -35,8 +35,11 @@ import { IndexingError, MultipleIndexingError } from './IndexingError';
 import { autoName } from './autoName';
 import { type IndexStatsSummary, addStats } from './summarizeStats';
 
+// TODO: replace line 42 with this once we start working on UI for tests
+// type StoryIndexEntryWithExtra = (StoryIndexEntry | TestIndexEntry) & {
+
 // Extended type to keep track of the csf meta id so we know the component id when referencing docs in `extractDocs`
-type StoryIndexEntryWithExtra = (StoryIndexEntry | TestIndexEntry) & {
+type StoryIndexEntryWithExtra = StoryIndexEntry & {
   extra: { metaId?: string; stats: IndexInputStats };
 };
 /** A .mdx file will produce a docs entry */
@@ -453,14 +456,14 @@ export class StoryIndexGenerator {
           tags,
         };
 
-        if (input.type === 'test') {
-          return {
-            // TODO: change this to 'test' once we start working on UI.
-            type: 'story',
-            parentId: input.parentId,
-            ...commonMetadata,
-          };
-        }
+        // TODO: Enable this once we start working on UI for tests
+        // if (input.type === 'test') {
+        //   return {
+        //     type: 'test',
+        //     parentId: input.parentId,
+        //     ...commonMetadata,
+        //   };
+        // }
 
         return {
           type: 'story',
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index ac5b4ad47aa1..a786560c9cbc 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -917,8 +917,10 @@ export class CsfFile {
         this._storyTests[exportName].forEach((test) => {
           index.push({
             ...storyInput,
-            type: 'test',
-            parentId: story.id,
+            type: 'story',
+            // TODO: enable this once we start working on UI for tests
+            // type: 'test',
+            // parentId: story.id,
             name: test.name,
             tags: [...storyInput.tags, 'test-fn'],
             __id: test.id,
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index 57b54a8a8a09..70b694652db7 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -540,8 +540,9 @@ export type StoryAnnotations<
   story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
 
   /** @private */
-  __tests?: Record<string, Story<TRenderer>>;
-  __testFunction?: TestFunction<TRenderer, TArgs>;
+  // TODO: fix the type issue later
+  __tests?: Record<string, Story<any>>;
+  __testFunction?: TestFunction<TRenderer, TRenderer['args']>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
 export type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 519c8372bc89..13d8db05e238 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -59,15 +59,15 @@ export interface API_TestEntry extends Omit<API_StoryEntry, 'type'> {
   type: 'test';
   parentId: StoryId;
 }
-
-export type API_LeafEntry = API_DocsEntry | API_StoryEntry | API_TestEntry;
+// TODO: enable TestEntry once we start working on UI for tests
+export type API_LeafEntry = API_DocsEntry | API_StoryEntry; // | API_TestEntry;
 export type API_HashEntry =
   | API_RootEntry
   | API_GroupEntry
   | API_ComponentEntry
   | API_DocsEntry
-  | API_StoryEntry
-  | API_TestEntry;
+  | API_StoryEntry;
+// | API_TestEntry;
 
 /**
  * The `IndexHash` is our manager-side representation of the `StoryIndex`. We create entries in the
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index a5143ff8b4ae..6cf977663afa 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -85,7 +85,8 @@ export type DocsIndexEntry = BaseIndexEntry & {
   type: 'docs';
 };
 
-export type IndexEntry = StoryIndexEntry | DocsIndexEntry | TestIndexEntry;
+// TODO: add this once we start working on UI for tests
+export type IndexEntry = StoryIndexEntry | DocsIndexEntry; //| TestIndexEntry;
 
 export interface IndexInputStats {
   loaders?: boolean;
@@ -150,7 +151,8 @@ export type DocsIndexInput = BaseIndexInput & {
   storiesImports?: Path[];
 };
 
-export type IndexInput = StoryIndexInput | DocsIndexInput | TestIndexInput;
+// TODO: add this once we start working on UI for tests
+export type IndexInput = StoryIndexInput | DocsIndexInput; // | TestIndexInput;
 
 export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags'> {
   kind: ComponentTitle;
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index f113900c7fd5..504dee9b343b 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -24,6 +24,7 @@ import type {
   StoryName,
   StrictArgTypes,
   StrictGlobalTypes,
+  TestFunction,
 } from './csf';
 
 // Store Types
@@ -114,9 +115,10 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
     storyGlobals: Globals;
-    __testFunction?: (context: StoryContext<TRenderer>) => Promise<void>;
+    __testFunction?: TestFunction<TRenderer, TRenderer['args']>;
     /** @private */
-    __tests?: Record<string, StoryAnnotations<TRenderer, TRenderer['args']>>;
+    // TODO: fix the type issue later
+    __tests?: Record<string, StoryAnnotations<any>>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

From 40df0de79a23714f053e0b2c3313c832baff235b Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 12:08:03 +0200
Subject: [PATCH 041/130] updates

---
 code/.storybook/main.ts              | 159 ++++++++++++++-------------
 code/core/src/csf/csf-factories.ts   |   3 +-
 code/renderers/react/src/preview.tsx |   2 +
 3 files changed, 83 insertions(+), 81 deletions(-)

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index ec9d1d9fd85c..8142562c043c 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -16,88 +16,89 @@ const imageContextPath = join(currentDirPath, '../frameworks/nextjs/src/image-co
 
 const config = defineMain({
   stories: [
-    './*.stories.@(js|jsx|ts|tsx)',
-    {
-      directory: '../core/template/stories',
-      titlePrefix: 'core',
-    },
-    {
-      directory: '../core/src/manager',
-      titlePrefix: 'manager',
-    },
-    {
-      directory: '../core/src/preview-api',
-      titlePrefix: 'preview',
-    },
-    {
-      directory: '../core/src/preview',
-      titlePrefix: 'preview',
-    },
-    {
-      directory: '../core/src/components/brand',
-      titlePrefix: 'brand',
-    },
-    {
-      directory: '../core/src/components/components',
-      titlePrefix: 'components',
-    },
+    // './*.stories.@(js|jsx|ts|tsx)',
+    // {
+    //   directory: '../core/template/stories',
+    //   titlePrefix: 'core',
+    // },
+    // {
+    //   directory: '../core/src/manager',
+    //   titlePrefix: 'manager',
+    // },
+    // {
+    //   directory: '../core/src/preview-api',
+    //   titlePrefix: 'preview',
+    // },
+    // {
+    //   directory: '../core/src/preview',
+    //   titlePrefix: 'preview',
+    // },
+    // {
+    //   directory: '../core/src/components/brand',
+    //   titlePrefix: 'brand',
+    // },
+    // {
+    //   directory: '../core/src/components/components',
+    //   titlePrefix: 'components',
+    // },
     {
       directory: '../core/src/component-testing/components',
       titlePrefix: 'component-testing',
-    },
-    {
-      directory: '../core/src/controls/components',
-      titlePrefix: 'controls',
-    },
-    {
-      directory: '../core/src/highlight',
-      titlePrefix: 'highlight',
-    },
-    {
-      directory: '../addons/docs/src/blocks',
-      titlePrefix: 'addons/docs/blocks',
-    },
-    {
-      directory: '../addons/a11y/src',
-      titlePrefix: 'addons/accessibility',
-    },
-    {
-      directory: '../addons/a11y/template/stories',
-      titlePrefix: 'addons/accessibility',
-    },
-    {
-      directory: '../addons/docs/template/stories',
-      titlePrefix: 'addons/docs',
-    },
-    {
-      directory: '../addons/links/template/stories',
-      titlePrefix: 'addons/links',
-    },
-    {
-      directory: '../addons/themes/template/stories',
-      titlePrefix: 'addons/themes',
-    },
-    {
-      directory: '../addons/onboarding/src',
-      titlePrefix: 'addons/onboarding',
-    },
-    {
-      directory: '../addons/pseudo-states/src',
-      titlePrefix: 'addons/pseudo-states',
-    },
-    {
-      directory: '../addons/vitest/src/components',
-      titlePrefix: 'addons/vitest',
-    },
-    {
-      directory: '../addons/vitest/template/stories',
-      titlePrefix: 'addons/vitest',
-    },
-    {
-      directory: '../addons/vitest/src',
-      titlePrefix: 'addons/vitest',
-      files: 'stories.tsx',
-    },
+      files: 'test-fn.stories.tsx',
+    },
+    // {
+    //   directory: '../core/src/controls/components',
+    //   titlePrefix: 'controls',
+    // },
+    // {
+    //   directory: '../core/src/highlight',
+    //   titlePrefix: 'highlight',
+    // },
+    // {
+    //   directory: '../addons/docs/src/blocks',
+    //   titlePrefix: 'addons/docs/blocks',
+    // },
+    // {
+    //   directory: '../addons/a11y/src',
+    //   titlePrefix: 'addons/accessibility',
+    // },
+    // {
+    //   directory: '../addons/a11y/template/stories',
+    //   titlePrefix: 'addons/accessibility',
+    // },
+    // {
+    //   directory: '../addons/docs/template/stories',
+    //   titlePrefix: 'addons/docs',
+    // },
+    // {
+    //   directory: '../addons/links/template/stories',
+    //   titlePrefix: 'addons/links',
+    // },
+    // {
+    //   directory: '../addons/themes/template/stories',
+    //   titlePrefix: 'addons/themes',
+    // },
+    // {
+    //   directory: '../addons/onboarding/src',
+    //   titlePrefix: 'addons/onboarding',
+    // },
+    // {
+    //   directory: '../addons/pseudo-states/src',
+    //   titlePrefix: 'addons/pseudo-states',
+    // },
+    // {
+    //   directory: '../addons/vitest/src/components',
+    //   titlePrefix: 'addons/vitest',
+    // },
+    // {
+    //   directory: '../addons/vitest/template/stories',
+    //   titlePrefix: 'addons/vitest',
+    // },
+    // {
+    //   directory: '../addons/vitest/src',
+    //   titlePrefix: 'addons/vitest',
+    //   files: 'stories.tsx',
+    // },
   ],
   addons: [
     '@storybook/addon-themes',
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 90600820b98a..ba5b6a617d04 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -139,7 +139,6 @@ export interface Story<
     name: string;
   };
   meta: Meta<TRenderer>;
-  __compose: () => ComposedStoryFn<TRenderer>;
   play: TInput['play'];
   run: (
     context?: Partial<StoryContext<TRenderer, Partial<TRenderer['args']>>>,
@@ -155,7 +154,6 @@ export interface Story<
     annotations: StoryAnnotations<TRenderer, TRenderer['args']>,
     fn: TestFunction<TRenderer>
   ): void;
-  __testFunction?: TestFunction<TRenderer>;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
@@ -183,6 +181,7 @@ function defineStory<
     _tag: 'Story',
     input,
     meta,
+    // @ts-expect-error this is a privat property used only once in renderers/react/src/preview
     __compose: compose,
     get composed() {
       const composed = compose();
diff --git a/code/renderers/react/src/preview.tsx b/code/renderers/react/src/preview.tsx
index c46316fa0392..5cd8d211cbbe 100644
--- a/code/renderers/react/src/preview.tsx
+++ b/code/renderers/react/src/preview.tsx
@@ -40,6 +40,8 @@ export function __definePreview<Addons extends PreviewAddon<never>[]>(
     const defineStory = meta.story.bind(meta);
     meta.story = (__input: any) => {
       const story = defineStory(__input);
+      // TODO: Are we sure we want this? the Component construct was for
+      // compatibility with raw portable stories. We don't actually use this in vitest.
       story.Component = story.__compose();
       return story;
     };

From 8acca712f9ab870ab8fbfbb24c257a69f878e36b Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 12:09:01 +0200
Subject: [PATCH 042/130] fix

---
 .../src/preview-api/modules/store/csf/processCSFFile.ts     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index 62fcb0a7ed36..c5dd211bdbc5 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -67,9 +67,11 @@ export function processCSFFile<TRenderer extends Renderer>(
         if (storyMeta.__tests) {
           Object.entries(storyMeta.__tests).forEach(([testName, test]) => {
             const testId = toTestId(storyMeta.id, testName);
-            // @ts-expect-error We provide the __id parameter because we don't want normalizeStory to calculate the id
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
             test.input.parameters.__id = testId;
-            // @ts-expect-error Check type error later
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore Check type error later
             csfFile.stories[testId] = normalizeStory(testName, test.input, meta);
           });
         }

From 67643a8788d221e3d9ef2962298798b848fb8ec8 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 12:19:55 +0200
Subject: [PATCH 043/130] fix

---
 code/core/src/csf/csf-factories.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index ba5b6a617d04..183857a4ba45 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -181,7 +181,7 @@ function defineStory<
     _tag: 'Story',
     input,
     meta,
-    // @ts-expect-error this is a privat property used only once in renderers/react/src/preview
+    // @ts-expect-error this is a private property used only once in renderers/react/src/preview
     __compose: compose,
     get composed() {
       const composed = compose();
@@ -209,6 +209,8 @@ function defineStory<
       // A test is a clone of the story + the test function
       const testStory = this.extend({ ...annotations, tags: ['test-fn'] });
       testStory.input.__testFunction = testFunction;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore TODO: Kasper to figure out later
       this.input.__tests![name] = testStory;
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {

From d7dc33d7b2a7c4357bc1cd675bebcec4aa9f98db Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 12:27:20 +0200
Subject: [PATCH 044/130] fix

---
 code/renderers/react/src/preview.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/code/renderers/react/src/preview.tsx b/code/renderers/react/src/preview.tsx
index 5cd8d211cbbe..394dd907797d 100644
--- a/code/renderers/react/src/preview.tsx
+++ b/code/renderers/react/src/preview.tsx
@@ -42,6 +42,8 @@ export function __definePreview<Addons extends PreviewAddon<never>[]>(
       const story = defineStory(__input);
       // TODO: Are we sure we want this? the Component construct was for
       // compatibility with raw portable stories. We don't actually use this in vitest.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore this is a private property used only here
       story.Component = story.__compose();
       return story;
     };

From 991b3b542ecbd6bbb10b1b2087fa1f3a159d61ed Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 14:00:36 +0200
Subject: [PATCH 045/130] fixes

---
 code/core/src/component-testing/components/test-fn.stories.tsx | 2 +-
 code/core/src/csf/csf-factories.test.ts                        | 3 +++
 code/core/src/manager/components/sidebar/TreeNode.stories.tsx  | 1 +
 code/core/src/manager/components/sidebar/TreeNode.tsx          | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 1bc36738c0a6..e00d9034199d 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -31,7 +31,7 @@ Default.test('simple', async ({ canvas, userEvent, args }) => {
 const doTest: TestFunction = async ({ canvas, userEvent, args }) => {
   const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
-  // TODO: fix type error later
+  // @ts-expect-error TODO: Fix later with Kasper
   await expect(args.onClick).toHaveBeenCalled();
 };
 Default.test('referring to function in file', doTest);
diff --git a/code/core/src/csf/csf-factories.test.ts b/code/core/src/csf/csf-factories.test.ts
index 33d2d8aece79..5b118704ebfe 100644
--- a/code/core/src/csf/csf-factories.test.ts
+++ b/code/core/src/csf/csf-factories.test.ts
@@ -52,6 +52,8 @@ describe('test function', () => {
 
     // register test
     MyStory.test(testName, testFn);
+
+    // @ts-expect-error this is a private property not present in the types
     const storyTest = MyStory.input.__tests![testName];
     expect(storyTest.input.args).toEqual({ label: 'foo' });
 
@@ -66,6 +68,7 @@ describe('test function', () => {
 
     // register test
     MyStory.test(testName, { args: { label: 'bar' } }, testFn);
+    // @ts-expect-error this is a private property not present in the types
     const storyTest = MyStory.input.__tests![testName];
     expect(storyTest.input.args).toEqual({ label: 'bar' });
 
diff --git a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
index d35daf9060f6..448a55a7ba48 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
@@ -25,6 +25,7 @@ export const Types = () => (
     <ComponentNode>Component</ComponentNode>
     <GroupNode>Group</GroupNode>
     <StoryNode>Story</StoryNode>
+    <StoryNode type="test">Story test</StoryNode>
     <DocumentNode docsMode={false}>Document</DocumentNode>
   </>
 );
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 9694c86b3b4d..8b358b73b0a9 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -158,7 +158,7 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool
 );
 
 // TODO: hack stuff, should be done in a new component
-export const StoryNode: FC<ComponentProps<typeof LeafNode> & { type: 'story' | 'test' }> =
+export const StoryNode: FC<ComponentProps<typeof LeafNode> & { type?: 'story' | 'test' }> =
   React.memo(function StoryNode({ theme, children, type = 'story', ...props }) {
     return (
       <LeafNode tabIndex={-1} type={type} {...props}>

From beb32bf9f67244a21ca7986b3509df77651a960d Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 20 Aug 2025 14:22:15 +0200
Subject: [PATCH 046/130] fix

---
 code/renderers/react/template/stories/preview.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/renderers/react/template/stories/preview.ts b/code/renderers/react/template/stories/preview.ts
index d5ef47ac5113..e1040247a781 100644
--- a/code/renderers/react/template/stories/preview.ts
+++ b/code/renderers/react/template/stories/preview.ts
@@ -1,4 +1,5 @@
 import { __definePreview } from '@storybook/react';
 
 // This file is used for CSF4 stories
+// @ts-expect-error TODO: Fix later with Kasper
 export default __definePreview({});

From 4e90611b11bc35e2be9d529ecf37f30e0cb91bb3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 20 Aug 2025 14:54:39 +0200
Subject: [PATCH 047/130] Fix types

---
 code/renderers/react/template/stories/preview.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/renderers/react/template/stories/preview.ts b/code/renderers/react/template/stories/preview.ts
index e1040247a781..666e7dcbb48b 100644
--- a/code/renderers/react/template/stories/preview.ts
+++ b/code/renderers/react/template/stories/preview.ts
@@ -1,5 +1,4 @@
 import { __definePreview } from '@storybook/react';
 
 // This file is used for CSF4 stories
-// @ts-expect-error TODO: Fix later with Kasper
-export default __definePreview({});
+export default __definePreview({ addons: [] });

From 9719ea6e4a77b0d3c709c1adf3d618676941be87 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 20 Aug 2025 18:56:29 +0200
Subject: [PATCH 048/130] Refactor test prototype

---
 .../vitest/src/vitest-plugin/test-utils.ts    |  9 +++--
 code/core/src/csf/csf-factories.ts            | 33 ++++++++++---------
 .../modules/preview-web/render/StoryRender.ts |  6 ++--
 .../modules/store/csf/normalizeStory.ts       | 12 +++----
 .../modules/store/csf/portable-stories.ts     | 10 +++---
 .../modules/store/csf/prepareStory.ts         |  3 +-
 .../modules/store/csf/processCSFFile.ts       | 32 +++++++++++-------
 code/core/src/types/modules/composedStory.ts  |  2 +-
 code/core/src/types/modules/story.ts          | 11 ++++---
 9 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index ffaed2cb47c9..8922a87aa8ea 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -1,6 +1,6 @@
 import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
-import { sanitize } from 'storybook/internal/csf';
+import { type Story, isStory, sanitize } from 'storybook/internal/csf';
 import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
 
 import { server } from '@vitest/browser/context';
@@ -33,7 +33,7 @@ export const convertToFilePath = (url: string): string => {
 
 export const testStory = (
   exportName: string,
-  story: ComposedStoryFn,
+  story: ComposedStoryFn | Story<any>,
   meta: ComponentAnnotations,
   skipTags: string[],
   testName?: string
@@ -67,7 +67,10 @@ export const testStory = (
 
     await setViewport(composedStory.parameters, composedStory.globals);
 
-    await composedStory.run(undefined, testName);
+    if (isStory(story) && testName) {
+      await composedStory.run(undefined, story.getAllTests()[testName].test);
+    }
+    await composedStory.run(undefined);
 
     _task.meta.reports = composedStory.reporting.reports;
   };
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 183857a4ba45..39b49fd8e406 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -154,6 +154,7 @@ export interface Story<
     annotations: StoryAnnotations<TRenderer, TRenderer['args']>,
     fn: TestFunction<TRenderer>
   ): void;
+  getAllTests(): Record<string, { story: Story<TRenderer>; test: TestFunction<TRenderer> }>;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
@@ -165,7 +166,6 @@ function defineStory<
   TInput extends StoryAnnotations<TRenderer, TRenderer['args']>,
 >(input: TInput, meta: Meta<TRenderer>): Story<TRenderer, TInput> {
   let composed: ComposedStoryFn<TRenderer>;
-  input.__tests ??= {};
   const compose = () => {
     if (!composed) {
       composed = composeStory(
@@ -177,6 +177,9 @@ function defineStory<
     }
     return composed;
   };
+
+  const tests: Record<string, { story: Story<TRenderer>; test: TestFunction<TRenderer> }> = {};
+
   return {
     _tag: 'Story',
     input,
@@ -191,27 +194,22 @@ function defineStory<
     get play() {
       return input.play ?? meta.input?.play ?? (async () => {});
     },
-    get run() {
-      return compose().run ?? (async () => {});
+    async run(context, testName?: string) {
+      const composedRun = compose().run;
+      await composedRun(context, tests[testName!]?.test);
     },
     test(
       name: string,
       overridesOrTestFn: StoryAnnotations<TRenderer, TRenderer['args']> | TestFunction<TRenderer>,
       testFn?: TestFunction<TRenderer>
     ): void {
-      const hasOverrides = typeof overridesOrTestFn !== 'function';
-      const annotations = (hasOverrides ? overridesOrTestFn : {}) as StoryAnnotations<
-        TRenderer,
-        TRenderer['args']
-      >;
-      const testFunction = (hasOverrides ? testFn : overridesOrTestFn) as TestFunction<TRenderer>;
-
-      // A test is a clone of the story + the test function
-      const testStory = this.extend({ ...annotations, tags: ['test-fn'] });
-      testStory.input.__testFunction = testFunction;
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore TODO: Kasper to figure out later
-      this.input.__tests![name] = testStory;
+      const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
+      const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;
+
+      tests[name] = {
+        story: this.extend({ ...annotations, tags: [...(annotations.tags ?? []), 'test-fn'] }),
+        test: testFunction,
+      };
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {
       return defineStory(
@@ -243,5 +241,8 @@ function defineStory<
         this.meta
       );
     },
+    getAllTests() {
+      return tests;
+    },
   };
 }
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index a0feaf85eb6d..33b52538294c 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -209,7 +209,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       unboundStoryFn,
       playFunction,
       runStep,
-      __testFunction,
+      testFunction,
     } = story;
 
     if (forceRemount && !initial) {
@@ -382,9 +382,9 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         }
       }
 
-      if (__testFunction) {
+      if (testFunction) {
         await this.runPhase(abortSignal, 'testing', async () => {
-          await __testFunction(context);
+          await testFunction(context);
         });
 
         await this.runPhase(abortSignal, 'tested');
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index b3cd6a53ed37..91420cf47fbb 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -6,7 +6,6 @@ import type {
   NormalizedComponentAnnotations,
   NormalizedStoryAnnotations,
   Renderer,
-  StoryAnnotations,
   StoryAnnotationsOrFn,
   StoryId,
 } from 'storybook/internal/types';
@@ -25,10 +24,10 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
 
 export function normalizeStory<TRenderer extends Renderer>(
   key: StoryId,
-  storyAnnotations: StoryAnnotationsOrFn<TRenderer>,
+  storyAnnotations: StoryAnnotationsOrFn<TRenderer> & { testFunction?: any },
   meta: NormalizedComponentAnnotations<TRenderer>
 ): NormalizedStoryAnnotations<TRenderer> {
-  const storyObject: StoryAnnotations<TRenderer> = storyAnnotations;
+  const storyObject = storyAnnotations;
   const userStoryFn: ArgsStoryFn<TRenderer> | null =
     typeof storyAnnotations === 'function' ? storyAnnotations : null;
 
@@ -62,9 +61,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.afterEach),
     ...normalizeArrays(story?.afterEach),
   ];
-  const __tests = storyAnnotations.__tests;
-  const __testFunction = storyAnnotations.__testFunction;
-  const { render, play, tags = [], globals = {} } = storyObject;
+  const { render, play, tags = [], globals = {}, testFunction } = storyObject;
 
   const id = parameters.__id || toId(meta.id, exportName);
   return {
@@ -80,9 +77,8 @@ export function normalizeStory<TRenderer extends Renderer>(
     beforeEach,
     afterEach,
     globals,
+    testFunction,
     ...(render && { render }),
-    ...(__tests && { __tests }),
-    ...(__testFunction && { __testFunction }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
   };
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index ab5d37f541b0..bb456486406c 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -216,11 +216,11 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   const run = (
     extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
-    testName?: string
+    test?: (context: StoryContext<TRenderer>) => void | Promise<void>
   ) => {
     const context = initializeContext();
     Object.assign(context, extraContext);
-    return runStory(story, context, testName);
+    return runStory(story, context, test);
   };
 
   const playFunction = story.playFunction ? play : undefined;
@@ -380,7 +380,7 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
 async function runStory<TRenderer extends Renderer>(
   story: PreparedStory<TRenderer>,
   context: StoryContext<TRenderer>,
-  testName?: string
+  testFunction?: (context: StoryContext<TRenderer>) => void | Promise<void>
 ) {
   for (const callback of [...cleanups].reverse()) {
     await callback();
@@ -427,9 +427,7 @@ async function runStory<TRenderer extends Renderer>(
     await playFunction(context);
   }
 
-  if (testName) {
-    await story.__tests?.[testName].__testFunction?.(context);
-  }
+  await testFunction?.(context);
 
   let cleanUp: CleanupCallback | undefined;
   if (isTestEnvironment()) {
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index df6f9425dd45..0864f97d76f6 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -165,8 +165,7 @@ export function prepareStory<TRenderer extends Renderer>(
     testingLibraryRender,
     renderToCanvas: projectAnnotations.renderToCanvas,
     usesMount,
-    __tests: storyAnnotations.__tests,
-    __testFunction: storyAnnotations.__testFunction,
+    testFunction: storyAnnotations.__testFunction,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(
diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index c5dd211bdbc5..78b66933760c 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -1,4 +1,5 @@
 import { logger } from 'storybook/internal/client-logger';
+import type { Story } from 'storybook/internal/csf';
 import { isExportStory, isStory, toTestId } from 'storybook/internal/csf';
 import type { ComponentTitle, Parameters, Path, Renderer } from 'storybook/internal/types';
 import type {
@@ -58,23 +59,30 @@ export function processCSFFile<TRenderer extends Renderer>(
 
     Object.keys(namedExports).forEach((key) => {
       if (isExportStory(key, meta)) {
-        const storyMeta = normalizeStory(key, namedExports[key].input, meta);
+        const story: Story<TRenderer> = namedExports[key];
+
+        const storyMeta = normalizeStory(key, story.input as any, meta);
         checkDisallowedParameters(storyMeta.parameters);
 
         csfFile.stories[storyMeta.id] = storyMeta;
 
         // if the story has tests, we need to add those to the csfFile
-        if (storyMeta.__tests) {
-          Object.entries(storyMeta.__tests).forEach(([testName, test]) => {
-            const testId = toTestId(storyMeta.id, testName);
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
-            test.input.parameters.__id = testId;
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore Check type error later
-            csfFile.stories[testId] = normalizeStory(testName, test.input, meta);
-          });
-        }
+
+        Object.entries(story.getAllTests()).forEach(([testName, test]) => {
+          const testId = toTestId(storyMeta.id, testName);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
+          test.input.parameters.__id = testId;
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore Check type error later
+          csfFile.stories[testId] = {
+            ...normalizeStory<TRenderer>(
+              testName,
+              { ...(test.story.input as any), testFunction: test.test },
+              meta
+            ),
+          };
+        });
       }
     });
 
diff --git a/code/core/src/types/modules/composedStory.ts b/code/core/src/types/modules/composedStory.ts
index 50bb5dfb1ddc..9000155f8886 100644
--- a/code/core/src/types/modules/composedStory.ts
+++ b/code/core/src/types/modules/composedStory.ts
@@ -46,7 +46,7 @@ export type ComposedStoryFn<
   play?: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
   run: (
     context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
-    testName?: string
+    test?: (context: StoryContext<TRenderer>) => void | Promise<void>
   ) => Promise<void>;
   load: () => Promise<void>;
   storyName: string;
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index 504dee9b343b..93ffc215e669 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -90,11 +90,15 @@ export type NormalizedStoryAnnotations<TRenderer extends Renderer = Renderer> =
   userStoryFn?: ArgsStoryFn<TRenderer>;
   decorators?: DecoratorFunction<TRenderer>[];
   loaders?: LoaderFunction<TRenderer>[];
+  testFunction?: TestFunction<TRenderer, TRenderer['args']>;
 };
 
 export type CSFFile<TRenderer extends Renderer = Renderer> = {
   meta: NormalizedComponentAnnotations<TRenderer>;
-  stories: Record<StoryId, NormalizedStoryAnnotations<TRenderer>>;
+  stories: Record<
+    StoryId,
+    NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer> }
+  >;
   projectAnnotations?: NormalizedProjectAnnotations<TRenderer>;
   moduleExports: ModuleExports;
 };
@@ -115,10 +119,7 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
     storyGlobals: Globals;
-    __testFunction?: TestFunction<TRenderer, TRenderer['args']>;
-    /** @private */
-    // TODO: fix the type issue later
-    __tests?: Record<string, StoryAnnotations<any>>;
+    testFunction?: TestFunction<TRenderer, TRenderer['args']>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

From 82b84e4ed6e67534145f761f221654c637147bde Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 20 Aug 2025 19:06:07 +0200
Subject: [PATCH 049/130] Improve a bit

---
 code/addons/vitest/src/vitest-plugin/test-utils.ts        | 8 ++++----
 .../preview-api/modules/store/csf/csf-factory-utils.ts    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 8922a87aa8ea..4e36fc3509ba 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -1,7 +1,7 @@
 import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
-import { type Story, isStory, sanitize } from 'storybook/internal/csf';
-import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
+import { type Meta, type Story, isStory, sanitize } 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';
@@ -33,8 +33,8 @@ export const convertToFilePath = (url: string): string => {
 
 export const testStory = (
   exportName: string,
-  story: ComposedStoryFn | Story<any>,
-  meta: ComponentAnnotations,
+  story: ComposedStoryFn | Story<Renderer>,
+  meta: ComponentAnnotations | Meta<Renderer>,
   skipTags: string[],
   testName?: string
 ) => {
diff --git a/code/core/src/preview-api/modules/store/csf/csf-factory-utils.ts b/code/core/src/preview-api/modules/store/csf/csf-factory-utils.ts
index b882b5cd1c2d..a8bef9711c67 100644
--- a/code/core/src/preview-api/modules/store/csf/csf-factory-utils.ts
+++ b/code/core/src/preview-api/modules/store/csf/csf-factory-utils.ts
@@ -1,4 +1,4 @@
-import { isStory } from 'storybook/internal/csf';
+import { type Meta, type Story, isMeta, isStory } from 'storybook/internal/csf';
 import type {
   Args,
   ComponentAnnotations,
@@ -11,8 +11,8 @@ export function getCsfFactoryAnnotations<
   TRenderer extends Renderer = Renderer,
   TArgs extends Args = Args,
 >(
-  story: LegacyStoryAnnotationsOrFn<TRenderer>,
-  meta?: ComponentAnnotations<TRenderer, TArgs>,
+  story: LegacyStoryAnnotationsOrFn<TRenderer> | Story<Renderer>,
+  meta?: ComponentAnnotations<TRenderer, TArgs> | Meta<Renderer>,
   projectAnnotations?: ProjectAnnotations<TRenderer>
 ) {
   return isStory(story)
@@ -21,5 +21,5 @@ export function getCsfFactoryAnnotations<
         meta: story.meta.input,
         preview: story.meta.preview.composed,
       }
-    : { story, meta, preview: projectAnnotations };
+    : { story, meta: isMeta(meta) ? meta.input : meta, preview: projectAnnotations };
 }

From eca1acef3a70c6de69424902985848b0e8ca6295 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 11:45:17 +0200
Subject: [PATCH 050/130] fix unit tests

---
 code/core/src/csf/csf-factories.test.ts       | 20 ++++++------
 .../modules/store/csf/processCSFFile.ts       | 31 ++++++++++---------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/code/core/src/csf/csf-factories.test.ts b/code/core/src/csf/csf-factories.test.ts
index 5b118704ebfe..f6ee8446e4f7 100644
--- a/code/core/src/csf/csf-factories.test.ts
+++ b/code/core/src/csf/csf-factories.test.ts
@@ -1,3 +1,4 @@
+//* @vitest-environment happy-dom */
 import { describe, expect, test, vi } from 'vitest';
 
 import { definePreview, definePreviewAddon } from './csf-factories';
@@ -14,7 +15,7 @@ interface Addon2Types {
 
 const addon2 = definePreviewAddon<Addon2Types>({});
 
-const preview = definePreview({ addons: [addon, addon2] });
+const preview = definePreview({ addons: [addon, addon2], renderToCanvas: () => {} });
 
 const meta = preview.meta({
   render: () => 'hello',
@@ -47,18 +48,16 @@ test('addon parameters are inferred', () => {
 describe('test function', () => {
   test('without overrides', async () => {
     const MyStory = meta.story({ args: { label: 'foo' } });
-    const testFn = vi.fn();
+    const testFn = vi.fn(() => console.log('testFn'));
     const testName = 'should run test';
 
     // register test
     MyStory.test(testName, testFn);
-
-    // @ts-expect-error this is a private property not present in the types
-    const storyTest = MyStory.input.__tests![testName];
-    expect(storyTest.input.args).toEqual({ label: 'foo' });
+    const { story: storyTestAnnotations } = MyStory.getAllTests()[testName];
+    expect(storyTestAnnotations.input.args).toEqual({ label: 'foo' });
 
     // execute test
-    await storyTest.input.__testFunction?.();
+    await MyStory.run(undefined, testName);
     expect(testFn).toHaveBeenCalled();
   });
   test('with overrides', async () => {
@@ -68,12 +67,11 @@ describe('test function', () => {
 
     // register test
     MyStory.test(testName, { args: { label: 'bar' } }, testFn);
-    // @ts-expect-error this is a private property not present in the types
-    const storyTest = MyStory.input.__tests![testName];
-    expect(storyTest.input.args).toEqual({ label: 'bar' });
+    const { story: storyTestAnnotations } = MyStory.getAllTests()[testName];
+    expect(storyTestAnnotations.input.args).toEqual({ label: 'bar' });
 
     // execute test
-    await storyTest.input.__testFunction?.();
+    await MyStory.run(undefined, testName);
     expect(testFn).toHaveBeenCalled();
   });
 });
diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index 78b66933760c..591c123f4070 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -68,21 +68,22 @@ export function processCSFFile<TRenderer extends Renderer>(
 
         // if the story has tests, we need to add those to the csfFile
 
-        Object.entries(story.getAllTests()).forEach(([testName, test]) => {
-          const testId = toTestId(storyMeta.id, testName);
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
-          test.input.parameters.__id = testId;
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore Check type error later
-          csfFile.stories[testId] = {
-            ...normalizeStory<TRenderer>(
-              testName,
-              { ...(test.story.input as any), testFunction: test.test },
-              meta
-            ),
-          };
-        });
+        Object.entries(story.getAllTests()).forEach(
+          ([testName, { story: storyTest, test: testFunction }]) => {
+            const testId = toTestId(storyMeta.id, testName);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
+            storyTest.input.parameters.__id = testId;
+
+            csfFile.stories[testId] = {
+              ...normalizeStory<TRenderer>(
+                testName,
+                { ...(storyTest.input as any), testFunction },
+                meta
+              ),
+            };
+          }
+        );
       }
     });
 

From ee34e40c47e028fb2e38edf1a62ad62d19e76b95 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 11:50:26 +0200
Subject: [PATCH 051/130] fix chromatic failures

---
 code/.storybook/preview.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index f51321310e7a..861f1e0c609c 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -215,7 +215,7 @@ const decorators = [
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher
    * in the toolbar
    */
-  (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
+  (StoryFn, { globals, playFunction, testFunction, args, storyGlobals, parameters }) => {
     let theme = globals.sb_theme;
     let showPlayFnNotice = false;
 
@@ -223,10 +223,13 @@ const decorators = [
     // but this is acceptable, I guess
     // we need to ensure only a single rendering in chromatic
     // a more 'correct' approach would be to set a specific theme global on every story that has a playFunction
-    if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
+    if (
+      (testFunction || (playFunction && args.autoplay !== false)) &&
+      !(theme === 'light' || theme === 'dark')
+    ) {
       theme = 'light';
       showPlayFnNotice = true;
-    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction && !testFunction) {
       theme = 'stacked';
     }
 
@@ -281,8 +284,8 @@ const decorators = [
               <>
                 <PlayFnNotice>
                   <span>
-                    Detected play function in Chromatic. Rendering only light theme to avoid
-                    multiple play functions in the same story.
+                    Detected play/test function in Chromatic. Rendering only light theme to avoid
+                    multiple play/test functions in the same story.
                   </span>
                 </PlayFnNotice>
                 <div style={{ marginBottom: 20 }} />

From 6ab99d4e3fac11bfa8270b4f478dbb9d181a631e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 21 Aug 2025 11:52:18 +0200
Subject: [PATCH 052/130] Fix override in portable stories

---
 code/addons/vitest/src/vitest-plugin/test-utils.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 4e36fc3509ba..8690163d5e63 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -40,8 +40,12 @@ export const testStory = (
 ) => {
   return async (context: TestContext & { story: ComposedStoryFn }) => {
     const annotations = getCsfFactoryAnnotations(story, meta);
+
+    const storyAnnotations =
+      isStory(story) && testName ? story.getAllTests()[testName].story.input : annotations.story;
+
     const composedStory = composeStory(
-      annotations.story,
+      storyAnnotations,
       annotations.meta!,
       { initialGlobals: (await getInitialGlobals?.()) ?? {} },
       annotations.preview ?? globalThis.globalProjectAnnotations,

From 7def7d999c329e2087d2fed1927b35c188c92b12 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 12:14:03 +0200
Subject: [PATCH 053/130] add fixes for portable stories and prepareStory

---
 .../vitest/src/vitest-plugin/test-utils.ts    |  8 ++++----
 .../components/test-fn.stories.tsx            | 20 +++++++++++++++++--
 code/core/src/csf/story.ts                    |  5 -----
 .../modules/store/csf/prepareStory.ts         |  2 +-
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 8690163d5e63..27a417f33abf 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -1,6 +1,6 @@
 import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
-import { type Meta, type Story, isStory, sanitize } from 'storybook/internal/csf';
+import { type Meta, type Story, isStory, toTestId } from 'storybook/internal/csf';
 import type { ComponentAnnotations, ComposedStoryFn, Renderer } from 'storybook/internal/types';
 
 import { server } from '@vitest/browser/context';
@@ -63,8 +63,7 @@ export const testStory = (
     };
 
     if (testName) {
-      // TODO: this should be reworked
-      _task.meta.storyId = `${composedStory.id}-${sanitize(testName)}`;
+      _task.meta.storyId = toTestId(composedStory.id, testName);
     } else {
       _task.meta.storyId = composedStory.id;
     }
@@ -73,8 +72,9 @@ export const testStory = (
 
     if (isStory(story) && testName) {
       await composedStory.run(undefined, story.getAllTests()[testName].test);
+    } else {
+      await composedStory.run(undefined);
     }
-    await composedStory.run(undefined);
 
     _task.meta.reports = composedStory.reporting.reports;
   };
diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index e00d9034199d..e60c91425dc6 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -40,12 +40,28 @@ Default.test(
   'with overrides',
   {
     args: {
-      children: 'Arg from test',
+      children: 'Arg from test override',
     },
+    parameters: {
+      viewport: {
+        options: {
+          sized: {
+            name: 'Sized',
+            styles: {
+              width: '380px',
+              height: '500px',
+            },
+          },
+        },
+      },
+      chromatic: { viewports: [380] },
+    },
+    globals: { sb_theme: 'dark', viewport: { value: 'sized' } },
   },
   async ({ canvas }) => {
-    const button = canvas.getByText('Arg from test');
+    const button = canvas.getByText('Arg from test override');
     await expect(button).toBeInTheDocument();
+    expect(document.body.clientWidth).toBe(380);
   }
 );
 Default.test(
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index 70b694652db7..094da151d8fd 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -538,11 +538,6 @@ export type StoryAnnotations<
 
   /** @deprecated */
   story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
-
-  /** @private */
-  // TODO: fix the type issue later
-  __tests?: Record<string, Story<any>>;
-  __testFunction?: TestFunction<TRenderer, TRenderer['args']>;
 } & ({} extends TRequiredArgs ? { args?: TRequiredArgs } : { args: TRequiredArgs });
 
 export type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 0864f97d76f6..bd3b3984336d 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -165,7 +165,7 @@ export function prepareStory<TRenderer extends Renderer>(
     testingLibraryRender,
     renderToCanvas: projectAnnotations.renderToCanvas,
     usesMount,
-    testFunction: storyAnnotations.__testFunction,
+    testFunction: storyAnnotations.testFunction,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(

From 3ab5db39228e777a85192b2f87218e4d56257dd3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 21 Aug 2025 13:24:55 +0200
Subject: [PATCH 054/130] Improved doTest type

---
 .../src/component-testing/components/test-fn.stories.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index e60c91425dc6..272c7b423458 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { TestFunction } from 'storybook/internal/types';
+import type { StoryContext } from '@storybook/react-vite';
 
 import { expect, fn } from 'storybook/test';
 
@@ -28,10 +28,13 @@ Default.test('simple', async ({ canvas, userEvent, args }) => {
   await expect(args.onClick).toHaveBeenCalled();
 });
 
-const doTest: TestFunction = async ({ canvas, userEvent, args }) => {
+const doTest = async ({
+  canvas,
+  userEvent,
+  args,
+}: StoryContext<React.ComponentProps<'button'>>) => {
   const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
-  // @ts-expect-error TODO: Fix later with Kasper
   await expect(args.onClick).toHaveBeenCalled();
 };
 Default.test('referring to function in file', doTest);

From 8e74582614b9406b968bb5b1d555d6b73004172f Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 21 Aug 2025 13:55:18 +0200
Subject: [PATCH 055/130] Improve test execution in StoryRender

---
 .../modules/preview-web/render/StoryRender.ts | 68 ++++++++++---------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 33b52538294c..1854895b9bbb 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -113,8 +113,8 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     });
     if (phaseFn) {
       await phaseFn();
-      this.checkIfAborted(signal);
     }
+    this.checkIfAborted(signal);
   }
 
   private checkIfAborted(signal: AbortSignal): boolean {
@@ -329,30 +329,46 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       };
 
       // The phase should be 'rendering' but it might be set to 'aborted' by another render cycle
-      if (this.renderOptions.autoplay && forceRemount && playFunction && this.phase !== 'errored') {
+      const shouldHandleUnhandledErrors = !ignoreUnhandledErrors && unhandledErrors.size > 0;
+      if (
+        this.renderOptions.autoplay &&
+        forceRemount &&
+        (playFunction || testFunction) &&
+        this.phase !== 'errored'
+      ) {
         window?.addEventListener?.('error', onError);
         window?.addEventListener?.('unhandledrejection', onUnhandledRejection);
         this.disableKeyListeners = true;
         try {
-          if (!isMountDestructured) {
-            context.mount = async () => {
-              throw new MountMustBeDestructuredError({ playFunction: playFunction.toString() });
-            };
-            await this.runPhase(abortSignal, 'playing', async () => playFunction(context));
-          } else {
-            // when mount is used the playing phase will start later, right after mount is called in the play function
-            await playFunction(context);
+          if (playFunction) {
+            if (!isMountDestructured) {
+              context.mount = async () => {
+                throw new MountMustBeDestructuredError({ playFunction: playFunction.toString() });
+              };
+              await this.runPhase(abortSignal, 'playing', async () => playFunction(context));
+            } else {
+              // when mount is used the playing phase will start later, right after mount is called in the play function
+              await playFunction(context);
+            }
+
+            if (!mounted) {
+              throw new NoStoryMountedError();
+            }
+
+            if (shouldHandleUnhandledErrors) {
+              await this.runPhase(abortSignal, 'errored');
+              return;
+            }
+            await this.runPhase(abortSignal, 'played');
           }
 
-          if (!mounted) {
-            throw new NoStoryMountedError();
-          }
-          this.checkIfAborted(abortSignal);
-
-          if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
-            await this.runPhase(abortSignal, 'errored');
-          } else {
-            await this.runPhase(abortSignal, 'played');
+          if (testFunction) {
+            await this.runPhase(abortSignal, 'testing', async () => testFunction(context));
+            if (shouldHandleUnhandledErrors) {
+              await this.runPhase(abortSignal, 'errored');
+              return;
+            }
+            await this.runPhase(abortSignal, 'tested');
           }
         } catch (error) {
           // Remove the loading screen, even if there was an error before rendering
@@ -367,7 +383,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
           }
           console.error(error);
         }
-        if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
+        if (shouldHandleUnhandledErrors) {
           this.channel.emit(
             UNHANDLED_ERRORS_WHILE_PLAYING,
             Array.from(unhandledErrors).map(serializeError)
@@ -382,14 +398,6 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         }
       }
 
-      if (testFunction) {
-        await this.runPhase(abortSignal, 'testing', async () => {
-          await testFunction(context);
-        });
-
-        await this.runPhase(abortSignal, 'tested');
-      }
-
       await this.runPhase(abortSignal, 'completing', async () => {
         if (isTestEnvironment()) {
           this.store.addCleanupCallbacks(story, pauseAnimations());
@@ -408,13 +416,11 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         });
       }
 
-      const hasUnhandledErrors = !ignoreUnhandledErrors && unhandledErrors.size > 0;
-
       const hasSomeReportsFailed = context.reporting.reports.some(
         (report) => report.status === 'failed'
       );
 
-      const hasStoryErrored = hasUnhandledErrors || hasSomeReportsFailed;
+      const hasStoryErrored = shouldHandleUnhandledErrors || hasSomeReportsFailed;
 
       await this.runPhase(abortSignal, 'finished', async () =>
         this.channel.emit(STORY_FINISHED, {

From ad68ec34064b430a8f6e85923fa15f8289999e90 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 14:33:47 +0200
Subject: [PATCH 056/130] Next.js: Fix version mismatch error in Webpack

---
 code/frameworks/nextjs/src/utils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts
index 3c0f0fde602e..009cc4e7740e 100644
--- a/code/frameworks/nextjs/src/utils.ts
+++ b/code/frameworks/nextjs/src/utils.ts
@@ -2,15 +2,16 @@ import { dirname, sep } from 'node:path';
 
 import { getProjectRoot } from 'storybook/internal/common';
 
+import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
+
 import type { NextConfig } from 'next';
 import { PHASE_DEVELOPMENT_SERVER } from 'next/constants';
 import loadConfig from 'next/dist/server/config';
-import { DefinePlugin } from 'webpack';
 import type { Configuration as WebpackConfig } from 'webpack';
 
 export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => {
   baseConfig.plugins?.push(
-    new DefinePlugin({
+    new WebpackDefinePlugin({
       'process.env.__NEXT_VERSION': JSON.stringify(getNextjsVersion()),
     })
   );

From 91f0fc41cb9b66874bdf0e954b7acaa67815b8a1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 14:38:02 +0200
Subject: [PATCH 057/130] bring back all tests

---
 code/.storybook/main.ts  | 156 +++++++++++++++++++--------------------
 code/vitest.workspace.ts |  14 ++--
 2 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index 8142562c043c..18d85318aef8 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -16,89 +16,89 @@ const imageContextPath = join(currentDirPath, '../frameworks/nextjs/src/image-co
 
 const config = defineMain({
   stories: [
-    // './*.stories.@(js|jsx|ts|tsx)',
-    // {
-    //   directory: '../core/template/stories',
-    //   titlePrefix: 'core',
-    // },
-    // {
-    //   directory: '../core/src/manager',
-    //   titlePrefix: 'manager',
-    // },
-    // {
-    //   directory: '../core/src/preview-api',
-    //   titlePrefix: 'preview',
-    // },
-    // {
-    //   directory: '../core/src/preview',
-    //   titlePrefix: 'preview',
-    // },
-    // {
-    //   directory: '../core/src/components/brand',
-    //   titlePrefix: 'brand',
-    // },
-    // {
-    //   directory: '../core/src/components/components',
-    //   titlePrefix: 'components',
-    // },
+    './*.stories.@(js|jsx|ts|tsx)',
+    {
+      directory: '../core/template/stories',
+      titlePrefix: 'core',
+    },
+    {
+      directory: '../core/src/manager',
+      titlePrefix: 'manager',
+    },
+    {
+      directory: '../core/src/preview-api',
+      titlePrefix: 'preview',
+    },
+    {
+      directory: '../core/src/preview',
+      titlePrefix: 'preview',
+    },
+    {
+      directory: '../core/src/components/brand',
+      titlePrefix: 'brand',
+    },
+    {
+      directory: '../core/src/components/components',
+      titlePrefix: 'components',
+    },
     {
       directory: '../core/src/component-testing/components',
       titlePrefix: 'component-testing',
       files: 'test-fn.stories.tsx',
     },
-    // {
-    //   directory: '../core/src/controls/components',
-    //   titlePrefix: 'controls',
-    // },
-    // {
-    //   directory: '../core/src/highlight',
-    //   titlePrefix: 'highlight',
-    // },
-    // {
-    //   directory: '../addons/docs/src/blocks',
-    //   titlePrefix: 'addons/docs/blocks',
-    // },
-    // {
-    //   directory: '../addons/a11y/src',
-    //   titlePrefix: 'addons/accessibility',
-    // },
-    // {
-    //   directory: '../addons/a11y/template/stories',
-    //   titlePrefix: 'addons/accessibility',
-    // },
-    // {
-    //   directory: '../addons/docs/template/stories',
-    //   titlePrefix: 'addons/docs',
-    // },
-    // {
-    //   directory: '../addons/links/template/stories',
-    //   titlePrefix: 'addons/links',
-    // },
-    // {
-    //   directory: '../addons/themes/template/stories',
-    //   titlePrefix: 'addons/themes',
-    // },
-    // {
-    //   directory: '../addons/onboarding/src',
-    //   titlePrefix: 'addons/onboarding',
-    // },
-    // {
-    //   directory: '../addons/pseudo-states/src',
-    //   titlePrefix: 'addons/pseudo-states',
-    // },
-    // {
-    //   directory: '../addons/vitest/src/components',
-    //   titlePrefix: 'addons/vitest',
-    // },
-    // {
-    //   directory: '../addons/vitest/template/stories',
-    //   titlePrefix: 'addons/vitest',
-    // },
-    // {
-    //   directory: '../addons/vitest/src',
-    //   titlePrefix: 'addons/vitest',
-    //   files: 'stories.tsx',
-    // },
+    {
+      directory: '../core/src/controls/components',
+      titlePrefix: 'controls',
+    },
+    {
+      directory: '../core/src/highlight',
+      titlePrefix: 'highlight',
+    },
+    {
+      directory: '../addons/docs/src/blocks',
+      titlePrefix: 'addons/docs/blocks',
+    },
+    {
+      directory: '../addons/a11y/src',
+      titlePrefix: 'addons/accessibility',
+    },
+    {
+      directory: '../addons/a11y/template/stories',
+      titlePrefix: 'addons/accessibility',
+    },
+    {
+      directory: '../addons/docs/template/stories',
+      titlePrefix: 'addons/docs',
+    },
+    {
+      directory: '../addons/links/template/stories',
+      titlePrefix: 'addons/links',
+    },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
+    {
+      directory: '../addons/onboarding/src',
+      titlePrefix: 'addons/onboarding',
+    },
+    {
+      directory: '../addons/pseudo-states/src',
+      titlePrefix: 'addons/pseudo-states',
+    },
+    {
+      directory: '../addons/vitest/src/components',
+      titlePrefix: 'addons/vitest',
+    },
+    {
+      directory: '../addons/vitest/template/stories',
+      titlePrefix: 'addons/vitest',
+    },
+    {
+      directory: '../addons/vitest/src',
+      titlePrefix: 'addons/vitest',
+      files: 'stories.tsx',
+    },
   ],
   addons: [
     '@storybook/addon-themes',
diff --git a/code/vitest.workspace.ts b/code/vitest.workspace.ts
index bf96863c6850..210fcedad8f2 100644
--- a/code/vitest.workspace.ts
+++ b/code/vitest.workspace.ts
@@ -4,13 +4,13 @@ import { defineConfig, defineWorkspace } from 'vitest/config';
 
 export default defineWorkspace([
   'vitest-storybook.config.mts',
-  // 'addons/*/vitest.config.ts',
-  // 'frameworks/*/vitest.config.ts',
-  // 'lib/*/vitest.config.ts',
-  // 'core/vitest.config.ts',
-  // 'builders/*/vitest.config.ts',
-  // 'presets/*/vitest.config.ts',
-  // 'renderers/*/vitest.config.ts',
+  'addons/*/vitest.config.ts',
+  'frameworks/*/vitest.config.ts',
+  'lib/*/vitest.config.ts',
+  'core/vitest.config.ts',
+  'builders/*/vitest.config.ts',
+  'presets/*/vitest.config.ts',
+  'renderers/*/vitest.config.ts',
 ]);
 
 /**

From 864ed55177c073385bf4e99f64c663683b2518ef Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 14:57:59 +0200
Subject: [PATCH 058/130] update tests

---
 code/core/src/manager/components/sidebar/Tree.tsx    |  2 +-
 .../modules/preview-web/PreviewWeb.test.ts           | 12 ++++--------
 .../src/preview-api/modules/store/StoryStore.test.ts | 12 ++++--------
 .../modules/store/csf/normalizeStory.test.ts         |  4 ++++
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index dd8b38c2528b..01f3542635f2 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -331,7 +331,7 @@ const Node = React.memo<NodeProps>(function Node({
             }
           }}
           // TODO: hack stuff, should be fixed later
-          {...(item.tags.includes('test-fn') && { type: 'test' })}
+          {...(item.tags?.includes('test-fn') && { type: 'test' })}
           {...(item.type === 'docs' && { docsMode })}
         >
           {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index a56f4c0e6457..3d11097b6618 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -3849,8 +3849,6 @@ describe('PreviewWeb', () => {
       expect(await preview.extract()).toMatchInlineSnapshot(`
         {
           "component-one--a": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "foo": {
                 "name": "foo",
@@ -3919,13 +3917,12 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
           },
           "component-one--b": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "foo": {
                 "name": "foo",
@@ -3994,13 +3991,12 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
           },
           "component-one--e": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {},
             "args": {},
             "component": undefined,
@@ -4047,13 +4043,12 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
           },
           "component-two--c": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "foo": {
                 "name": "foo",
@@ -4110,6 +4105,7 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component Two",
             "usesMount": false,
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index 8bb71ce2145f..6eb405bb68db 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -282,8 +282,6 @@ describe('StoryStore', () => {
       expect(store.extract()).toMatchInlineSnapshot(`
         {
           "component-one--a": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "a": {
                 "name": "a",
@@ -344,6 +342,7 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
@@ -476,8 +475,6 @@ describe('StoryStore', () => {
       expect(store.extract()).toMatchInlineSnapshot(`
         {
           "component-one--a": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "a": {
                 "name": "a",
@@ -538,13 +535,12 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
           },
           "component-one--b": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "a": {
                 "name": "a",
@@ -605,13 +601,12 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
           },
           "component-two--c": {
-            "__testFunction": undefined,
-            "__tests": undefined,
             "argTypes": {
               "a": {
                 "name": "a",
@@ -672,6 +667,7 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
+            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component Two",
             "usesMount": false,
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
index 513685d1a690..06b772ab6b74 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
@@ -64,6 +64,7 @@ describe('normalizeStory', () => {
           "name": "Story Export",
           "parameters": {},
           "tags": [],
+          "testFunction": undefined,
           "userStoryFn": [Function],
         }
       `);
@@ -136,6 +137,7 @@ describe('normalizeStory', () => {
             "name": "Story Export",
             "parameters": {},
             "tags": [],
+            "testFunction": undefined,
           }
         `);
         expect(normalized.moduleExport).toBe(storyObj);
@@ -180,6 +182,7 @@ describe('normalizeStory', () => {
               "storyParam": "val",
             },
             "tags": [],
+            "testFunction": undefined,
           }
         `);
         expect(moduleExport).toBe(storyObj);
@@ -241,6 +244,7 @@ describe('normalizeStory', () => {
               "storyParam2": "legacy",
             },
             "tags": [],
+            "testFunction": undefined,
           }
         `);
         expect(moduleExport).toBe(storyObj);

From d14ea0e941e41871f137e9b0b4cec18f7c7752b0 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 16:56:57 +0200
Subject: [PATCH 059/130] support story tests in single test run

---
 code/addons/vitest/src/node/vitest-manager.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index b2d1d9493436..cd2133d58d06 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -269,8 +269,22 @@ export class VitestManager {
 
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
-      const storyName = stories[0].name;
-      const regex = new RegExp(`^${storyName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`);
+      const selectedStory = stories[0];
+      const storyName = selectedStory.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      // Use case 1: Single story run on a story without tests
+      let regex: RegExp = new RegExp(`^${storyName}$`);
+
+      if (selectedStory.tags?.includes('test-fn')) {
+        // in this case the regex pattern should be the story parentName + story.name
+        // @ts-expect-error TODO: fix this
+        const parentName = selectedStory.parentName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        // Use case 2: Single story run on a specific story test
+        regex = new RegExp(`^${parentName} ${storyName}$`);
+      } else if (selectedStory.tags?.includes('has-tests')) {
+        // Use case 3: "Single" story run on a story with tests
+        // -> run all tests of that story, as storyName is a describe block
+        regex = new RegExp(`^${storyName} `);
+      }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
 

From 32f7796f6bb1033fcbdc2c889f65856100f28e78 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 16:58:01 +0200
Subject: [PATCH 060/130] update comments

---
 .../core-server/utils/StoryIndexGenerator.ts  | 23 +++---
 code/core/src/csf-tools/CsfFile.ts            | 14 +++-
 code/core/src/csf/csf-factories.ts            |  2 +-
 .../src/manager/components/sidebar/Tree.tsx   |  2 +-
 .../manager/components/sidebar/TreeNode.tsx   |  2 +-
 .../preview-api/modules/store/StoryStore.ts   |  1 -
 code/core/src/types/modules/api-stories.ts    |  2 +-
 code/core/src/types/modules/indexer.ts        |  4 +-
 code/renderers/react/src/preview.tsx          |  2 +-
 .../template/stories/test-fn.stories.tsx      | 75 +++++++++++++++++--
 code/renderers/server/src/preset.ts           |  2 +-
 11 files changed, 100 insertions(+), 29 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 985b3a9083b3..610137d2531d 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -35,7 +35,7 @@ import { IndexingError, MultipleIndexingError } from './IndexingError';
 import { autoName } from './autoName';
 import { type IndexStatsSummary, addStats } from './summarizeStats';
 
-// TODO: replace line 42 with this once we start working on UI for tests
+// TODO: [test-syntax] replace line 42 with this once we start working on UI for tests
 // type StoryIndexEntryWithExtra = (StoryIndexEntry | TestIndexEntry) & {
 
 // Extended type to keep track of the csf meta id so we know the component id when referencing docs in `extractDocs`
@@ -456,14 +456,19 @@ export class StoryIndexGenerator {
           tags,
         };
 
-        // TODO: Enable this once we start working on UI for tests
-        // if (input.type === 'test') {
-        //   return {
-        //     type: 'test',
-        //     parentId: input.parentId,
-        //     ...commonMetadata,
-        //   };
-        // }
+        // TODO: [test-syntax] Enable this once we start working on UI for tests
+        if (input.tags?.includes('has-tests')) {
+          // if (input.type === 'test') {
+          return {
+            // type: 'test',
+            type: 'story',
+            // @ts-expect-error TODO: discuss this
+            parentId: input.parentId,
+            // @ts-expect-error TODO: discuss this
+            parentName: input.parentName,
+            ...commonMetadata,
+          };
+        }
 
         return {
           type: 'story',
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index a786560c9cbc..fc0623e31a18 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -703,7 +703,6 @@ export class CsfFile {
               self._storyTests[exportName] = [];
             }
 
-            // TODO: Do we want to support function references?
             if (
               t.isArrowFunctionExpression(testFunction) ||
               t.isFunctionExpression(testFunction) ||
@@ -834,7 +833,7 @@ export class CsfFile {
         stats.moduleMock = !!self.imports.find((fname) => isModuleMock(fname));
 
         if (self._storyTests[key]) {
-          // TODO: if we want to add a tag for the story that contains tests, this is the place for it
+          // TODO: [test-syntax] if we want to add a tag for the story that contains tests, this is the place for it
           // acc[key].tags = [...(acc[key].tags || []), 'story-with-tests'];
 
           stats.tests = true;
@@ -907,6 +906,11 @@ export class CsfFile {
         __stats: story.__stats,
       };
 
+      if (this._storyTests[exportName]) {
+        // TODO: discuss this later
+        storyInput.tags = [...(storyInput.tags || []), 'has-tests'];
+      }
+
       index.push({
         ...storyInput,
         type: 'story',
@@ -918,9 +922,11 @@ export class CsfFile {
           index.push({
             ...storyInput,
             type: 'story',
-            // TODO: enable this once we start working on UI for tests
+            // TODO: [test-syntax] enable this once we start working on UI for tests
             // type: 'test',
-            // parentId: story.id,
+            // @ts-expect-error TODO: discuss this later
+            parentId: story.id,
+            parentName: story.name,
             name: test.name,
             tags: [...storyInput.tags, 'test-fn'],
             __id: test.id,
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 39b49fd8e406..1737408b1a9e 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -110,7 +110,7 @@ function defineMeta<
     input,
     preview,
     get composed() {
-      // TODO: check this later
+      // TODO: [test-syntax] Kasper check this later
       return composeConfigs([preview.input, input]);
     },
     // @ts-expect-error hard
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 01f3542635f2..0c4dbeb39efb 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -330,7 +330,7 @@ const Node = React.memo<NodeProps>(function Node({
               setMobileMenuOpen(false);
             }
           }}
-          // TODO: hack stuff, should be fixed later
+          // TODO: [test-syntax] Gert hack stuff, should be fixed later
           {...(item.tags?.includes('test-fn') && { type: 'test' })}
           {...(item.type === 'docs' && { docsMode })}
         >
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 8b358b73b0a9..408797b2b49a 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -70,7 +70,7 @@ const LeafNode = styled.a<{ depth?: number; type?: 'story' | 'test' }>(
     gap: 6,
     flex: 1,
     alignItems: 'start',
-    // TODO: hack stuff, should be fixed later
+    // TODO: [test-syntax] Gert hack stuff, should be fixed later
     paddingLeft: type === 'test' ? `${32 + depth * 18}px` : `${22 + depth * 18}px`,
     paddingTop: 5,
     paddingBottom: 4,
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 04c1d8bfe90e..8853b529e3c2 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -209,7 +209,6 @@ export class StoryStore<TRenderer extends Renderer> {
       componentAnnotations,
       csfFile.projectAnnotations ?? this.projectAnnotations
     );
-    // TODO: check type error later
     this.args.setInitial(story);
     this.hooks[story.id] = this.hooks[story.id] || new HooksContext();
     return story;
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 13d8db05e238..dff4b2e13994 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -59,7 +59,7 @@ export interface API_TestEntry extends Omit<API_StoryEntry, 'type'> {
   type: 'test';
   parentId: StoryId;
 }
-// TODO: enable TestEntry once we start working on UI for tests
+// TODO: [test-syntax] enable TestEntry once we start working on UI for tests
 export type API_LeafEntry = API_DocsEntry | API_StoryEntry; // | API_TestEntry;
 export type API_HashEntry =
   | API_RootEntry
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index 6cf977663afa..ef27e564a5f6 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -85,7 +85,7 @@ export type DocsIndexEntry = BaseIndexEntry & {
   type: 'docs';
 };
 
-// TODO: add this once we start working on UI for tests
+// TODO: [test-syntax] add this once we start working on UI for tests
 export type IndexEntry = StoryIndexEntry | DocsIndexEntry; //| TestIndexEntry;
 
 export interface IndexInputStats {
@@ -151,7 +151,7 @@ export type DocsIndexInput = BaseIndexInput & {
   storiesImports?: Path[];
 };
 
-// TODO: add this once we start working on UI for tests
+// TODO: [test-syntax] add this once we start working on UI for tests
 export type IndexInput = StoryIndexInput | DocsIndexInput; // | TestIndexInput;
 
 export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags'> {
diff --git a/code/renderers/react/src/preview.tsx b/code/renderers/react/src/preview.tsx
index 394dd907797d..1dc81e7deacc 100644
--- a/code/renderers/react/src/preview.tsx
+++ b/code/renderers/react/src/preview.tsx
@@ -40,7 +40,7 @@ export function __definePreview<Addons extends PreviewAddon<never>[]>(
     const defineStory = meta.story.bind(meta);
     meta.story = (__input: any) => {
       const story = defineStory(__input);
-      // TODO: Are we sure we want this? the Component construct was for
+      // TODO: [test-syntax] Are we sure we want this? the Component construct was for
       // compatibility with raw portable stories. We don't actually use this in vitest.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore this is a private property used only here
diff --git a/code/renderers/react/template/stories/test-fn.stories.tsx b/code/renderers/react/template/stories/test-fn.stories.tsx
index 5474d1faa879..43b0254633d4 100644
--- a/code/renderers/react/template/stories/test-fn.stories.tsx
+++ b/code/renderers/react/template/stories/test-fn.stories.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 
+import type { TestFunction } from 'storybook/internal/types';
+
 import { expect, fn } from 'storybook/test';
 
-import preview from './preview';
+import preview from '../../../../.storybook/preview';
 
 const Button = (args: React.ComponentProps<'button'>) => <button {...args} />;
 
@@ -15,13 +17,72 @@ const meta = preview.meta({
   tags: ['some-tag'],
 });
 
-export const Default = meta.story({});
-Default.test('Exists in the dom', async ({ canvas }) => {
-  const button = canvas.getByText('Default');
-  await expect(button).toBeInTheDocument();
+export const Default = meta.story({
+  args: {
+    children: 'Arg from story',
+  },
 });
-Default.test('onClick is called', async ({ canvas, userEvent, args }) => {
-  const button = canvas.getByText('Default');
+Default.test('simple', async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Arg from story');
+  await userEvent.click(button);
+  await expect(args.onClick).toHaveBeenCalled();
+});
+
+const doTest: TestFunction = async ({ canvas, userEvent, args }) => {
+  const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
+  // @ts-expect-error TODO: [test-syntax] Fix later with Kasper
   await expect(args.onClick).toHaveBeenCalled();
+};
+Default.test('referring to function in file', doTest);
+
+Default.test(
+  'with overrides',
+  {
+    args: {
+      children: 'Arg from test override',
+    },
+    parameters: {
+      viewport: {
+        options: {
+          sized: {
+            name: 'Sized',
+            styles: {
+              width: '380px',
+              height: '500px',
+            },
+          },
+        },
+      },
+      chromatic: { viewports: [380] },
+    },
+    globals: { viewport: { value: 'sized' } },
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from test override');
+    await expect(button).toBeInTheDocument();
+    expect(document.body.clientWidth).toBe(380);
+  }
+);
+Default.test(
+  'with play function',
+  {
+    play: async ({ canvas }) => {
+      const button = canvas.getByText('Arg from story');
+      await expect(button).toBeInTheDocument();
+    },
+  },
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from story');
+    await expect(button).toBeEnabled();
+  }
+);
+export const Extended = Default.extend({
+  args: {
+    children: 'Arg from extended story',
+  },
+});
+Extended.test('should have extended args', async ({ canvas }) => {
+  const button = canvas.getByText('Arg from extended story');
+  await expect(button).toBeEnabled();
 });
diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts
index 266e602304c4..ffceec83cb93 100644
--- a/code/renderers/server/src/preset.ts
+++ b/code/renderers/server/src/preset.ts
@@ -30,7 +30,7 @@ export const experimental_indexers: PresetProperty<'experimental_indexers'> = (
           name: story.name,
           title: content.title,
           tags,
-          // TODO: Does this need change now with story tests?
+          // TODO: [test-syntax] Does this need change now with story tests?
           type: 'story',
         };
       });

From 50fc0b771f5a97554d3d4c1a3e17be231e0818cd Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 21 Aug 2025 18:07:27 +0200
Subject: [PATCH 061/130] fix vitest regex

---
 code/addons/vitest/src/node/vitest-manager.ts         | 11 ++++++++++-
 .../component-testing/components/test-fn.stories.tsx  |  5 +++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index cd2133d58d06..4cf4bb6d6e30 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -283,7 +283,16 @@ export class VitestManager {
       } else if (selectedStory.tags?.includes('has-tests')) {
         // Use case 3: "Single" story run on a story with tests
         // -> run all tests of that story, as storyName is a describe block
-        regex = new RegExp(`^${storyName} `);
+        /**
+         * TODO: [test-syntax] discuss. The vitest transformation keeps the export name as is, e.g.
+         * "PrimaryButton", while the storybook sidebar changes the name to "Primary Button". That's
+         * why we need to remove spaces from the story name, to match the test name. If we were to
+         * also beautify the test name, doing a regex wouldn't be precise because there could be two
+         * describes, for instance: "Primary Button" and "Primary Button Mobile" and both would
+         * match. The fact that there are no spaces in the test name is what makes "PrimaryButton"
+         * and "PrimaryButtonMobile" worth well in the regex.
+         */
+        regex = new RegExp(`^${storyName.replace(/\s+/g, '')} `);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 272c7b423458..97c7c41746c8 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -80,12 +80,13 @@ Default.test(
     await expect(button).toBeEnabled();
   }
 );
-export const Extended = Default.extend({
+
+export const DefaultExtended = Default.extend({
   args: {
     children: 'Arg from extended story',
   },
 });
-Extended.test('should have extended args', async ({ canvas }) => {
+DefaultExtended.test('should have extended args', async ({ canvas }) => {
   const button = canvas.getByText('Arg from extended story');
   await expect(button).toBeEnabled();
 });

From 512c1e61a0467c728ced86d1feccacfcbc6c76ff Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 26 Aug 2025 09:35:28 +0200
Subject: [PATCH 062/130] Refactor to see stories as tests

---
 .../vitest/src/vitest-plugin/test-utils.ts    |  17 +-
 code/core/src/csf/csf-factories.test.ts       |  14 +-
 code/core/src/csf/csf-factories.ts            |  47 +-
 .../modules/preview-web/PreviewWeb.test.ts    | 518 +++++++++---------
 .../modules/preview-web/render/StoryRender.ts |  63 +--
 .../modules/store/csf/normalizeStory.test.ts  |   4 -
 .../modules/store/csf/normalizeStory.ts       |   5 +-
 .../modules/store/csf/portable-stories.ts     |  12 +-
 .../modules/store/csf/prepareStory.ts         |   1 -
 .../modules/store/csf/processCSFFile.ts       |  27 +-
 code/core/src/types/modules/api-stories.ts    |   6 -
 code/core/src/types/modules/composedStory.ts  |   5 +-
 code/core/src/types/modules/indexer.ts        |   9 +-
 code/core/src/types/modules/story.ts          |   9 +-
 code/renderers/server/src/preset.ts           |   1 -
 15 files changed, 350 insertions(+), 388 deletions(-)

diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 27a417f33abf..0501548275f1 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -1,6 +1,6 @@
 import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
-import { type Meta, type Story, isStory, toTestId } from 'storybook/internal/csf';
+import { type Meta, type Story, getStoryChildren, isStory, toTestId } from 'storybook/internal/csf';
 import type { ComponentAnnotations, ComposedStoryFn, Renderer } from 'storybook/internal/types';
 
 import { server } from '@vitest/browser/context';
@@ -41,8 +41,12 @@ export const testStory = (
   return async (context: TestContext & { story: ComposedStoryFn }) => {
     const annotations = getCsfFactoryAnnotations(story, meta);
 
-    const storyAnnotations =
-      isStory(story) && testName ? story.getAllTests()[testName].story.input : annotations.story;
+    const test =
+      isStory(story) && testName
+        ? getStoryChildren(story).find((child) => child.input.name === testName)
+        : undefined;
+
+    const storyAnnotations = test ? test.input : annotations.story;
 
     const composedStory = composeStory(
       storyAnnotations,
@@ -63,6 +67,7 @@ export const testStory = (
     };
 
     if (testName) {
+      // TODO: [test-syntax] isn't this done by the csf plugin somehow?
       _task.meta.storyId = toTestId(composedStory.id, testName);
     } else {
       _task.meta.storyId = composedStory.id;
@@ -70,11 +75,7 @@ export const testStory = (
 
     await setViewport(composedStory.parameters, composedStory.globals);
 
-    if (isStory(story) && testName) {
-      await composedStory.run(undefined, story.getAllTests()[testName].test);
-    } else {
-      await composedStory.run(undefined);
-    }
+    await composedStory.run(undefined);
 
     _task.meta.reports = composedStory.reporting.reports;
   };
diff --git a/code/core/src/csf/csf-factories.test.ts b/code/core/src/csf/csf-factories.test.ts
index f6ee8446e4f7..cd25dc723c08 100644
--- a/code/core/src/csf/csf-factories.test.ts
+++ b/code/core/src/csf/csf-factories.test.ts
@@ -1,7 +1,7 @@
 //* @vitest-environment happy-dom */
 import { describe, expect, test, vi } from 'vitest';
 
-import { definePreview, definePreviewAddon } from './csf-factories';
+import { definePreview, definePreviewAddon, getStoryChildren } from './csf-factories';
 
 interface Addon1Types {
   parameters: { foo?: { value: string } };
@@ -53,11 +53,11 @@ describe('test function', () => {
 
     // register test
     MyStory.test(testName, testFn);
-    const { story: storyTestAnnotations } = MyStory.getAllTests()[testName];
-    expect(storyTestAnnotations.input.args).toEqual({ label: 'foo' });
+    const test = getStoryChildren(MyStory).find(({ input }) => input.name === testName)!;
+    expect(test.input.args).toEqual({ label: 'foo' });
 
     // execute test
-    await MyStory.run(undefined, testName);
+    await test.run(undefined, testName);
     expect(testFn).toHaveBeenCalled();
   });
   test('with overrides', async () => {
@@ -67,11 +67,11 @@ describe('test function', () => {
 
     // register test
     MyStory.test(testName, { args: { label: 'bar' } }, testFn);
-    const { story: storyTestAnnotations } = MyStory.getAllTests()[testName];
-    expect(storyTestAnnotations.input.args).toEqual({ label: 'bar' });
+    const test = getStoryChildren(MyStory).find(({ input }) => input.name === testName)!;
+    expect(test.input.args).toEqual({ label: 'bar' });
 
     // execute test
-    await MyStory.run(undefined, testName);
+    await test.run();
     expect(testFn).toHaveBeenCalled();
   });
 });
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 1737408b1a9e..2aa22739d632 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -11,6 +11,8 @@ import type {
   TestFunction,
 } from 'storybook/internal/types';
 
+import { mountDestructured } from 'core/src/preview-api/modules/preview-web/render/mount-utils';
+
 import {
   combineParameters,
   composeConfigs,
@@ -154,7 +156,6 @@ export interface Story<
     annotations: StoryAnnotations<TRenderer, TRenderer['args']>,
     fn: TestFunction<TRenderer>
   ): void;
-  getAllTests(): Record<string, { story: Story<TRenderer>; test: TestFunction<TRenderer> }>;
 }
 
 export function isStory<TRenderer extends Renderer>(input: unknown): input is Story<TRenderer> {
@@ -178,7 +179,7 @@ function defineStory<
     return composed;
   };
 
-  const tests: Record<string, { story: Story<TRenderer>; test: TestFunction<TRenderer> }> = {};
+  const __children: Story<TRenderer>[] = [];
 
   return {
     _tag: 'Story',
@@ -186,6 +187,7 @@ function defineStory<
     meta,
     // @ts-expect-error this is a private property used only once in renderers/react/src/preview
     __compose: compose,
+    __children,
     get composed() {
       const composed = compose();
       const { args, argTypes, parameters, id, tags, globals, storyName: name } = composed;
@@ -194,9 +196,8 @@ function defineStory<
     get play() {
       return input.play ?? meta.input?.play ?? (async () => {});
     },
-    async run(context, testName?: string) {
-      const composedRun = compose().run;
-      await composedRun(context, tests[testName!]?.test);
+    async run(context) {
+      await compose().run(context);
     },
     test(
       name: string,
@@ -206,10 +207,26 @@ function defineStory<
       const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
       const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;
 
-      tests[name] = {
-        story: this.extend({ ...annotations, tags: [...(annotations.tags ?? []), 'test-fn'] }),
-        test: testFunction,
-      };
+      const play =
+        mountDestructured(this.play) || mountDestructured(testFn)
+          ? async ({ mount, context }: StoryContext<TRenderer>) => {
+              await this.play?.(context);
+              await testFunction(context);
+            }
+          : async (context: StoryContext<TRenderer>) => {
+              await this.play?.(context);
+              await testFunction(context);
+            };
+
+      const test = this.extend({
+        ...annotations,
+        name,
+        tags: ['test-fn', '!autodocs', ...(annotations.tags ?? [])],
+        play,
+      });
+      __children.push(test);
+
+      return test as unknown as void;
     },
     extend<TInput extends StoryAnnotations<TRenderer, TRenderer['args']>>(input: TInput) {
       return defineStory(
@@ -241,8 +258,14 @@ function defineStory<
         this.meta
       );
     },
-    getAllTests() {
-      return tests;
-    },
   };
 }
+
+export function getStoryChildren<TRenderer extends Renderer>(
+  story: Story<TRenderer>
+): Story<TRenderer>[] {
+  if ('__children' in story) {
+    return story.__children as Story<TRenderer>[];
+  }
+  return [];
+}
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index 3d11097b6618..056d94e7e040 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -3847,271 +3847,267 @@ describe('PreviewWeb', () => {
       expect(extracted).toBe(true);
 
       expect(await preview.extract()).toMatchInlineSnapshot(`
-        {
-          "component-one--a": {
-            "argTypes": {
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-              "one": {
-                "mapping": {
-                  "1": "mapped-1",
-                },
-                "name": "one",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "args": {
-              "foo": "a",
-              "one": 1,
-            },
-            "component": undefined,
-            "componentId": "component-one",
-            "globals": {
-              "a": "b",
-              "backgrounds": {
-                "grid": false,
-                "value": undefined,
-              },
-              "measureEnabled": false,
-              "outline": false,
-              "viewport": {
-                "isRotated": false,
-                "value": undefined,
-              },
-            },
-            "id": "component-one--a",
-            "initialArgs": {
-              "foo": "a",
-              "one": 1,
-            },
-            "kind": "Component One",
-            "name": "A",
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "docs": {
-                "container": [MockFunction spy],
-                "page": [MockFunction spy],
-                "renderer": [Function],
-              },
-              "fileName": "./src/ComponentOne.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "story": "A",
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testFunction": undefined,
-            "testingLibraryRender": undefined,
-            "title": "Component One",
-            "usesMount": false,
+  {
+    "component-one--a": {
+      "argTypes": {
+        "foo": {
+          "name": "foo",
+          "type": {
+            "name": "string",
           },
-          "component-one--b": {
-            "argTypes": {
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-              "one": {
-                "mapping": {
-                  "1": "mapped-1",
-                },
-                "name": "one",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "args": {
-              "foo": "b",
-              "one": 1,
-            },
-            "component": undefined,
-            "componentId": "component-one",
-            "globals": {
-              "a": "b",
-              "backgrounds": {
-                "grid": false,
-                "value": undefined,
-              },
-              "measureEnabled": false,
-              "outline": false,
-              "viewport": {
-                "isRotated": false,
-                "value": undefined,
-              },
-            },
-            "id": "component-one--b",
-            "initialArgs": {
-              "foo": "b",
-              "one": 1,
-            },
-            "kind": "Component One",
-            "name": "B",
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "docs": {
-                "container": [MockFunction spy],
-                "page": [MockFunction spy],
-                "renderer": [Function],
-              },
-              "fileName": "./src/ComponentOne.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "story": "B",
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testFunction": undefined,
-            "testingLibraryRender": undefined,
-            "title": "Component One",
-            "usesMount": false,
+        },
+        "one": {
+          "mapping": {
+            "1": "mapped-1",
           },
-          "component-one--e": {
-            "argTypes": {},
-            "args": {},
-            "component": undefined,
-            "componentId": "component-one",
-            "globals": {
-              "a": "b",
-              "backgrounds": {
-                "grid": false,
-                "value": undefined,
-              },
-              "measureEnabled": false,
-              "outline": false,
-              "viewport": {
-                "isRotated": false,
-                "value": undefined,
-              },
-            },
-            "id": "component-one--e",
-            "initialArgs": {},
-            "kind": "Component One",
-            "name": "E",
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "docs": {
-                "page": [MockFunction spy],
-                "renderer": [Function],
-              },
-              "fileName": "./src/ExtraComponentOne.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "playFunction": undefined,
-            "story": "E",
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testFunction": undefined,
-            "testingLibraryRender": undefined,
-            "title": "Component One",
-            "usesMount": false,
+          "name": "one",
+          "type": {
+            "name": "string",
           },
-          "component-two--c": {
-            "argTypes": {
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "args": {
-              "foo": "c",
-            },
-            "component": undefined,
-            "componentId": "component-two",
-            "globals": {
-              "a": "b",
-              "backgrounds": {
-                "grid": false,
-                "value": undefined,
-              },
-              "measureEnabled": false,
-              "outline": false,
-              "viewport": {
-                "isRotated": false,
-                "value": undefined,
-              },
-            },
-            "id": "component-two--c",
-            "initialArgs": {
-              "foo": "c",
-            },
-            "kind": "Component Two",
-            "name": "C",
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "docs": {
-                "renderer": [Function],
-              },
-              "fileName": "./src/ComponentTwo.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "playFunction": undefined,
-            "story": "C",
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testFunction": undefined,
-            "testingLibraryRender": undefined,
-            "title": "Component Two",
-            "usesMount": false,
+        },
+      },
+      "args": {
+        "foo": "a",
+        "one": 1,
+      },
+      "component": undefined,
+      "componentId": "component-one",
+      "globals": {
+        "a": "b",
+        "backgrounds": {
+          "grid": false,
+          "value": undefined,
+        },
+        "measureEnabled": false,
+        "outline": false,
+        "viewport": {
+          "isRotated": false,
+          "value": undefined,
+        },
+      },
+      "id": "component-one--a",
+      "initialArgs": {
+        "foo": "a",
+        "one": 1,
+      },
+      "kind": "Component One",
+      "name": "A",
+      "parameters": {
+        "__isArgsStory": false,
+        "backgrounds": {
+          "disable": false,
+          "grid": {
+            "cellAmount": 5,
+            "cellSize": 20,
+            "opacity": 0.5,
           },
-        }
-      `);
+        },
+        "docs": {
+          "container": [MockFunction spy],
+          "page": [MockFunction spy],
+          "renderer": [Function],
+        },
+        "fileName": "./src/ComponentOne.stories.js",
+        "throwPlayFunctionExceptions": false,
+      },
+      "story": "A",
+      "storyGlobals": {},
+      "subcomponents": undefined,
+      "tags": [
+        "dev",
+        "test",
+      ],
+      "testingLibraryRender": undefined,
+      "title": "Component One",
+      "usesMount": false,
+    },
+    "component-one--b": {
+      "argTypes": {
+        "foo": {
+          "name": "foo",
+          "type": {
+            "name": "string",
+          },
+        },
+        "one": {
+          "mapping": {
+            "1": "mapped-1",
+          },
+          "name": "one",
+          "type": {
+            "name": "string",
+          },
+        },
+      },
+      "args": {
+        "foo": "b",
+        "one": 1,
+      },
+      "component": undefined,
+      "componentId": "component-one",
+      "globals": {
+        "a": "b",
+        "backgrounds": {
+          "grid": false,
+          "value": undefined,
+        },
+        "measureEnabled": false,
+        "outline": false,
+        "viewport": {
+          "isRotated": false,
+          "value": undefined,
+        },
+      },
+      "id": "component-one--b",
+      "initialArgs": {
+        "foo": "b",
+        "one": 1,
+      },
+      "kind": "Component One",
+      "name": "B",
+      "parameters": {
+        "__isArgsStory": false,
+        "backgrounds": {
+          "disable": false,
+          "grid": {
+            "cellAmount": 5,
+            "cellSize": 20,
+            "opacity": 0.5,
+          },
+        },
+        "docs": {
+          "container": [MockFunction spy],
+          "page": [MockFunction spy],
+          "renderer": [Function],
+        },
+        "fileName": "./src/ComponentOne.stories.js",
+        "throwPlayFunctionExceptions": false,
+      },
+      "story": "B",
+      "storyGlobals": {},
+      "subcomponents": undefined,
+      "tags": [
+        "dev",
+        "test",
+      ],
+      "testingLibraryRender": undefined,
+      "title": "Component One",
+      "usesMount": false,
+    },
+    "component-one--e": {
+      "argTypes": {},
+      "args": {},
+      "component": undefined,
+      "componentId": "component-one",
+      "globals": {
+        "a": "b",
+        "backgrounds": {
+          "grid": false,
+          "value": undefined,
+        },
+        "measureEnabled": false,
+        "outline": false,
+        "viewport": {
+          "isRotated": false,
+          "value": undefined,
+        },
+      },
+      "id": "component-one--e",
+      "initialArgs": {},
+      "kind": "Component One",
+      "name": "E",
+      "parameters": {
+        "__isArgsStory": false,
+        "backgrounds": {
+          "disable": false,
+          "grid": {
+            "cellAmount": 5,
+            "cellSize": 20,
+            "opacity": 0.5,
+          },
+        },
+        "docs": {
+          "page": [MockFunction spy],
+          "renderer": [Function],
+        },
+        "fileName": "./src/ExtraComponentOne.stories.js",
+        "throwPlayFunctionExceptions": false,
+      },
+      "playFunction": undefined,
+      "story": "E",
+      "storyGlobals": {},
+      "subcomponents": undefined,
+      "tags": [
+        "dev",
+        "test",
+      ],
+      "testingLibraryRender": undefined,
+      "title": "Component One",
+      "usesMount": false,
+    },
+    "component-two--c": {
+      "argTypes": {
+        "foo": {
+          "name": "foo",
+          "type": {
+            "name": "string",
+          },
+        },
+      },
+      "args": {
+        "foo": "c",
+      },
+      "component": undefined,
+      "componentId": "component-two",
+      "globals": {
+        "a": "b",
+        "backgrounds": {
+          "grid": false,
+          "value": undefined,
+        },
+        "measureEnabled": false,
+        "outline": false,
+        "viewport": {
+          "isRotated": false,
+          "value": undefined,
+        },
+      },
+      "id": "component-two--c",
+      "initialArgs": {
+        "foo": "c",
+      },
+      "kind": "Component Two",
+      "name": "C",
+      "parameters": {
+        "__isArgsStory": false,
+        "backgrounds": {
+          "disable": false,
+          "grid": {
+            "cellAmount": 5,
+            "cellSize": 20,
+            "opacity": 0.5,
+          },
+        },
+        "docs": {
+          "renderer": [Function],
+        },
+        "fileName": "./src/ComponentTwo.stories.js",
+        "throwPlayFunctionExceptions": false,
+      },
+      "playFunction": undefined,
+      "story": "C",
+      "storyGlobals": {},
+      "subcomponents": undefined,
+      "tags": [
+        "dev",
+        "test",
+      ],
+      "testingLibraryRender": undefined,
+      "title": "Component Two",
+      "usesMount": false,
+    },
+  }
+`);
     });
   });
 });
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 1854895b9bbb..4e5bc7d89c4c 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -40,8 +40,6 @@ export type RenderPhase =
   | 'rendering'
   | 'playing'
   | 'played'
-  | 'testing'
-  | 'tested'
   | 'completing'
   | 'completed'
   | 'afterEach'
@@ -113,8 +111,8 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     });
     if (phaseFn) {
       await phaseFn();
+      this.checkIfAborted(signal);
     }
-    this.checkIfAborted(signal);
   }
 
   private checkIfAborted(signal: AbortSignal): boolean {
@@ -209,7 +207,6 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       unboundStoryFn,
       playFunction,
       runStep,
-      testFunction,
     } = story;
 
     if (forceRemount && !initial) {
@@ -329,46 +326,30 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       };
 
       // The phase should be 'rendering' but it might be set to 'aborted' by another render cycle
-      const shouldHandleUnhandledErrors = !ignoreUnhandledErrors && unhandledErrors.size > 0;
-      if (
-        this.renderOptions.autoplay &&
-        forceRemount &&
-        (playFunction || testFunction) &&
-        this.phase !== 'errored'
-      ) {
+      if (this.renderOptions.autoplay && forceRemount && playFunction && this.phase !== 'errored') {
         window?.addEventListener?.('error', onError);
         window?.addEventListener?.('unhandledrejection', onUnhandledRejection);
         this.disableKeyListeners = true;
         try {
-          if (playFunction) {
-            if (!isMountDestructured) {
-              context.mount = async () => {
-                throw new MountMustBeDestructuredError({ playFunction: playFunction.toString() });
-              };
-              await this.runPhase(abortSignal, 'playing', async () => playFunction(context));
-            } else {
-              // when mount is used the playing phase will start later, right after mount is called in the play function
-              await playFunction(context);
-            }
-
-            if (!mounted) {
-              throw new NoStoryMountedError();
-            }
-
-            if (shouldHandleUnhandledErrors) {
-              await this.runPhase(abortSignal, 'errored');
-              return;
-            }
-            await this.runPhase(abortSignal, 'played');
+          if (!isMountDestructured) {
+            context.mount = async () => {
+              throw new MountMustBeDestructuredError({ playFunction: playFunction.toString() });
+            };
+            await this.runPhase(abortSignal, 'playing', async () => playFunction(context));
+          } else {
+            // when mount is used the playing phase will start later, right after mount is called in the play function
+            await playFunction(context);
           }
 
-          if (testFunction) {
-            await this.runPhase(abortSignal, 'testing', async () => testFunction(context));
-            if (shouldHandleUnhandledErrors) {
-              await this.runPhase(abortSignal, 'errored');
-              return;
-            }
-            await this.runPhase(abortSignal, 'tested');
+          if (!mounted) {
+            throw new NoStoryMountedError();
+          }
+          this.checkIfAborted(abortSignal);
+
+          if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
+            await this.runPhase(abortSignal, 'errored');
+          } else {
+            await this.runPhase(abortSignal, 'played');
           }
         } catch (error) {
           // Remove the loading screen, even if there was an error before rendering
@@ -383,7 +364,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
           }
           console.error(error);
         }
-        if (shouldHandleUnhandledErrors) {
+        if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
           this.channel.emit(
             UNHANDLED_ERRORS_WHILE_PLAYING,
             Array.from(unhandledErrors).map(serializeError)
@@ -416,11 +397,13 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         });
       }
 
+      const hasUnhandledErrors = !ignoreUnhandledErrors && unhandledErrors.size > 0;
+
       const hasSomeReportsFailed = context.reporting.reports.some(
         (report) => report.status === 'failed'
       );
 
-      const hasStoryErrored = shouldHandleUnhandledErrors || hasSomeReportsFailed;
+      const hasStoryErrored = hasUnhandledErrors || hasSomeReportsFailed;
 
       await this.runPhase(abortSignal, 'finished', async () =>
         this.channel.emit(STORY_FINISHED, {
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
index 06b772ab6b74..513685d1a690 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
@@ -64,7 +64,6 @@ describe('normalizeStory', () => {
           "name": "Story Export",
           "parameters": {},
           "tags": [],
-          "testFunction": undefined,
           "userStoryFn": [Function],
         }
       `);
@@ -137,7 +136,6 @@ describe('normalizeStory', () => {
             "name": "Story Export",
             "parameters": {},
             "tags": [],
-            "testFunction": undefined,
           }
         `);
         expect(normalized.moduleExport).toBe(storyObj);
@@ -182,7 +180,6 @@ describe('normalizeStory', () => {
               "storyParam": "val",
             },
             "tags": [],
-            "testFunction": undefined,
           }
         `);
         expect(moduleExport).toBe(storyObj);
@@ -244,7 +241,6 @@ describe('normalizeStory', () => {
               "storyParam2": "legacy",
             },
             "tags": [],
-            "testFunction": undefined,
           }
         `);
         expect(moduleExport).toBe(storyObj);
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index 91420cf47fbb..07ae62060292 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -24,7 +24,7 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
 
 export function normalizeStory<TRenderer extends Renderer>(
   key: StoryId,
-  storyAnnotations: StoryAnnotationsOrFn<TRenderer> & { testFunction?: any },
+  storyAnnotations: StoryAnnotationsOrFn<TRenderer>,
   meta: NormalizedComponentAnnotations<TRenderer>
 ): NormalizedStoryAnnotations<TRenderer> {
   const storyObject = storyAnnotations;
@@ -61,7 +61,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.afterEach),
     ...normalizeArrays(story?.afterEach),
   ];
-  const { render, play, tags = [], globals = {}, testFunction } = storyObject;
+  const { render, play, tags = [], globals = {} } = storyObject;
 
   const id = parameters.__id || toId(meta.id, exportName);
   return {
@@ -77,7 +77,6 @@ export function normalizeStory<TRenderer extends Renderer>(
     beforeEach,
     afterEach,
     globals,
-    testFunction,
     ...(render && { render }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index bb456486406c..3d5750e2a1c8 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -214,13 +214,10 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     return story.playFunction!(context);
   };
 
-  const run = (
-    extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
-    test?: (context: StoryContext<TRenderer>) => void | Promise<void>
-  ) => {
+  const run = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
     const context = initializeContext();
     Object.assign(context, extraContext);
-    return runStory(story, context, test);
+    return runStory(story, context);
   };
 
   const playFunction = story.playFunction ? play : undefined;
@@ -379,8 +376,7 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
 // Will make a follow up PR for that
 async function runStory<TRenderer extends Renderer>(
   story: PreparedStory<TRenderer>,
-  context: StoryContext<TRenderer>,
-  testFunction?: (context: StoryContext<TRenderer>) => void | Promise<void>
+  context: StoryContext<TRenderer>
 ) {
   for (const callback of [...cleanups].reverse()) {
     await callback();
@@ -427,8 +423,6 @@ async function runStory<TRenderer extends Renderer>(
     await playFunction(context);
   }
 
-  await testFunction?.(context);
-
   let cleanUp: CleanupCallback | undefined;
   if (isTestEnvironment()) {
     cleanUp = pauseAnimations();
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index bd3b3984336d..42d17914ad48 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -165,7 +165,6 @@ export function prepareStory<TRenderer extends Renderer>(
     testingLibraryRender,
     renderToCanvas: projectAnnotations.renderToCanvas,
     usesMount,
-    testFunction: storyAnnotations.testFunction,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(
diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index 591c123f4070..3f76329936d4 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -1,6 +1,6 @@
 import { logger } from 'storybook/internal/client-logger';
 import type { Story } from 'storybook/internal/csf';
-import { isExportStory, isStory, toTestId } from 'storybook/internal/csf';
+import { getStoryChildren, isExportStory, isStory, toTestId } from 'storybook/internal/csf';
 import type { ComponentTitle, Parameters, Path, Renderer } from 'storybook/internal/types';
 import type {
   CSFFile,
@@ -68,22 +68,15 @@ export function processCSFFile<TRenderer extends Renderer>(
 
         // if the story has tests, we need to add those to the csfFile
 
-        Object.entries(story.getAllTests()).forEach(
-          ([testName, { story: storyTest, test: testFunction }]) => {
-            const testId = toTestId(storyMeta.id, testName);
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
-            storyTest.input.parameters.__id = testId;
-
-            csfFile.stories[testId] = {
-              ...normalizeStory<TRenderer>(
-                testName,
-                { ...(storyTest.input as any), testFunction },
-                meta
-              ),
-            };
-          }
-        );
+        getStoryChildren(story).forEach((story) => {
+          const testName = story.input.name!;
+          const testId = toTestId(storyMeta.id, testName);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
+          storyTest.input.parameters.__id = testId;
+
+          csfFile.stories[testId] = normalizeStory(testName, story.input as any, meta);
+        });
       }
     });
 
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index dff4b2e13994..9bbd797145b7 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -55,11 +55,6 @@ export interface API_StoryEntry extends API_BaseEntry {
   initialArgs?: Args;
 }
 
-export interface API_TestEntry extends Omit<API_StoryEntry, 'type'> {
-  type: 'test';
-  parentId: StoryId;
-}
-// TODO: [test-syntax] enable TestEntry once we start working on UI for tests
 export type API_LeafEntry = API_DocsEntry | API_StoryEntry; // | API_TestEntry;
 export type API_HashEntry =
   | API_RootEntry
@@ -67,7 +62,6 @@ export type API_HashEntry =
   | API_ComponentEntry
   | API_DocsEntry
   | API_StoryEntry;
-// | API_TestEntry;
 
 /**
  * The `IndexHash` is our manager-side representation of the `StoryIndex`. We create entries in the
diff --git a/code/core/src/types/modules/composedStory.ts b/code/core/src/types/modules/composedStory.ts
index 9000155f8886..00cd9d4ff79f 100644
--- a/code/core/src/types/modules/composedStory.ts
+++ b/code/core/src/types/modules/composedStory.ts
@@ -44,10 +44,7 @@ export type ComposedStoryFn<
   args: TArgs;
   id: StoryId;
   play?: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
-  run: (
-    context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>,
-    test?: (context: StoryContext<TRenderer>) => void | Promise<void>
-  ) => Promise<void>;
+  run: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
   load: () => Promise<void>;
   storyName: string;
   parameters: Parameters;
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index ef27e564a5f6..b75be780832c 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -70,23 +70,18 @@ export interface BaseIndexEntry {
   title: ComponentTitle;
   tags?: Tag[];
   importPath: Path;
+  parentId: StoryId;
 }
 export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
 };
 
-export type TestIndexEntry = BaseIndexEntry & {
-  type: 'test';
-  parentId: StoryId;
-};
-
 export type DocsIndexEntry = BaseIndexEntry & {
   storiesImports: Path[];
   type: 'docs';
 };
 
-// TODO: [test-syntax] add this once we start working on UI for tests
-export type IndexEntry = StoryIndexEntry | DocsIndexEntry; //| TestIndexEntry;
+export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
 
 export interface IndexInputStats {
   loaders?: boolean;
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index 93ffc215e669..3b5d204dfc9b 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -18,13 +18,11 @@ import type {
   StoryAnnotations,
   StoryContext,
   StoryContextForEnhancers,
-  StoryFn,
   StoryId,
   StoryIdentifier,
   StoryName,
   StrictArgTypes,
   StrictGlobalTypes,
-  TestFunction,
 } from './csf';
 
 // Store Types
@@ -90,15 +88,11 @@ export type NormalizedStoryAnnotations<TRenderer extends Renderer = Renderer> =
   userStoryFn?: ArgsStoryFn<TRenderer>;
   decorators?: DecoratorFunction<TRenderer>[];
   loaders?: LoaderFunction<TRenderer>[];
-  testFunction?: TestFunction<TRenderer, TRenderer['args']>;
 };
 
 export type CSFFile<TRenderer extends Renderer = Renderer> = {
   meta: NormalizedComponentAnnotations<TRenderer>;
-  stories: Record<
-    StoryId,
-    NormalizedStoryAnnotations<TRenderer> & { testFunction?: TestFunction<TRenderer> }
-  >;
+  stories: Record<StoryId, NormalizedStoryAnnotations<TRenderer>>;
   projectAnnotations?: NormalizedProjectAnnotations<TRenderer>;
   moduleExports: ModuleExports;
 };
@@ -119,7 +113,6 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
     storyGlobals: Globals;
-    testFunction?: TestFunction<TRenderer, TRenderer['args']>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<
diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts
index ffceec83cb93..acda308d5967 100644
--- a/code/renderers/server/src/preset.ts
+++ b/code/renderers/server/src/preset.ts
@@ -30,7 +30,6 @@ export const experimental_indexers: PresetProperty<'experimental_indexers'> = (
           name: story.name,
           title: content.title,
           tags,
-          // TODO: [test-syntax] Does this need change now with story tests?
           type: 'story',
         };
       });

From 0358dcca470191e335b03d28a76c0dfeab785493 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 26 Aug 2025 09:46:18 +0200
Subject: [PATCH 063/130] Remove some todos

---
 code/core/src/core-server/utils/StoryIndexGenerator.ts |  4 ----
 code/core/src/csf-tools/CsfFile.ts                     |  2 --
 code/core/src/csf/csf-factories.ts                     |  4 ----
 code/core/src/types/modules/indexer.ts                 | 10 ++--------
 .../react/template/stories/test-fn.stories.tsx         |  9 ++++++---
 5 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 610137d2531d..4de4b1cb73f9 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -19,7 +19,6 @@ import type {
   StoryIndexEntry,
   StorybookConfigRaw,
   Tag,
-  TestIndexEntry,
 } from 'storybook/internal/types';
 
 import { findUp } from 'find-up';
@@ -35,9 +34,6 @@ import { IndexingError, MultipleIndexingError } from './IndexingError';
 import { autoName } from './autoName';
 import { type IndexStatsSummary, addStats } from './summarizeStats';
 
-// TODO: [test-syntax] replace line 42 with this once we start working on UI for tests
-// type StoryIndexEntryWithExtra = (StoryIndexEntry | TestIndexEntry) & {
-
 // Extended type to keep track of the csf meta id so we know the component id when referencing docs in `extractDocs`
 type StoryIndexEntryWithExtra = StoryIndexEntry & {
   extra: { metaId?: string; stats: IndexInputStats };
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index fc0623e31a18..8772bbc87a93 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -922,8 +922,6 @@ export class CsfFile {
           index.push({
             ...storyInput,
             type: 'story',
-            // TODO: [test-syntax] enable this once we start working on UI for tests
-            // type: 'test',
             // @ts-expect-error TODO: discuss this later
             parentId: story.id,
             parentName: story.name,
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index 2aa22739d632..bc9474dc6a2c 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -111,10 +111,6 @@ function defineMeta<
     _tag: 'Meta',
     input,
     preview,
-    get composed() {
-      // TODO: [test-syntax] Kasper check this later
-      return composeConfigs([preview.input, input]);
-    },
     // @ts-expect-error hard
     story(
       story: StoryAnnotations<TRenderer, TRenderer['args']> | (() => TRenderer['storyResult']) = {}
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index b75be780832c..87c0293c97cb 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -70,7 +70,7 @@ export interface BaseIndexEntry {
   title: ComponentTitle;
   tags?: Tag[];
   importPath: Path;
-  parentId: StoryId;
+  parentId?: StoryId;
 }
 export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
@@ -134,11 +134,6 @@ export type StoryIndexInput = BaseIndexInput & {
   type: 'story';
 };
 
-export type TestIndexInput = BaseIndexInput & {
-  type: 'test';
-  parentId: StoryId;
-};
-
 /** The input for indexing a docs entry. */
 export type DocsIndexInput = BaseIndexInput & {
   type: 'docs';
@@ -146,8 +141,7 @@ export type DocsIndexInput = BaseIndexInput & {
   storiesImports?: Path[];
 };
 
-// TODO: [test-syntax] add this once we start working on UI for tests
-export type IndexInput = StoryIndexInput | DocsIndexInput; // | TestIndexInput;
+export type IndexInput = StoryIndexInput | DocsIndexInput;
 
 export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags'> {
   kind: ComponentTitle;
diff --git a/code/renderers/react/template/stories/test-fn.stories.tsx b/code/renderers/react/template/stories/test-fn.stories.tsx
index 43b0254633d4..39468654d3db 100644
--- a/code/renderers/react/template/stories/test-fn.stories.tsx
+++ b/code/renderers/react/template/stories/test-fn.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { TestFunction } from 'storybook/internal/types';
+import type { StoryContext } from '@storybook/react';
 
 import { expect, fn } from 'storybook/test';
 
@@ -28,10 +28,13 @@ Default.test('simple', async ({ canvas, userEvent, args }) => {
   await expect(args.onClick).toHaveBeenCalled();
 });
 
-const doTest: TestFunction = async ({ canvas, userEvent, args }) => {
+const doTest = async ({
+  canvas,
+  userEvent,
+  args,
+}: StoryContext<React.ComponentProps<'button'>>) => {
   const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
-  // @ts-expect-error TODO: [test-syntax] Fix later with Kasper
   await expect(args.onClick).toHaveBeenCalled();
 };
 Default.test('referring to function in file', doTest);

From 620663c8c85455d76f83db90349a05ab3221a81e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 26 Aug 2025 09:47:56 +0200
Subject: [PATCH 064/130] Rename

---
 .../preview-api/modules/store/csf/processCSFFile.ts    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index 3f76329936d4..bc0d449174f0 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -68,14 +68,14 @@ export function processCSFFile<TRenderer extends Renderer>(
 
         // if the story has tests, we need to add those to the csfFile
 
-        getStoryChildren(story).forEach((story) => {
-          const testName = story.input.name!;
-          const testId = toTestId(storyMeta.id, testName);
+        getStoryChildren(story).forEach((child) => {
+          const name = child.input.name!;
+          const childId = toTestId(storyMeta.id, name);
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
-          storyTest.input.parameters.__id = testId;
+          storyTest.input.parameters.__id = childId;
 
-          csfFile.stories[testId] = normalizeStory(testName, story.input as any, meta);
+          csfFile.stories[childId] = normalizeStory(name, child.input as any, meta);
         });
       }
     });

From 91a0149e0ba37219da3b16125e05e95e4d94908a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 26 Aug 2025 09:54:45 +0200
Subject: [PATCH 065/130] Fix

---
 code/core/src/preview-api/modules/store/csf/processCSFFile.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
index bc0d449174f0..c9b4dcec177a 100644
--- a/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
+++ b/code/core/src/preview-api/modules/store/csf/processCSFFile.ts
@@ -71,9 +71,11 @@ export function processCSFFile<TRenderer extends Renderer>(
         getStoryChildren(story).forEach((child) => {
           const name = child.input.name!;
           const childId = toTestId(storyMeta.id, name);
+
+          child.input.parameters ??= {};
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore We provide the __id parameter because we don't want normalizeStory to calculate the id
-          storyTest.input.parameters.__id = childId;
+          child.input.parameters.__id = childId;
 
           csfFile.stories[childId] = normalizeStory(name, child.input as any, meta);
         });

From 68603a9e60e378c03a2ddc8d5ccebc3a96b2d919 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 26 Aug 2025 14:40:01 +0200
Subject: [PATCH 066/130] fix

---
 code/core/src/csf/csf-factories.ts                         | 6 +++---
 code/core/src/preview-api/modules/store/StoryStore.test.ts | 4 ----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index bc9474dc6a2c..c4dd5550df4a 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -198,14 +198,14 @@ function defineStory<
     test(
       name: string,
       overridesOrTestFn: StoryAnnotations<TRenderer, TRenderer['args']> | TestFunction<TRenderer>,
-      testFn?: TestFunction<TRenderer>
+      testFn?: TestFunction<TRenderer, TRenderer['args']>
     ): void {
       const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
       const testFunction = typeof overridesOrTestFn !== 'function' ? testFn! : overridesOrTestFn;
 
       const play =
-        mountDestructured(this.play) || mountDestructured(testFn)
-          ? async ({ mount, context }: StoryContext<TRenderer>) => {
+        mountDestructured(this.play) || mountDestructured(testFunction)
+          ? async ({ context }: StoryContext<TRenderer>) => {
               await this.play?.(context);
               await testFunction(context);
             }
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index 6eb405bb68db..e8c91ee2211d 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -342,7 +342,6 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
-            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
@@ -535,7 +534,6 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
-            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
@@ -601,7 +599,6 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
-            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component One",
             "usesMount": false,
@@ -667,7 +664,6 @@ describe('StoryStore', () => {
               "dev",
               "test",
             ],
-            "testFunction": undefined,
             "testingLibraryRender": undefined,
             "title": "Component Two",
             "usesMount": false,

From a444184d19ef4c7ecef6ecd1685953f39b354f54 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 26 Aug 2025 17:17:06 +0200
Subject: [PATCH 067/130] fix tests and revamp test filtering

---
 .../vitest/src/node/test-manager.test.ts      | 62 ++++++++++++++++++
 code/addons/vitest/src/node/vitest-manager.ts | 63 ++++++++++++-------
 .../core-server/utils/StoryIndexGenerator.ts  | 23 +------
 code/core/src/csf-tools/CsfFile.ts            |  9 +--
 code/core/src/csf/csf-factories.ts            |  3 +-
 code/core/src/types/modules/indexer.ts        |  5 +-
 6 files changed, 112 insertions(+), 53 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index ed353b0a0312..ee959c42e96e 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -116,6 +116,23 @@ global.fetch = vi.fn().mockResolvedValue({
             importPath: 'path/to/another/file',
             tags: ['test'],
           },
+          'parent--story': {
+            type: 'story',
+            id: 'parent--story',
+            name: 'Parent story',
+            title: 'parent/story',
+            importPath: 'path/to/parent/file',
+            tags: ['test'],
+          },
+          'parent--story:test': {
+            type: 'story',
+            id: 'parent--story:test',
+            name: 'Test name',
+            title: 'parent/story',
+            parent: 'parent--story',
+            importPath: 'path/to/parent/file',
+            tags: ['test', 'test-fn'],
+          },
         },
       } as StoryIndex)
     ),
@@ -187,6 +204,51 @@ describe('TestManager', () => {
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
+  it('should trigger a single story render test', async () => {
+    vitest.globTestSpecifications.mockImplementation(() => tests);
+    const testManager = await TestManager.start(options);
+
+    await testManager.handleTriggerRunEvent({
+      type: 'TRIGGER_RUN',
+      payload: {
+        storyIds: ['another--one'],
+        triggeredBy: 'global',
+      },
+    });
+    // regex should be exact match of the story name
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+  });
+
+  it('should trigger a single story test', async () => {
+    vitest.globTestSpecifications.mockImplementation(() => tests);
+    const testManager = await TestManager.start(options);
+
+    await testManager.handleTriggerRunEvent({
+      type: 'TRIGGER_RUN',
+      payload: {
+        storyIds: ['parent--story:test'],
+        triggeredBy: 'global',
+      },
+    });
+    // regex should be Parent Story Name + Test Name
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parent story Test name$/);
+  });
+
+  it('should trigger all tests of a story', async () => {
+    vitest.globTestSpecifications.mockImplementation(() => tests);
+    const testManager = await TestManager.start(options);
+
+    await testManager.handleTriggerRunEvent({
+      type: 'TRIGGER_RUN',
+      payload: {
+        storyIds: ['parent--story'],
+        triggeredBy: 'global',
+      },
+    });
+    // regex should be parent story name with no spaces in between plus a space at the end
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory /);
+  });
+
   it('should restart Vitest before a test run if coverage is enabled', async () => {
     const testManager = await TestManager.start(options);
     expect(createVitest).toHaveBeenCalledTimes(1);
diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index 4cf4bb6d6e30..7b73691a261b 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -169,7 +169,7 @@ export class VitestManager {
     });
   }
 
-  private async fetchStories(requestStoryIds?: string[]) {
+  private async fetchStories(requestStoryIds?: string[]): Promise<StoryIndexEntry[]> {
     const indexUrl = this.testManager.store.getState().indexUrl;
     if (!indexUrl) {
       throw new Error(
@@ -265,41 +265,60 @@ export class VitestManager {
     await this.cancelCurrentRun();
 
     const testSpecifications = await this.getStorybookTestSpecifications();
-    const stories = await this.fetchStories(runPayload?.storyIds);
+    const allStories = await this.fetchStories();
+
+    const filteredStories = runPayload.storyIds
+      ? allStories.filter((story) => runPayload.storyIds?.includes(story.id))
+      : allStories;
 
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
-      const selectedStory = stories[0];
+      const selectedStory = filteredStories.find((story) => story.id === runPayload.storyIds?.[0]);
+      if (!selectedStory) {
+        throw new Error(`Story ${runPayload.storyIds?.[0]} not found`);
+      }
+
       const storyName = selectedStory.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      // Use case 1: Single story run on a story without tests
-      let regex: RegExp = new RegExp(`^${storyName}$`);
+      let regex: RegExp;
 
-      if (selectedStory.tags?.includes('test-fn')) {
-        // in this case the regex pattern should be the story parentName + story.name
-        // @ts-expect-error TODO: fix this
-        const parentName = selectedStory.parentName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        // Use case 2: Single story run on a specific story test
-        regex = new RegExp(`^${parentName} ${storyName}$`);
-      } else if (selectedStory.tags?.includes('has-tests')) {
-        // Use case 3: "Single" story run on a story with tests
+      const isParentStory = allStories.some((story) => selectedStory.id === story.parent);
+      const hasParentStory = allStories.some((story) => selectedStory.parent === story.id);
+
+      if (isParentStory) {
+        // Use case 1: "Single" story run on a story with tests
         // -> run all tests of that story, as storyName is a describe block
         /**
-         * TODO: [test-syntax] discuss. The vitest transformation keeps the export name as is, e.g.
-         * "PrimaryButton", while the storybook sidebar changes the name to "Primary Button". That's
-         * why we need to remove spaces from the story name, to match the test name. If we were to
-         * also beautify the test name, doing a regex wouldn't be precise because there could be two
-         * describes, for instance: "Primary Button" and "Primary Button Mobile" and both would
-         * match. The fact that there are no spaces in the test name is what makes "PrimaryButton"
-         * and "PrimaryButtonMobile" worth well in the regex.
+         * The vitest transformation keeps the export name as is, e.g. "PrimaryButton", while the
+         * storybook sidebar changes the name to "Primary Button". That's why we need to remove
+         * spaces from the story name, to match the test name. If we were to also beautify the test
+         * name, doing a regex wouldn't be precise because there could be two describes, for
+         * instance: "Primary Button" and "Primary Button Mobile" and both would match. The fact
+         * that there are no spaces in the test name is what makes "PrimaryButton" and
+         * "PrimaryButtonMobile" work well in the regex. As it turns out, this limitation is also
+         * present in the Vitest VSCode extension and the issue would occur with normal vitest tests
+         * as well.
          */
-        regex = new RegExp(`^${storyName.replace(/\s+/g, '')} `);
+        regex = new RegExp(`^${storyName.replace(/\s+/g, '')} `); // the extra space is intentional!
+      } else if (hasParentStory) {
+        // Use case 2: Single story run on a specific story test
+        // in this case the regex pattern should be the story parentName + story.name
+        const parentStory = allStories.find((story) => story.id === selectedStory.parent);
+        if (!parentStory) {
+          throw new Error(`Parent story not found for story ${selectedStory.id}`);
+        }
+
+        const parentName = parentStory.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        regex = new RegExp(`^${parentName} ${storyName}$`);
+      } else {
+        // Use case 3: Single story run on a story without tests
+        regex = new RegExp(`^${storyName}$`);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
 
     const { filteredTestSpecifications, filteredStoryIds } = this.filterTestSpecifications(
       testSpecifications,
-      stories
+      filteredStories
     );
 
     this.testManager.store.setState((s) => ({
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 4de4b1cb73f9..9285a29527f9 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -439,7 +439,8 @@ export class StoryIndexGenerator {
         const id = input.__id ?? toId(input.metaId ?? title, storyNameFromExport(input.exportName));
         const tags = combineTags(...projectTags, ...(input.tags ?? []));
 
-        const commonMetadata = {
+        return {
+          type: 'story',
           id,
           extra: {
             metaId: input.metaId,
@@ -450,25 +451,7 @@ export class StoryIndexGenerator {
           importPath,
           componentPath,
           tags,
-        };
-
-        // TODO: [test-syntax] Enable this once we start working on UI for tests
-        if (input.tags?.includes('has-tests')) {
-          // if (input.type === 'test') {
-          return {
-            // type: 'test',
-            type: 'story',
-            // @ts-expect-error TODO: discuss this
-            parentId: input.parentId,
-            // @ts-expect-error TODO: discuss this
-            parentName: input.parentName,
-            ...commonMetadata,
-          };
-        }
-
-        return {
-          type: 'story',
-          ...commonMetadata,
+          ...(input.type === 'story' && input.parent ? { parent: input.parent } : {}),
         };
       });
 
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 8772bbc87a93..5f261ef925bb 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -906,11 +906,6 @@ export class CsfFile {
         __stats: story.__stats,
       };
 
-      if (this._storyTests[exportName]) {
-        // TODO: discuss this later
-        storyInput.tags = [...(storyInput.tags || []), 'has-tests'];
-      }
-
       index.push({
         ...storyInput,
         type: 'story',
@@ -922,9 +917,7 @@ export class CsfFile {
           index.push({
             ...storyInput,
             type: 'story',
-            // @ts-expect-error TODO: discuss this later
-            parentId: story.id,
-            parentName: story.name,
+            parent: story.id,
             name: test.name,
             tags: [...storyInput.tags, 'test-fn'],
             __id: test.id,
diff --git a/code/core/src/csf/csf-factories.ts b/code/core/src/csf/csf-factories.ts
index c4dd5550df4a..22af4a85f64c 100644
--- a/code/core/src/csf/csf-factories.ts
+++ b/code/core/src/csf/csf-factories.ts
@@ -11,8 +11,6 @@ import type {
   TestFunction,
 } from 'storybook/internal/types';
 
-import { mountDestructured } from 'core/src/preview-api/modules/preview-web/render/mount-utils';
-
 import {
   combineParameters,
   composeConfigs,
@@ -20,6 +18,7 @@ import {
   normalizeArrays,
   normalizeProjectAnnotations,
 } from '../preview-api/index';
+import { mountDestructured } from '../preview-api/modules/preview-web/render/mount-utils';
 import { getCoreAnnotations } from './core-annotations';
 
 export interface Preview<TRenderer extends Renderer = Renderer> {
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index 87c0293c97cb..62b4fb5c35b0 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -70,10 +70,11 @@ export interface BaseIndexEntry {
   title: ComponentTitle;
   tags?: Tag[];
   importPath: Path;
-  parentId?: StoryId;
 }
 export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
+  // currently used by story tests
+  parent?: StoryId;
 };
 
 export type DocsIndexEntry = BaseIndexEntry & {
@@ -132,6 +133,8 @@ export type BaseIndexInput = {
 /** The input for indexing a story entry. */
 export type StoryIndexInput = BaseIndexInput & {
   type: 'story';
+  // currently used by story tests
+  parent?: StoryId;
 };
 
 /** The input for indexing a docs entry. */

From 7b564eab1d5cb9e8ff0fb3cf54a71350ee48295e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 21 Aug 2025 14:36:05 +0200
Subject: [PATCH 068/130] Add TestNode for sidebar

---
 .../components/sidebar/IconSymbols.tsx        |  8 +-
 .../components/sidebar/TreeNode.stories.tsx   | 85 +++++++++++++++++-
 .../manager/components/sidebar/TreeNode.tsx   | 86 +++++++++++--------
 3 files changed, 138 insertions(+), 41 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/IconSymbols.tsx b/code/core/src/manager/components/sidebar/IconSymbols.tsx
index acee90d48f19..c916f74bde9d 100644
--- a/code/core/src/manager/components/sidebar/IconSymbols.tsx
+++ b/code/core/src/manager/components/sidebar/IconSymbols.tsx
@@ -29,7 +29,7 @@ export const IconSymbols: FC = () => {
   return (
     <Svg data-chromatic="ignore">
       <symbol id={GROUP_ID}>
-        {/* https://github.com/storybookjs/icons/blob/main/src/icons/Folder.tsx */}
+        {/* https://github.com/storybookjs/icons/blob/main/src/icons/FolderIcon.tsx */}
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -38,7 +38,7 @@ export const IconSymbols: FC = () => {
         />
       </symbol>
       <symbol id={COMPONENT_ID}>
-        {/* https://github.com/storybookjs/icons/blob/main/src/icons/Component.tsx */}
+        {/* https://github.com/storybookjs/icons/blob/main/src/icons/ComponentIcon.tsx */}
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -47,7 +47,7 @@ export const IconSymbols: FC = () => {
         />
       </symbol>
       <symbol id={DOCUMENT_ID}>
-        {/* https://github.com/storybookjs/icons/blob/main/src/icons/Document.tsx */}
+        {/* https://github.com/storybookjs/icons/blob/main/src/icons/DocumentIcon.tsx */}
         <path
           d="M4 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zM4.5 7.5a.5.5 0 000 1h5a.5.5 0 000-1h-5zM4 10.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z"
           fill="currentColor"
@@ -60,7 +60,7 @@ export const IconSymbols: FC = () => {
         />
       </symbol>
       <symbol id={STORY_ID}>
-        {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollow.tsx */}
+        {/* https://github.com/storybookjs/icons/blob/main/src/icons/BookmarkHollowIcon.tsx */}
         <path
           fillRule="evenodd"
           clipRule="evenodd"
diff --git a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
index 448a55a7ba48..5ae907f661aa 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { HighlightStyles } from './HighlightStyles';
 import { IconSymbols } from './IconSymbols';
 import { LeafNodeStyleWrapper } from './Tree';
-import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';
+import { ComponentNode, DocumentNode, GroupNode, StoryNode, TestNode } from './TreeNode';
 
 export default {
   title: 'Sidebar/TreeNode',
@@ -25,7 +25,7 @@ export const Types = () => (
     <ComponentNode>Component</ComponentNode>
     <GroupNode>Group</GroupNode>
     <StoryNode>Story</StoryNode>
-    <StoryNode type="test">Story test</StoryNode>
+    <TestNode>Test</TestNode>
     <DocumentNode docsMode={false}>Document</DocumentNode>
   </>
 );
@@ -92,10 +92,73 @@ export const Nested = () => (
       One
     </GroupNode>
     <StoryNode depth={2}>Two</StoryNode>
+    <TestNode depth={3}>Three</TestNode>
     <ComponentNode isExpandable isExpanded depth={2}>
       Two
     </ComponentNode>
     <StoryNode depth={3}>Three</StoryNode>
+    <TestNode depth={4}>Four</TestNode>
+  </>
+);
+
+export const NestedLongName = () => (
+  <>
+    <DocumentNode docsMode={false} depth={0}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </DocumentNode>
+    <GroupNode isExpandable isExpanded depth={0}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </GroupNode>
+    <GroupNode isExpandable isExpanded depth={1}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </GroupNode>
+    <StoryNode depth={2}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </StoryNode>
+    <TestNode depth={3}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </TestNode>
+    <ComponentNode isExpandable isExpanded depth={2}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </ComponentNode>
+    <StoryNode depth={3}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </StoryNode>
+    <TestNode depth={4}>
+      A very very very very very very very very very very very very very very very very very very
+      very veryvery very very very very very very very very veryvery very very very very very very
+      very very veryvery very very very very very very very very veryvery very very very very very
+      very very very veryvery very very very very very very very very veryvery very very very very
+      very very very very veryvery very very very very very very very very very long name
+    </TestNode>
   </>
 );
 
@@ -138,6 +201,24 @@ export const Selection = () => (
     >
       <StoryNode>Highlighted + Selected story</StoryNode>
     </LeafNodeStyleWrapper>
+    <LeafNodeStyleWrapper
+      data-ref-id="baz"
+      data-item-id="bar"
+      data-nodetype="test"
+      data-selected="false"
+      className="sidebar-item"
+    >
+      <TestNode>Default test</TestNode>
+    </LeafNodeStyleWrapper>
+    <LeafNodeStyleWrapper
+      data-ref-id="baz"
+      data-item-id="bar"
+      data-nodetype="test"
+      data-selected="true"
+      className="sidebar-item"
+    >
+      <TestNode>Selected test</TestNode>
+    </LeafNodeStyleWrapper>
     <LeafNodeStyleWrapper
       data-ref-id="foo"
       data-item-id="baz"
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 408797b2b49a..9213bd9105d7 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -1,7 +1,6 @@
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
-import { transparentize } from 'polished';
 import { styled } from 'storybook/theming';
 
 import { UseSymbol } from './IconSymbols';
@@ -32,6 +31,7 @@ export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'test' | 'gro
       if (type === 'test') {
         return theme.color.green;
       }
+
       return 'currentColor';
     })(),
   })
@@ -61,26 +61,23 @@ const BranchNode = styled.button<{
   paddingBottom: 4,
 }));
 
-const LeafNode = styled.a<{ depth?: number; type?: 'story' | 'test' }>(
-  ({ theme, depth = 0, type }) => ({
-    width: '100%',
-    cursor: 'pointer',
-    color: 'inherit',
-    display: 'flex',
-    gap: 6,
-    flex: 1,
-    alignItems: 'start',
-    // TODO: [test-syntax] Gert hack stuff, should be fixed later
-    paddingLeft: type === 'test' ? `${32 + depth * 18}px` : `${22 + depth * 18}px`,
-    paddingTop: 5,
-    paddingBottom: 4,
-    fontSize: `${theme.typography.size.s2}px`,
-    textDecoration: 'none',
-    overflowWrap: 'break-word',
-    wordWrap: 'break-word',
-    wordBreak: 'break-word',
-  })
-);
+const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({
+  width: '100%',
+  cursor: 'pointer',
+  color: 'inherit',
+  display: 'flex',
+  gap: 6,
+  flex: 1,
+  alignItems: 'start',
+  paddingLeft: `${22 + depth * 18}px`,
+  paddingTop: 5,
+  paddingBottom: 4,
+  fontSize: `${theme.typography.size.s2}px`,
+  textDecoration: 'none',
+  overflowWrap: 'break-word',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+}));
 
 export const RootNode = styled.div(({ theme }) => ({
   display: 'flex',
@@ -157,17 +154,36 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool
   }
 );
 
-// TODO: hack stuff, should be done in a new component
-export const StoryNode: FC<ComponentProps<typeof LeafNode> & { type?: 'story' | 'test' }> =
-  React.memo(function StoryNode({ theme, children, type = 'story', ...props }) {
-    return (
-      <LeafNode tabIndex={-1} type={type} {...props}>
-        <Wrapper>
-          <TypeIcon viewBox="0 0 14 14" width="12" height="12" type={type}>
-            <UseSymbol type={type} />
-          </TypeIcon>
-        </Wrapper>
-        {children}
-      </LeafNode>
-    );
-  });
+export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
+  theme,
+  children,
+  ...props
+}) {
+  return (
+    <LeafNode tabIndex={-1} {...props}>
+      <Wrapper>
+        <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story">
+          <UseSymbol type="story" />
+        </TypeIcon>
+      </Wrapper>
+      {children}
+    </LeafNode>
+  );
+});
+
+export const TestNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function TestNode({
+  theme,
+  children,
+  ...props
+}) {
+  return (
+    <LeafNode tabIndex={-1} {...props}>
+      <Wrapper>
+        <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="test">
+          <UseSymbol type="test" />
+        </TypeIcon>
+      </Wrapper>
+      {children}
+    </LeafNode>
+  );
+});

From 52a3cf3551cc9713d29c65f62ac26d6dc3446c11 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 27 Aug 2025 14:40:28 +0200
Subject: [PATCH 069/130] implement test metrics

---
 .../core-server/utils/StoryIndexGenerator.ts  |   1 +
 .../core-server/utils/summarizeIndex.test.ts  | 107 ++++++++++++++++++
 .../src/core-server/utils/summarizeIndex.ts   |  22 +++-
 3 files changed, 129 insertions(+), 1 deletion(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 9285a29527f9..c65ba53c4794 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -65,6 +65,7 @@ export const AUTODOCS_TAG = 'autodocs';
 export const ATTACHED_MDX_TAG = 'attached-mdx';
 export const UNATTACHED_MDX_TAG = 'unattached-mdx';
 export const PLAY_FN_TAG = 'play-fn';
+export const TEST_FN_TAG = 'test-fn';
 
 /** Was this docs entry generated by a .mdx file? (see discussion below) */
 export function isMdxEntry({ tags }: DocsIndexEntry) {
diff --git a/code/core/src/core-server/utils/summarizeIndex.test.ts b/code/core/src/core-server/utils/summarizeIndex.test.ts
index a486525dbe5d..35d0a4fd178f 100644
--- a/code/core/src/core-server/utils/summarizeIndex.test.ts
+++ b/code/core/src/core-server/utils/summarizeIndex.test.ts
@@ -140,14 +140,17 @@ describe('summarizeIndex', () => {
         "componentCount": 0,
         "exampleDocsCount": 3,
         "exampleStoryCount": 8,
+        "maxTestsPerStory": 0,
         "mdxCount": 0,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 0,
         "pageStoryCount": 0,
         "playStoryCount": 0,
+        "singleTestStoryCount": 0,
         "storyCount": 0,
         "svelteCsfV4Count": 0,
         "svelteCsfV5Count": 0,
+        "testStoryCount": 0,
         "version": 5,
       }
     `);
@@ -199,14 +202,17 @@ describe('summarizeIndex', () => {
         "componentCount": 0,
         "exampleDocsCount": 2,
         "exampleStoryCount": 1,
+        "maxTestsPerStory": 0,
         "mdxCount": 0,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 1,
         "pageStoryCount": 0,
         "playStoryCount": 0,
+        "singleTestStoryCount": 0,
         "storyCount": 0,
         "svelteCsfV4Count": 0,
         "svelteCsfV5Count": 0,
+        "testStoryCount": 0,
         "version": 5,
       }
     `);
@@ -256,14 +262,106 @@ describe('summarizeIndex', () => {
         "componentCount": 3,
         "exampleDocsCount": 0,
         "exampleStoryCount": 0,
+        "maxTestsPerStory": 0,
         "mdxCount": 0,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 0,
         "pageStoryCount": 0,
         "playStoryCount": 0,
+        "singleTestStoryCount": 0,
         "storyCount": 4,
         "svelteCsfV4Count": 1,
         "svelteCsfV5Count": 1,
+        "testStoryCount": 0,
+        "version": 5,
+      }
+    `);
+  });
+  it('test function', () => {
+    expect(
+      summarizeIndex({
+        v: 5,
+        entries: {
+          'component-testing-test-fn--default': {
+            type: 'story',
+            id: 'component-testing-test-fn--default',
+            name: 'Default',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag'],
+          },
+          'component-testing-test-fn--default:simple': {
+            type: 'story',
+            id: 'component-testing-test-fn--default:simple',
+            name: 'simple',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag', 'test-fn'],
+            parent: 'component-testing-test-fn--default',
+          },
+          'component-testing-test-fn--default:referring-to-function-in-file': {
+            type: 'story',
+            id: 'component-testing-test-fn--default:referring-to-function-in-file',
+            name: 'referring to function in file',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag', 'test-fn'],
+            parent: 'component-testing-test-fn--default',
+          },
+          'component-testing-test-fn--default:with-overrides': {
+            type: 'story',
+            id: 'component-testing-test-fn--default:with-overrides',
+            name: 'with overrides',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag', 'test-fn'],
+            parent: 'component-testing-test-fn--default',
+          },
+          'component-testing-test-fn--default:with-play-function': {
+            type: 'story',
+            id: 'component-testing-test-fn--default:with-play-function',
+            name: 'with play function',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag', 'test-fn'],
+            parent: 'component-testing-test-fn--default',
+          },
+          'component-testing-test-fn--default-extended': {
+            type: 'story',
+            id: 'component-testing-test-fn--default-extended',
+            name: 'Default Extended',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag'],
+          },
+          'component-testing-test-fn--default-extended:should-have-extended-args': {
+            type: 'story',
+            id: 'component-testing-test-fn--default-extended:should-have-extended-args',
+            name: 'should have extended args',
+            title: 'component-testing/test-fn',
+            importPath: './core/src/component-testing/components/test-fn.stories.tsx',
+            tags: ['dev', 'test', 'vitest', 'some-tag', 'test-fn'],
+            parent: 'component-testing-test-fn--default-extended',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      {
+        "autodocsCount": 0,
+        "componentCount": 1,
+        "exampleDocsCount": 0,
+        "exampleStoryCount": 0,
+        "maxTestsPerStory": 4,
+        "mdxCount": 0,
+        "onboardingDocsCount": 0,
+        "onboardingStoryCount": 0,
+        "pageStoryCount": 0,
+        "playStoryCount": 0,
+        "singleTestStoryCount": 1,
+        "storyCount": 7,
+        "svelteCsfV4Count": 0,
+        "svelteCsfV5Count": 0,
+        "testStoryCount": 5,
         "version": 5,
       }
     `);
@@ -314,14 +412,17 @@ describe('summarizeIndex', () => {
         "componentCount": 1,
         "exampleDocsCount": 0,
         "exampleStoryCount": 2,
+        "maxTestsPerStory": 0,
         "mdxCount": 0,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 0,
         "pageStoryCount": 1,
         "playStoryCount": 1,
+        "singleTestStoryCount": 0,
         "storyCount": 1,
         "svelteCsfV4Count": 0,
         "svelteCsfV5Count": 0,
+        "testStoryCount": 0,
         "version": 5,
       }
     `);
@@ -373,14 +474,17 @@ describe('summarizeIndex', () => {
         "componentCount": 0,
         "exampleDocsCount": 1,
         "exampleStoryCount": 2,
+        "maxTestsPerStory": 0,
         "mdxCount": 0,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 0,
         "pageStoryCount": 0,
         "playStoryCount": 0,
+        "singleTestStoryCount": 0,
         "storyCount": 0,
         "svelteCsfV4Count": 0,
         "svelteCsfV5Count": 0,
+        "testStoryCount": 0,
         "version": 5,
       }
     `);
@@ -425,14 +529,17 @@ describe('summarizeIndex', () => {
         "componentCount": 0,
         "exampleDocsCount": 1,
         "exampleStoryCount": 0,
+        "maxTestsPerStory": 0,
         "mdxCount": 2,
         "onboardingDocsCount": 0,
         "onboardingStoryCount": 0,
         "pageStoryCount": 0,
         "playStoryCount": 0,
+        "singleTestStoryCount": 0,
         "storyCount": 0,
         "svelteCsfV4Count": 0,
         "svelteCsfV5Count": 0,
+        "testStoryCount": 0,
         "version": 5,
       }
     `);
diff --git a/code/core/src/core-server/utils/summarizeIndex.ts b/code/core/src/core-server/utils/summarizeIndex.ts
index b81a29c1e04b..5e6520323c78 100644
--- a/code/core/src/core-server/utils/summarizeIndex.ts
+++ b/code/core/src/core-server/utils/summarizeIndex.ts
@@ -1,7 +1,7 @@
 import { isExampleStoryId } from 'storybook/internal/telemetry';
 import type { IndexEntry, StoryIndex } from 'storybook/internal/types';
 
-import { AUTODOCS_TAG, PLAY_FN_TAG, isMdxEntry } from './StoryIndexGenerator';
+import { AUTODOCS_TAG, PLAY_FN_TAG, TEST_FN_TAG, isMdxEntry } from './StoryIndexGenerator';
 
 const PAGE_REGEX = /(page|screen)/i;
 const SVELTE_CSF_TAG = 'svelte-csf';
@@ -34,10 +34,12 @@ export function summarizeIndex(storyIndex: StoryIndex) {
   let exampleDocsCount = 0;
   let pageStoryCount = 0;
   let playStoryCount = 0;
+  let testStoryCount = 0;
   let autodocsCount = 0;
   let mdxCount = 0;
   let svelteCsfV4Count = 0;
   let svelteCsfV5Count = 0;
+  const testsPerParentStory = new Map<string, number>();
   Object.values(storyIndex.entries).forEach((entry) => {
     if (isCLIExampleEntry(entry)) {
       if (entry.type === 'story') {
@@ -64,6 +66,10 @@ export function summarizeIndex(storyIndex: StoryIndex) {
       if (entry.tags?.includes(PLAY_FN_TAG)) {
         playStoryCount += 1;
       }
+      if (entry.tags?.includes(TEST_FN_TAG) && entry.parent) {
+        testStoryCount += 1;
+        testsPerParentStory.set(entry.parent, (testsPerParentStory.get(entry.parent) ?? 0) + 1);
+      }
       if (entry.tags?.includes('svelte-csf-v4')) {
         svelteCsfV4Count += 1;
       } else if (entry.tags?.includes('svelte-csf-v5')) {
@@ -78,11 +84,25 @@ export function summarizeIndex(storyIndex: StoryIndex) {
     }
   });
   const componentCount = componentTitles.size;
+  let maxTestsPerStory = 0;
+  let singleTestStoryCount = 0;
+  testsPerParentStory.forEach((count) => {
+    if (count > maxTestsPerStory) {
+      maxTestsPerStory = count;
+    }
+    if (count === 1) {
+      singleTestStoryCount += 1;
+    }
+  });
+
   return {
     storyCount,
     componentCount,
     pageStoryCount,
     playStoryCount,
+    testStoryCount,
+    maxTestsPerStory,
+    singleTestStoryCount,
     autodocsCount,
     mdxCount,
     exampleStoryCount,

From 5c6ef7f85099c67376aa9bf2367c82c1b098ec78 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 15:26:26 +0200
Subject: [PATCH 070/130] Some cleanup

---
 code/core/src/csf-tools/CsfFile.ts                     | 10 +++++-----
 code/core/src/csf/story.ts                             |  1 -
 .../modules/preview-web/PreviewWithSelection.tsx       |  3 ---
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 5f261ef925bb..46852a142fe7 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -180,7 +180,7 @@ export class NoMetaError extends Error {
     const msg = message.trim();
     super(dedent`
       CSF: ${msg} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
@@ -192,7 +192,7 @@ export class MultipleMetaError extends Error {
     const msg = `${message} ${formatLocation(ast, fileName)}`.trim();
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
@@ -204,7 +204,7 @@ export class MixedFactoryError extends Error {
     const msg = `${message} ${formatLocation(ast, fileName)}`.trim();
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
@@ -216,7 +216,7 @@ export class BadMetaError extends Error {
     const msg = ``.trim();
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
-      
+
       More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
@@ -731,7 +731,7 @@ export class CsfFile {
             throw new Error(dedent`
               Unexpected \`storiesOf\` usage: ${formatLocation(node, self._options.fileName)}.
 
-              SB8 does not support \`storiesOf\`. 
+              SB8 does not support \`storiesOf\`.
             `);
           }
           if (
diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts
index 094da151d8fd..0a128a1670a2 100644
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@@ -2,7 +2,6 @@ import type { RemoveIndexSignature, Simplify, UnionToIntersection } from 'type-f
 
 import type { SBScalarType, SBType } from './SBType';
 import type { CoreTypes } from './core-annotations';
-import type { Story } from './csf-factories';
 
 export * from './SBType';
 export type StoryId = string;
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
index e6ef1c589ec1..2036afd75ab3 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
@@ -280,9 +280,6 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
     }
 
     const { selection } = this.selectionStore;
-    // Protected function, shouldn't be possible
-
-    // Protected function, shouldn't be possible
 
     if (!selection) {
       throw new Error('Cannot call renderSelection as no selection was made');

From d509fc3139c6a001feeb6bbb2cf13e7a7cae953a Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 15:35:27 +0200
Subject: [PATCH 071/130] Fix types, avoid any

---
 code/core/src/manager-api/lib/stories.ts   | 47 +++++++++++-----------
 code/core/src/types/modules/api-stories.ts |  2 +-
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 5b21256dc0ec..9aafca8f269e 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -5,6 +5,7 @@ import type {
   API_GroupEntry,
   API_HashEntry,
   API_IndexHash,
+  API_PreparedIndexEntry,
   API_PreparedStoryIndex,
   API_Provider,
   API_RootEntry,
@@ -70,7 +71,7 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = (
           ...base,
         };
       } else {
-        const { argTypes, args, initialArgs }: any = story;
+        const { argTypes, args, initialArgs } = story;
         acc[id] = {
           type: 'story',
           ...base,
@@ -112,7 +113,7 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
   return {
     v: 4,
     entries: Object.values(index.stories).reduce(
-      (acc, entry: any) => {
+      (acc, entry) => {
         let type: IndexEntry['type'] = 'story';
         if (
           entry.parameters?.docsOnly ||
@@ -124,7 +125,7 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
           type,
           ...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
           ...entry,
-        };
+        } as API_PreparedIndexEntry;
 
         // @ts-expect-error (we're removing something that should not be there)
         delete acc[entry.id].story;
@@ -172,7 +173,7 @@ type ToStoriesHashOptions = {
 export const transformStoryIndexToStoriesHash = (
   input: API_PreparedStoryIndex | StoryIndexV2 | StoryIndexV3,
   { provider, docsOptions, filters, allStatuses }: ToStoriesHashOptions
-): API_IndexHash | any => {
+): API_IndexHash => {
   if (!input.v) {
     throw new Error('Composition: Missing stories.json version');
   }
@@ -183,7 +184,7 @@ export const transformStoryIndexToStoriesHash = (
   index = index.v === 4 ? transformStoryIndexV4toV5(index as any) : index;
   index = index as API_PreparedStoryIndex;
 
-  const entryValues = Object.values(index.entries).filter((entry: any) => {
+  const entryValues = Object.values(index.entries).filter((entry) => {
     let result = true;
 
     // All stories with a failing status should always show up, regardless of the applied filters
@@ -203,11 +204,11 @@ export const transformStoryIndexToStoriesHash = (
   });
 
   const { sidebar = {} } = provider.getConfig();
-  const { showRoots, collapsedRoots = [], renderLabel }: any = sidebar;
+  const { showRoots, collapsedRoots = [], renderLabel } = sidebar;
 
   const setShowRoots = typeof showRoots !== 'undefined';
 
-  const storiesHashOutOfOrder = entryValues.reduce((acc: any, item: any) => {
+  const storiesHashOutOfOrder = entryValues.reduce((acc, item) => {
     if (docsOptions.docsMode && item.type !== 'docs') {
       return acc;
     }
@@ -223,7 +224,7 @@ export const transformStoryIndexToStoriesHash = (
       const parent = idx > 0 && list[idx - 1];
       const id = sanitize(parent ? `${parent}-${name}` : name!);
 
-      if (name.trim() === '') {
+      if (name!.trim() === '') {
         throw new Error(dedent`Invalid title ${title} ending in slash.`);
       }
 
@@ -231,7 +232,7 @@ export const transformStoryIndexToStoriesHash = (
         throw new Error(
           dedent`
           Invalid part '${name}', leading to id === parentId ('${id}'), inside title '${title}'
-          
+
           Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
           `
         );
@@ -241,7 +242,7 @@ export const transformStoryIndexToStoriesHash = (
     }, [] as string[]);
 
     // Now, let's add an entry to the hash for each path/name pair
-    paths.forEach((id: any, idx: any) => {
+    paths.forEach((id, idx) => {
       // The child is the next path, OR the story/docs entry itself
       const childId = paths[idx + 1] || item.id;
 
@@ -296,7 +297,6 @@ export const transformStoryIndexToStoriesHash = (
 
     // Finally add an entry for the docs/story itself
     acc[item.id] = {
-      type: 'story',
       tags: [],
       ...item,
       depth: paths.length,
@@ -309,7 +309,7 @@ export const transformStoryIndexToStoriesHash = (
   }, {} as API_IndexHash);
 
   // This function adds a "root" or "orphan" and all of its descendents to the hash.
-  function addItem(acc: API_IndexHash | any, item: API_HashEntry | any) {
+  function addItem(acc: API_IndexHash, item: API_HashEntry) {
     // If we were already inserted as part of a group, that's great.
     if (acc[item.id]) {
       return acc;
@@ -320,25 +320,26 @@ export const transformStoryIndexToStoriesHash = (
     // and compute tags from the children put in the accumulator afterwards, once
     // they're all known and we can compute a sound intersection.
     if (item.type === 'root' || item.type === 'group' || item.type === 'component') {
-      item.children.forEach((childId: any) => addItem(acc, storiesHashOutOfOrder[childId]));
-
-      item.tags = item.children.reduce((currentTags: Tag[] | null, childId: any): Tag[] => {
-        const child = acc[childId];
-
-        // On the first child, we have nothing to intersect against so we use it as a source of data.
-        return currentTags === null ? child.tags : intersect(currentTags, child.tags);
-      }, null);
+      item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
+
+      item.tags =
+        item.children.reduce((currentTags: Tag[] | null, childId): Tag[] => {
+          // On the first child, we have nothing to intersect against so we use it as a source of data.
+          return currentTags === null
+            ? acc[childId].tags
+            : intersect(currentTags, acc[childId].tags);
+        }, null) || [];
     }
     return acc;
   }
 
   // We'll do two passes over the data, adding all the orphans, then all the roots
   const orphanHash = Object.values(storiesHashOutOfOrder)
-    .filter((i: any) => i.type !== 'root' && !i.parent)
-    .reduce(addItem, {});
+    .filter((i) => i.type !== 'root' && !i.parent)
+    .reduce((acc, item) => addItem(acc, item), {} as API_IndexHash);
 
   return Object.values(storiesHashOutOfOrder)
-    .filter((i: any) => i.type === 'root')
+    .filter((i) => i.type === 'root')
     .reduce(addItem, orphanHash);
 };
 
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 9bbd797145b7..35f2868e70f6 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -9,7 +9,7 @@ export interface API_BaseEntry {
   name: string;
   tags: Tag[];
   refId?: string;
-  renderLabel?: (item: API_BaseEntry, api: any) => any;
+  renderLabel?: (item: API_HashEntry, api: any) => any;
 }
 
 export interface API_RootEntry extends API_BaseEntry {

From 05e57e6be82711a11b9f7c5f5c3a19c64b931834 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 15:42:04 +0200
Subject: [PATCH 072/130] Add missing deps

---
 code/core/src/manager/components/sidebar/Refs.tsx | 2 +-
 code/core/src/manager/components/sidebar/Tree.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/Refs.tsx b/code/core/src/manager/components/sidebar/Refs.tsx
index 6b81cf531492..cb70f8ea7826 100644
--- a/code/core/src/manager/components/sidebar/Refs.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.tsx
@@ -117,7 +117,7 @@ export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
 
   const setHighlightedItemId = useCallback(
     (itemId: string) => setHighlighted({ itemId, refId }),
-    [setHighlighted]
+    [setHighlighted, refId]
   );
 
   const onSelectStoryId = useCallback(
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 0c4dbeb39efb..4a5322fe412a 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -60,7 +60,7 @@ const Container = styled.div<{ hasOrphans: boolean }>((props) => ({
   marginBottom: 20,
 }));
 
-const CollapseButton = styled.button(({ theme }) => ({
+const CollapseButton = styled.button({
   all: 'unset',
   display: 'flex',
   padding: '0px 8px',
@@ -75,7 +75,7 @@ const CollapseButton = styled.button(({ theme }) => ({
     outline: 'none',
     background: 'var(--tree-node-background-hover)',
   },
-}));
+});
 
 export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   position: 'relative',
@@ -576,7 +576,7 @@ export const Tree = React.memo<{
   // Omit single-story components from the list of nodes.
   const collapsedItems = useMemo(
     () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
-    [singleStoryComponentIds]
+    [data, singleStoryComponentIds]
   );
 
   // Rewrite the dataset to place the child story in place of the component.
@@ -600,7 +600,7 @@ export const Tree = React.memo<{
       },
       { ...data }
     );
-  }, [data]);
+  }, [data, singleStoryComponentIds]);
 
   const ancestry = useMemo(() => {
     return collapsedItems.reduce(

From 9c784326cf8fa127a05ad1c8aa3f333a360b326e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 15:44:51 +0200
Subject: [PATCH 073/130] Render test entries in sidebar and add-in wrapper
 entries for stories with tests

---
 code/core/src/manager-api/lib/stories.ts      |  52 ++++-
 .../components/sidebar/Explorer.stories.tsx   |  15 +-
 .../src/manager/components/sidebar/Tree.tsx   | 179 +++++++++---------
 .../manager/components/sidebar/TreeNode.tsx   |  67 ++++---
 .../sidebar/components/CollapseIcon.tsx       |  18 +-
 .../manager/components/sidebar/mockdata.ts    |  26 ++-
 code/core/src/types/modules/api-stories.ts    |   9 +-
 7 files changed, 220 insertions(+), 146 deletions(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 9aafca8f269e..00cef3aa2154 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -295,12 +295,12 @@ export const transformStoryIndexToStoriesHash = (
       }
     });
 
-    // Finally add an entry for the docs/story itself
+    // Finally add an entry for the docs/story/test itself
     acc[item.id] = {
       tags: [],
       ...item,
       depth: paths.length,
-      parent: paths[paths.length - 1],
+      parent: 'parent' in item ? item.parent : paths[paths.length - 1],
       renderLabel,
       prepared: !!item.parameters,
     } as API_DocsEntry | API_StoryEntry;
@@ -338,9 +338,55 @@ export const transformStoryIndexToStoriesHash = (
     .filter((i) => i.type !== 'root' && !i.parent)
     .reduce((acc, item) => addItem(acc, item), {} as API_IndexHash);
 
-  return Object.values(storiesHashOutOfOrder)
+  const storiesHash = Object.values(storiesHashOutOfOrder)
     .filter((i) => i.type === 'root')
     .reduce(addItem, orphanHash);
+
+  // Add "wrapper" nodes for stories with tests
+  // Because the order of entries matters, we need to insert the wrapper before the story and test
+  return Object.values(storiesHash).reduce((acc, item) => {
+    if (item.type === 'story' && item.tags.includes('test-fn')) {
+      const wrapperId = `${item.parent}__wrapper`;
+      const parentStory = storiesHash[item.parent] as API_StoryEntry;
+      const componentNode = storiesHash[parentStory.parent] as API_ComponentEntry;
+
+      // Update component children to point to wrapper rather than story and tests
+      (acc[componentNode.id] as API_ComponentEntry).children = componentNode.children
+        .filter((id) => id !== item.id && id !== item.parent)
+        .concat(wrapperId);
+
+      // Create the wrapper, but first delete the story and test so that the wrapper is inserted before them
+      if (!acc[wrapperId]) {
+        delete acc[item.id];
+        delete acc[item.parent];
+        acc[wrapperId] = {
+          ...parentStory,
+          type: 'wrapper',
+          id: wrapperId,
+          parent: parentStory.parent,
+          children: [parentStory.id].concat(item.id),
+          depth: parentStory.depth,
+        };
+      }
+
+      // Create or update parent to point to wrapper rather than story
+      acc[item.parent] = {
+        ...parentStory,
+        parent: wrapperId,
+        depth: parentStory.depth + 1,
+      };
+
+      // Create or update the test to point to wrapper rather than story
+      acc[item.id] = {
+        ...item,
+        parent: wrapperId,
+        depth: item.depth + 1,
+      };
+    } else {
+      acc[item.id] = item;
+    }
+    return acc;
+  }, {} as API_IndexHash);
 };
 
 /** Now we need to patch in the existing prepared stories */
diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
index 34adad0a32a0..67f4ba63b948 100644
--- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
@@ -22,11 +22,6 @@ export default {
   ],
 };
 
-const selected = {
-  refId: 'storybook_internal',
-  storyId: 'root-1-child-a2--grandchild-a1-1',
-};
-
 const simple: Record<string, RefType> = {
   storybook_internal: {
     title: undefined,
@@ -81,7 +76,10 @@ const withRefs: Record<string, RefType> = {
 export const Simple = () => (
   <Explorer
     dataset={{ hash: simple, entries: Object.entries(simple) }}
-    selected={selected}
+    selected={{
+      refId: 'storybook_internal',
+      storyId: 'root-1-child-a2--grandchild-a1-1:test1',
+    }}
     isLoading={false}
     isBrowsing
   />
@@ -90,7 +88,10 @@ export const Simple = () => (
 export const WithRefs = () => (
   <Explorer
     dataset={{ hash: withRefs, entries: Object.entries(withRefs) }}
-    selected={selected}
+    selected={{
+      refId: 'storybook_internal',
+      storyId: 'root-1-child-a2--grandchild-a1-1',
+    }}
     isLoading={false}
     isBrowsing
   />
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 4a5322fe412a..c63886ce4e45 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useRef } from 'react';
 
 import { Button, IconButton, ListItem } from 'storybook/internal/components';
 import { PRELOAD_ENTRIES } from 'storybook/internal/core-events';
-import type { StatusValue } from 'storybook/internal/types';
+import type { API_TestEntry, StatusValue } from 'storybook/internal/types';
 import {
   type API_HashEntry,
   type StatusByTypeId,
@@ -47,7 +47,7 @@ import { useContextMenu } from './ContextMenu';
 import { IconSymbols, UseSymbol } from './IconSymbols';
 import { StatusButton } from './StatusButton';
 import { StatusContext, useStatusSummary } from './StatusContext';
-import { ComponentNode, DocumentNode, GroupNode, RootNode, StoryNode } from './TreeNode';
+import { ComponentNode, DocumentNode, GroupNode, RootNode, StoryNode, TestNode } from './TreeNode';
 import { CollapseIcon } from './components/CollapseIcon';
 import type { Highlight, Item } from './types';
 import type { ExpandAction, ExpandedState } from './useExpanded';
@@ -213,22 +213,23 @@ const statusOrder: StatusValue[] = [
   'status-value:unknown',
 ];
 
-const Node = React.memo<NodeProps>(function Node({
-  item,
-  statuses,
-  groupStatus,
-  refId,
-  docsMode,
-  isOrphan,
-  isDisplayed,
-  isSelected,
-  isFullyExpanded,
-  setFullyExpanded,
-  isExpanded,
-  setExpanded,
-  onSelectStoryId,
-  api,
-}) {
+const Node = React.memo<NodeProps>(function Node(props) {
+  const {
+    item,
+    statuses,
+    groupStatus,
+    refId,
+    docsMode,
+    isOrphan,
+    isDisplayed,
+    isSelected,
+    isFullyExpanded,
+    setFullyExpanded,
+    isExpanded,
+    setExpanded,
+    onSelectStoryId,
+    api,
+  } = props;
   const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
   const { counts, statusesByValue } = useStatusSummary(item);
 
@@ -296,68 +297,6 @@ const Node = React.memo<NodeProps>(function Node({
       ? useContextMenu(item, statusLinks, api)
       : { node: null, onMouseEnter: () => {} };
 
-  if (item.type === 'story' || item.type === 'docs') {
-    const LeafNode = item.type === 'docs' ? DocumentNode : StoryNode;
-
-    const statusValue = getMostCriticalStatusValue(
-      Object.values(statuses || {}).map((s) => s.value)
-    );
-    const [icon, textColor] = statusMapping[statusValue];
-
-    return (
-      <LeafNodeStyleWrapper
-        key={id}
-        className="sidebar-item"
-        data-selected={isSelected}
-        data-ref-id={refId}
-        data-item-id={item.id}
-        data-parent-id={item.parent}
-        data-nodetype={item.type === 'docs' ? 'document' : 'story'}
-        data-highlightable={isDisplayed}
-        onMouseEnter={contextMenu.onMouseEnter}
-      >
-        <LeafNode
-          // @ts-expect-error (non strict)
-          style={isSelected ? {} : { color: textColor }}
-          href={getLink(item, refId)}
-          id={id}
-          depth={isOrphan ? item.depth : item.depth - 1}
-          onClick={(event) => {
-            event.preventDefault();
-            onSelectStoryId(item.id);
-
-            if (isMobile) {
-              setMobileMenuOpen(false);
-            }
-          }}
-          // TODO: [test-syntax] Gert hack stuff, should be fixed later
-          {...(item.tags?.includes('test-fn') && { type: 'test' })}
-          {...(item.type === 'docs' && { docsMode })}
-        >
-          {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
-            item.name}
-        </LeafNode>
-        {isSelected && (
-          <SkipToContentLink asChild>
-            <a href="#storybook-preview-wrapper">Skip to canvas</a>
-          </SkipToContentLink>
-        )}
-        {contextMenu.node}
-        {icon ? (
-          <StatusButton
-            aria-label={`Test status: ${statusValue.replace('status-value:', '')}`}
-            role="status"
-            type="button"
-            status={statusValue}
-            selectedItem={isSelected}
-          >
-            {icon}
-          </StatusButton>
-        ) : null}
-      </LeafNodeStyleWrapper>
-    );
-  }
-
   if (item.type === 'root') {
     return (
       <RootNode
@@ -399,10 +338,12 @@ const Node = React.memo<NodeProps>(function Node({
     );
   }
 
-  if (item.type === 'component' || item.type === 'group') {
+  if (item.type === 'component' || item.type === 'group' || item.type === 'wrapper') {
     const itemStatus = groupStatus?.[item.id];
     const color = itemStatus ? statusMapping[itemStatus][1] : null;
-    const BranchNode = item.type === 'component' ? ComponentNode : GroupNode;
+    const BranchNode = { component: ComponentNode, group: GroupNode, wrapper: StoryNode }[
+      item.type
+    ];
 
     return (
       <LeafNodeStyleWrapper
@@ -418,22 +359,25 @@ const Node = React.memo<NodeProps>(function Node({
         <BranchNode
           id={id}
           style={color ? { color } : {}}
-          aria-controls={item.children && item.children.join(' ')}
+          aria-controls={item.children.join(' ')}
           aria-expanded={isExpanded}
           depth={isOrphan ? item.depth : item.depth - 1}
-          isComponent={item.type === 'component'}
-          isExpandable={item.children && item.children.length > 0}
+          isExpandable={item.children.length > 0}
           isExpanded={isExpanded}
           onClick={(event) => {
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
 
-            if (item.type === 'component' && !isExpanded && isDesktop) {
+            if (
+              (item.type === 'component' || item.type === 'wrapper') &&
+              !isExpanded &&
+              isDesktop
+            ) {
               onSelectStoryId(item.id);
             }
           }}
           onMouseEnter={() => {
-            if (item.type === 'component') {
+            if (item.type === 'component' || item.type === 'wrapper') {
               api.emit(PRELOAD_ENTRIES, {
                 ids: [item.children[0]],
                 options: { target: refId },
@@ -456,7 +400,63 @@ const Node = React.memo<NodeProps>(function Node({
     );
   }
 
-  return null;
+  const isTest = item.tags?.includes('test-fn');
+  const LeafNode = isTest ? TestNode : { docs: DocumentNode, story: StoryNode }[item.type];
+  const nodeType = isTest ? 'test' : { docs: 'document', story: 'story' }[item.type];
+
+  const statusValue = getMostCriticalStatusValue(Object.values(statuses || {}).map((s) => s.value));
+  const [icon, textColor] = statusMapping[statusValue];
+
+  return (
+    <LeafNodeStyleWrapper
+      key={id}
+      className="sidebar-item"
+      data-selected={isSelected}
+      data-ref-id={refId}
+      data-item-id={item.id}
+      data-parent-id={item.parent}
+      data-nodetype={nodeType}
+      data-highlightable={isDisplayed}
+      onMouseEnter={contextMenu.onMouseEnter}
+    >
+      <LeafNode
+        // @ts-expect-error (non strict)
+        style={isSelected ? {} : { color: textColor }}
+        href={getLink(item, refId)}
+        id={id}
+        depth={isOrphan ? item.depth : item.depth - 1}
+        onClick={(event) => {
+          event.preventDefault();
+          onSelectStoryId(item.id);
+
+          if (isMobile) {
+            setMobileMenuOpen(false);
+          }
+        }}
+        {...(item.type === 'docs' && { docsMode })}
+      >
+        {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+          item.name}
+      </LeafNode>
+      {isSelected && (
+        <SkipToContentLink asChild>
+          <a href="#storybook-preview-wrapper">Skip to canvas</a>
+        </SkipToContentLink>
+      )}
+      {contextMenu.node}
+      {icon ? (
+        <StatusButton
+          aria-label={`Test status: ${statusValue.replace('status-value:', '')}`}
+          role="status"
+          type="button"
+          status={statusValue}
+          selectedItem={isSelected}
+        >
+          {icon}
+        </StatusButton>
+      ) : null}
+    </LeafNodeStyleWrapper>
+  );
 });
 
 const Root = React.memo<NodeProps & { expandableDescendants: string[] }>(function Root({
@@ -579,7 +579,8 @@ export const Tree = React.memo<{
     [data, singleStoryComponentIds]
   );
 
-  // Rewrite the dataset to place the child story in place of the component.
+  // Rewrite the dataset to place the single child story in place of the component.
+  // TODO: Move this to the `transformStoryIndexToStoriesHash` util.
   const collapsedData = useMemo(() => {
     return singleStoryComponentIds.reduce(
       (acc, id) => {
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 9213bd9105d7..112ac213fa1f 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
-import { styled } from 'storybook/theming';
+import { type FunctionInterpolation, type Theme, styled } from 'storybook/theming';
 
 import { UseSymbol } from './IconSymbols';
 import { CollapseIcon } from './components/CollapseIcon';
@@ -37,47 +37,42 @@ export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'test' | 'gro
   })
 );
 
-const BranchNode = styled.button<{
-  depth?: number;
-  isExpandable?: boolean;
-  isExpanded?: boolean;
-  isComponent?: boolean;
-  isSelected?: boolean;
-}>(({ theme, depth = 0, isExpandable = false }) => ({
+const commonNodeStyles: FunctionInterpolation<{ depth?: number; isExpandable?: boolean }> = ({
+  theme,
+  depth = 0,
+  isExpandable = false,
+}) => ({
+  flex: 1,
   width: '100%',
-  border: 'none',
   cursor: 'pointer',
   display: 'flex',
   alignItems: 'start',
   textAlign: 'left',
-  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
+  textDecoration: 'none',
+  border: 'none',
   color: 'inherit',
   fontSize: `${theme.typography.size.s2}px`,
+  fontWeight: 'inherit',
   background: 'transparent',
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
+  paddingLeft: `${(isExpandable ? 8 : 22) + depth * 18}px`,
   paddingTop: 5,
   paddingBottom: 4,
-}));
-
-const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({
-  width: '100%',
-  cursor: 'pointer',
-  color: 'inherit',
-  display: 'flex',
-  gap: 6,
-  flex: 1,
-  alignItems: 'start',
-  paddingLeft: `${22 + depth * 18}px`,
-  paddingTop: 5,
-  paddingBottom: 4,
-  fontSize: `${theme.typography.size.s2}px`,
-  textDecoration: 'none',
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
-}));
+});
+
+const BranchNode = styled.button<{
+  depth?: number;
+  isExpandable?: boolean;
+  isExpanded?: boolean;
+  isSelected?: boolean;
+}>(commonNodeStyles);
+
+const LeafNode = styled.a<{ depth?: number }>(commonNodeStyles);
 
 export const RootNode = styled.div(({ theme }) => ({
   display: 'flex',
@@ -123,11 +118,17 @@ export const GroupNode: FC<
 });
 
 export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
-  function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) {
+  function ComponentNode({
+    theme,
+    children,
+    isExpanded = false,
+    isExpandable = false,
+    isSelected,
+    ...props
+  }) {
     return (
       <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
         <Wrapper>
-          {/* @ts-expect-error (non strict) */}
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
           <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="component">
             <UseSymbol type="component" />
@@ -154,20 +155,24 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool
   }
 );
 
-export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
+export const StoryNode: FC<ComponentProps<typeof BranchNode>> = React.memo(function StoryNode({
   theme,
   children,
+  isExpandable = false,
+  isExpanded = false,
+  isSelected,
   ...props
 }) {
   return (
-    <LeafNode tabIndex={-1} {...props}>
+    <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
       <Wrapper>
+        {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
         <TypeIcon viewBox="0 0 14 14" width="12" height="12" type="story">
           <UseSymbol type="story" />
         </TypeIcon>
       </Wrapper>
       {children}
-    </LeafNode>
+    </BranchNode>
   );
 });
 
diff --git a/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx b/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
index 799e5766853d..0c541f623b4f 100644
--- a/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
+++ b/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
@@ -1,32 +1,26 @@
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
-import { transparentize } from 'polished';
 import { styled } from 'storybook/theming';
 
-interface CollapseIconProps {
-  isExpanded: boolean;
-}
-
-export const CollapseIconWrapper = styled.div<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({
+export const CollapseIconWrapper = styled.div<{ isExpanded: boolean }>(({ isExpanded }) => ({
   width: 8,
   height: 8,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  color: transparentize(0.4, theme.textMutedColor),
   transform: isExpanded ? 'rotateZ(90deg)' : 'none',
   transition: 'transform .1s ease-out',
 }));
 
-export const CollapseIcon: FC<CollapseIconProps> = ({ isExpanded }) => (
-  <CollapseIconWrapper isExpanded={isExpanded}>
+export const CollapseIcon: FC<ComponentProps<typeof CollapseIconWrapper>> = (props) => (
+  <CollapseIconWrapper {...props}>
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none">
       <path
-        fill="#73828C"
+        fill="currentColor"
         fillRule="evenodd"
-        d="M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
         clipRule="evenodd"
+        d="M1.896 7.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 1 0-.708.708L5.043 4 1.896 7.146Z"
       />
     </svg>
   </CollapseIconWrapper>
diff --git a/code/core/src/manager/components/sidebar/mockdata.ts b/code/core/src/manager/components/sidebar/mockdata.ts
index 6d653c29ec99..b9fc9c1a1e87 100644
--- a/code/core/src/manager/components/sidebar/mockdata.ts
+++ b/code/core/src/manager/components/sidebar/mockdata.ts
@@ -56,20 +56,40 @@ export const mockDataset: MockDataSet = {
       parent: 'root-1',
       name: 'Child A2',
       depth: 1,
-      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
+      children: ['root-1-child-a2--grandchild-a1-1__wrapper', 'root-1-child-a2--grandchild-a1-2'],
+    },
+    'root-1-child-a2--grandchild-a1-1__wrapper': {
+      type: 'wrapper',
+      id: 'root-1-child-a2--grandchild-a1-1__wrapper',
+      parent: 'root-1-child-a2',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-1:test1'],
     },
     'root-1-child-a2--grandchild-a1-1': {
       type: 'story',
       prepared: true,
       id: 'root-1-child-a2--grandchild-a1-1',
-      parent: 'root-1-child-a2',
-      depth: 2,
+      parent: 'root-1-child-a2--grandchild-a1-1__wrapper',
+      depth: 3,
       name: 'GrandChild A1.1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
+    'root-1-child-a2--grandchild-a1-1:test1': {
+      type: 'story',
+      prepared: true,
+      id: 'root-1-child-a2--grandchild-a1-1:test1',
+      parent: 'root-1-child-a2--grandchild-a1-1__wrapper',
+      depth: 3,
+      name: 'Test 1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
     'root-1-child-a2--grandchild-a1-2': {
       type: 'story',
       prepared: true,
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 35f2868e70f6..4d4ba4c7d0dd 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -30,6 +30,12 @@ export interface API_ComponentEntry extends API_BaseEntry {
   children: StoryId[];
 }
 
+export interface API_WrapperEntry extends API_BaseEntry {
+  type: 'wrapper';
+  parent: StoryId;
+  children: StoryId[];
+}
+
 export interface API_DocsEntry extends API_BaseEntry {
   type: 'docs';
   parent: StoryId;
@@ -55,11 +61,12 @@ export interface API_StoryEntry extends API_BaseEntry {
   initialArgs?: Args;
 }
 
-export type API_LeafEntry = API_DocsEntry | API_StoryEntry; // | API_TestEntry;
+export type API_LeafEntry = API_DocsEntry | API_StoryEntry;
 export type API_HashEntry =
   | API_RootEntry
   | API_GroupEntry
   | API_ComponentEntry
+  | API_WrapperEntry
   | API_DocsEntry
   | API_StoryEntry;
 

From 700ec5b59601c6cffd9b29a529ff853425bbf57e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 16:01:17 +0200
Subject: [PATCH 074/130] Add story with play function

---
 .../components/test-fn.stories.tsx            | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 97c7c41746c8..99d401d7b557 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -22,6 +22,14 @@ export const Default = meta.story({
     children: 'Arg from story',
   },
 });
+
+export const PlayFunction = meta.story({
+  play: async ({ canvas, userEvent }) => {
+    const button = canvas.getByText('Default');
+    await userEvent.click(button);
+  },
+});
+
 Default.test('simple', async ({ canvas, userEvent, args }) => {
   const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
@@ -67,6 +75,7 @@ Default.test(
     expect(document.body.clientWidth).toBe(380);
   }
 );
+
 Default.test(
   'with play function',
   {
@@ -81,12 +90,18 @@ Default.test(
   }
 );
 
-export const DefaultExtended = Default.extend({
+export const ExtendedStory = Default.extend({
   args: {
     children: 'Arg from extended story',
   },
 });
-DefaultExtended.test('should have extended args', async ({ canvas }) => {
+
+ExtendedStory.test('should have extended args', async ({ canvas }) => {
   const button = canvas.getByText('Arg from extended story');
   await expect(button).toBeEnabled();
 });
+
+// This is intentionally defined out-of-order
+PlayFunction.test('should be clicked by play function', async ({ args }) => {
+  await expect(args.onClick).toHaveBeenCalled();
+});

From cbbd7be92a2483c3e46233121921e3be4eb104ba Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 20:02:37 +0200
Subject: [PATCH 075/130] Ensure wrapper gets proper children and tags

---
 code/core/src/manager-api/lib/stories.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 00cef3aa2154..049310a9eaa5 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -10,6 +10,7 @@ import type {
   API_Provider,
   API_RootEntry,
   API_StoryEntry,
+  API_WrapperEntry,
   DocsOptions,
   IndexEntry,
   Parameters,
@@ -364,11 +365,15 @@ export const transformStoryIndexToStoriesHash = (
           type: 'wrapper',
           id: wrapperId,
           parent: parentStory.parent,
-          children: [parentStory.id].concat(item.id),
+          children: [parentStory.id],
           depth: parentStory.depth,
         };
       }
 
+      const wrapperNode = acc[wrapperId] as API_WrapperEntry;
+      wrapperNode.children.push(item.id);
+      wrapperNode.tags = intersect(wrapperNode.tags, item.tags);
+
       // Create or update parent to point to wrapper rather than story
       acc[item.parent] = {
         ...parentStory,

From 5fe23d48200303f9547a4df1d35889c2123d76e5 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 27 Aug 2025 20:09:02 +0200
Subject: [PATCH 076/130] Fix filtering by test-fn tag

---
 code/core/src/csf-tools/CsfFile.ts                  |  4 +++-
 .../src/manager/components/sidebar/TagsFilter.tsx   | 13 ++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 46852a142fe7..e79a07dbee5c 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -905,14 +905,16 @@ export class CsfFile {
         __id: story.id,
         __stats: story.__stats,
       };
+      const hasTests = this._storyTests[exportName];
 
       index.push({
         ...storyInput,
         type: 'story',
         name: story.name,
+        tags: [...storyInput.tags, ...(hasTests ? ['has-tests'] : [])],
       });
 
-      if (this._storyTests[exportName]) {
+      if (hasTests) {
         this._storyTests[exportName].forEach((test) => {
           index.push({
             ...storyInput,
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 5cb7934a38e1..32589c063ddb 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -63,11 +63,14 @@ export const TagsFilter = ({
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (selectedTags.length === 0) {
-        return true;
-      }
-
-      return selectedTags.some((tag) => item.tags?.includes(tag));
+      return (
+        selectedTags.length === 0 ||
+        selectedTags.some((tag) =>
+          tag === 'test-fn'
+            ? item.tags?.includes(tag) || item.tags?.includes('has-tests')
+            : item.tags?.includes(tag)
+        )
+      );
     });
   }, [api, selectedTags]);
 

From 05a264ce2d28dd62ccb52c704e18a8590afb71e4 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 28 Aug 2025 11:28:03 +0200
Subject: [PATCH 077/130] fix search item icon for story tests

---
 .../src/manager/components/sidebar/SearchResults.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
index 89e4928218c5..28e2d14fb53e 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -199,8 +199,13 @@ const Result: FC<
           </TypeIcon>
         )}
         {item.type === 'story' && (
-          <TypeIcon viewBox="0 0 14 14" width="14" height="14" type="story">
-            <UseSymbol type="story" />
+          <TypeIcon
+            viewBox="0 0 14 14"
+            width="14"
+            height="14"
+            type={item.tags?.includes('test-fn') ? 'test' : 'story'}
+          >
+            <UseSymbol type={item.tags?.includes('test-fn') ? 'test' : 'story'} />
           </TypeIcon>
         )}
         {!(item.type === 'component' || item.type === 'story') && (

From f6c090e3a253de667619e4da9a61a64d5a5fb8e9 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 28 Aug 2025 11:28:31 +0200
Subject: [PATCH 078/130] add more stories

---
 .../components/test-fn.stories.tsx            | 80 ++++++++++++++++---
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 99d401d7b557..6e1a28bccaf2 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -17,7 +17,9 @@ const meta = preview.meta({
   tags: ['some-tag'],
 });
 
-export const Default = meta.story({
+export const WithNoTests = meta.story();
+
+export const TestFunctionTypes = meta.story({
   args: {
     children: 'Arg from story',
   },
@@ -30,7 +32,7 @@ export const PlayFunction = meta.story({
   },
 });
 
-Default.test('simple', async ({ canvas, userEvent, args }) => {
+TestFunctionTypes.test('simple', async ({ canvas, userEvent, args }) => {
   const button = canvas.getByText('Arg from story');
   await userEvent.click(button);
   await expect(args.onClick).toHaveBeenCalled();
@@ -45,9 +47,9 @@ const doTest = async ({
   await userEvent.click(button);
   await expect(args.onClick).toHaveBeenCalled();
 };
-Default.test('referring to function in file', doTest);
+TestFunctionTypes.test('referring to function in file', doTest);
 
-Default.test(
+TestFunctionTypes.test(
   'with overrides',
   {
     args: {
@@ -76,7 +78,7 @@ Default.test(
   }
 );
 
-Default.test(
+TestFunctionTypes.test(
   'with play function',
   {
     play: async ({ canvas }) => {
@@ -90,18 +92,78 @@ Default.test(
   }
 );
 
-export const ExtendedStory = Default.extend({
+export const ExtendedStorySinglePlayExample = TestFunctionTypes.extend({
   args: {
     children: 'Arg from extended story',
   },
+  play: async ({ canvas }) => {
+    const button = canvas.getByText('Arg from extended story');
+    await expect(button).toBeEnabled();
+  },
 });
 
-ExtendedStory.test('should have extended args', async ({ canvas }) => {
-  const button = canvas.getByText('Arg from extended story');
-  await expect(button).toBeEnabled();
+export const ExtendedStorySingleTestExample = TestFunctionTypes.extend({
+  args: {
+    children: 'Arg from extended story',
+  },
 });
 
+ExtendedStorySingleTestExample.test(
+  'this is a very long test name to explain that this story test should guarantee that the args have been extended correctly',
+  async ({ canvas }) => {
+    const button = canvas.getByText('Arg from extended story');
+    await expect(button).toBeEnabled();
+  }
+);
+
 // This is intentionally defined out-of-order
 PlayFunction.test('should be clicked by play function', async ({ args }) => {
   await expect(args.onClick).toHaveBeenCalled();
 });
+
+export const TestNames = meta.story({
+  args: {
+    children: 'This story is no-op, just focus on the test names',
+  },
+});
+TestNames.test(
+  'should display an error when login is attempted with an expired session token',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted with multiple invalid password attempts',
+  () => {}
+);
+
+TestNames.test('should display an error when login is attempted with a revoked API key', () => {});
+
+TestNames.test(
+  'should display an error when login is attempted after exceeding the maximum session limit',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted with a disabled user account',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted with an unsupported authentication provider',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted after the password reset process is incomplete',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted with a malformed authentication request',
+  () => {}
+);
+
+TestNames.test(
+  'should display an error when login is attempted with an unverified email address',
+  () => {}
+);

From e335dc439f98746261fc332ff26b943169d5b1fc Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 28 Aug 2025 14:51:14 +0200
Subject: [PATCH 079/130] Add subtype property to distinguish tests from
 stories

---
 .../core-server/utils/StoryIndexGenerator.ts  | 24 ++++++++++++-------
 code/core/src/csf-tools/CsfFile.ts            | 10 +++++---
 code/core/src/manager-api/lib/stories.ts      |  5 +++-
 .../components/sidebar/SearchResults.tsx      |  9 ++-----
 .../manager/components/sidebar/TagsFilter.tsx | 14 ++++-------
 .../src/manager/components/sidebar/Tree.tsx   |  2 +-
 code/core/src/types/modules/api-stories.ts    |  1 +
 code/core/src/types/modules/indexer.ts        |  8 +++----
 8 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index 9285a29527f9..b1530001e3b4 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -428,8 +428,8 @@ export class StoryIndexGenerator {
       ]);
     }
 
-    const entries: ((StoryIndexEntryWithExtra | DocsCacheEntry) & { tags: Tag[] })[] =
-      indexInputs.map((input) => {
+    const storyEntries: (StoryIndexEntryWithExtra & { tags: Tag[] })[] = indexInputs.map(
+      (input) => {
         const name = input.name ?? storyNameFromExport(input.exportName);
         const componentPath =
           input.rawComponentPath &&
@@ -441,6 +441,7 @@ export class StoryIndexGenerator {
 
         return {
           type: 'story',
+          subtype: input.type === 'story' ? input.subtype : 'story',
           id,
           extra: {
             metaId: input.metaId,
@@ -453,23 +454,24 @@ export class StoryIndexGenerator {
           tags,
           ...(input.type === 'story' && input.parent ? { parent: input.parent } : {}),
         };
-      });
+      }
+    );
 
     // We need a docs entry attached to the CSF file if either:
     //  a) autodocs is globally enabled
     //  b) we have autodocs enabled for this file
-    const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
+    const hasAutodocsTag = storyEntries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
     const createDocEntry = hasAutodocsTag && !!this.options.docs;
 
     if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
       const docsName = this.options.docs?.defaultName ?? 'Docs';
       const name = docsName;
       const { metaId } = indexInputs[0];
-      const { title } = entries[0];
+      const { title } = storyEntries[0];
       const id = toId(metaId ?? title, name);
       const tags = combineTags(...projectTags, ...(indexInputs[0].tags ?? []));
 
-      entries.unshift({
+      const docsEntry: DocsCacheEntry & { tags: Tag[] } = {
         id,
         title,
         name,
@@ -477,11 +479,17 @@ export class StoryIndexGenerator {
         type: 'docs',
         tags,
         storiesImports: [],
-      });
+      };
+
+      return {
+        entries: [docsEntry, ...storyEntries],
+        dependents: [],
+        type: 'stories',
+      };
     }
 
     return {
-      entries,
+      entries: storyEntries,
       dependents: [],
       type: 'stories',
     };
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index e79a07dbee5c..8f00196d0476 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -905,20 +905,24 @@ export class CsfFile {
         __id: story.id,
         __stats: story.__stats,
       };
-      const hasTests = this._storyTests[exportName];
+
+      const tests = this._storyTests[exportName];
+      const hasTests = tests?.length;
 
       index.push({
         ...storyInput,
         type: 'story',
+        subtype: 'story',
         name: story.name,
-        tags: [...storyInput.tags, ...(hasTests ? ['has-tests'] : [])],
+        tags: hasTests ? [...storyInput.tags, 'test-fn'] : storyInput.tags,
       });
 
       if (hasTests) {
-        this._storyTests[exportName].forEach((test) => {
+        tests.forEach((test) => {
           index.push({
             ...storyInput,
             type: 'story',
+            subtype: 'test',
             parent: story.id,
             name: test.name,
             tags: [...storyInput.tags, 'test-fn'],
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 049310a9eaa5..810bff6b421f 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -75,6 +75,7 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = (
         const { argTypes, args, initialArgs } = story;
         acc[id] = {
           type: 'story',
+          subtype,
           ...base,
           parameters,
           argTypes,
@@ -346,7 +347,7 @@ export const transformStoryIndexToStoriesHash = (
   // Add "wrapper" nodes for stories with tests
   // Because the order of entries matters, we need to insert the wrapper before the story and test
   return Object.values(storiesHash).reduce((acc, item) => {
-    if (item.type === 'story' && item.tags.includes('test-fn')) {
+    if (item.type === 'story' && item.subtype === 'test') {
       const wrapperId = `${item.parent}__wrapper`;
       const parentStory = storiesHash[item.parent] as API_StoryEntry;
       const componentNode = storiesHash[parentStory.parent] as API_ComponentEntry;
@@ -375,10 +376,12 @@ export const transformStoryIndexToStoriesHash = (
       wrapperNode.tags = intersect(wrapperNode.tags, item.tags);
 
       // Create or update parent to point to wrapper rather than story
+      // Remove test-fn tag from story, as it should only exist on the wrapper
       acc[item.parent] = {
         ...parentStory,
         parent: wrapperId,
         depth: parentStory.depth + 1,
+        tags: parentStory.tags.filter((tag) => tag !== 'test-fn'),
       };
 
       // Create or update the test to point to wrapper rather than story
diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
index 28e2d14fb53e..a47b27056c1e 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -199,13 +199,8 @@ const Result: FC<
           </TypeIcon>
         )}
         {item.type === 'story' && (
-          <TypeIcon
-            viewBox="0 0 14 14"
-            width="14"
-            height="14"
-            type={item.tags?.includes('test-fn') ? 'test' : 'story'}
-          >
-            <UseSymbol type={item.tags?.includes('test-fn') ? 'test' : 'story'} />
+          <TypeIcon viewBox="0 0 14 14" width="14" height="14" type={item.subtype}>
+            <UseSymbol type={item.subtype} />
           </TypeIcon>
         )}
         {!(item.type === 'component' || item.type === 'story') && (
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 32589c063ddb..8137cb8758eb 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -62,16 +62,10 @@ export const TagsFilter = ({
   const tagsActive = selectedTags.length > 0;
 
   useEffect(() => {
-    api.experimental_setFilter(TAGS_FILTER, (item) => {
-      return (
-        selectedTags.length === 0 ||
-        selectedTags.some((tag) =>
-          tag === 'test-fn'
-            ? item.tags?.includes(tag) || item.tags?.includes('has-tests')
-            : item.tags?.includes(tag)
-        )
-      );
-    });
+    api.experimental_setFilter(
+      TAGS_FILTER,
+      (item) => selectedTags.length === 0 || selectedTags.some((tag) => item.tags?.includes(tag))
+    );
   }, [api, selectedTags]);
 
   const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index c63886ce4e45..769ae4c2cd62 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -400,7 +400,7 @@ const Node = React.memo<NodeProps>(function Node(props) {
     );
   }
 
-  const isTest = item.tags?.includes('test-fn');
+  const isTest = item.type === 'story' && item.subtype === 'test';
   const LeafNode = isTest ? TestNode : { docs: DocumentNode, story: StoryNode }[item.type];
   const nodeType = isTest ? 'test' : { docs: 'document', story: 'story' }[item.type];
 
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 4d4ba4c7d0dd..7336962cdc54 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -49,6 +49,7 @@ export interface API_DocsEntry extends API_BaseEntry {
 
 export interface API_StoryEntry extends API_BaseEntry {
   type: 'story';
+  subtype: 'story' | 'test';
   parent: StoryId;
   title: ComponentTitle;
   importPath: Path;
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index 62b4fb5c35b0..ac6f3814b636 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -73,8 +73,8 @@ export interface BaseIndexEntry {
 }
 export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
-  // currently used by story tests
-  parent?: StoryId;
+  subtype: 'story' | 'test';
+  parent?: StoryId; // exists only on tests
 };
 
 export type DocsIndexEntry = BaseIndexEntry & {
@@ -133,8 +133,8 @@ export type BaseIndexInput = {
 /** The input for indexing a story entry. */
 export type StoryIndexInput = BaseIndexInput & {
   type: 'story';
-  // currently used by story tests
-  parent?: StoryId;
+  subtype: 'story' | 'test';
+  parent?: StoryId; // exists only on tests
 };
 
 /** The input for indexing a docs entry. */

From 6fa86641a21b6d4886ef48c07a60aa5d9b502add Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 28 Aug 2025 14:52:37 +0200
Subject: [PATCH 080/130] Add autodocs to test-fn stories for dev/test/debug

---
 code/core/src/component-testing/components/test-fn.stories.tsx | 2 +-
 code/core/src/manager-api/lib/stories.ts                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index 6e1a28bccaf2..c49a9308c26e 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -14,7 +14,7 @@ const meta = preview.meta({
     children: 'Default',
     onClick: fn(),
   },
-  tags: ['some-tag'],
+  tags: ['some-tag', 'autodocs'],
 });
 
 export const WithNoTests = meta.story();
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 810bff6b421f..1dc1d893b2b1 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -75,7 +75,7 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = (
         const { argTypes, args, initialArgs } = story;
         acc[id] = {
           type: 'story',
-          subtype,
+          subtype: 'story',
           ...base,
           parameters,
           argTypes,

From 8dee33280a110589f73f85bb924bcc242a611249 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 29 Aug 2025 12:30:51 +0200
Subject: [PATCH 081/130] Refactor story index transformation logic for
 improved filtering and entry handling

---
 code/core/src/csf-tools/CsfFile.ts            |  3 +-
 code/core/src/manager-api/lib/stories.ts      | 75 +++++++++----------
 .../src/manager/components/sidebar/Tree.tsx   |  2 +-
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 8f00196d0476..c9ca6b84fc22 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -914,13 +914,14 @@ export class CsfFile {
         type: 'story',
         subtype: 'story',
         name: story.name,
-        tags: hasTests ? [...storyInput.tags, 'test-fn'] : storyInput.tags,
       });
 
       if (hasTests) {
         tests.forEach((test) => {
           index.push({
             ...storyInput,
+            // TODO implementent proper title => path behavior in `transformStoryIndexToStoriesHash`
+            // title: `${storyInput.title}/${story.name}`,
             type: 'story',
             subtype: 'test',
             parent: story.id,
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 1dc1d893b2b1..0484000ace43 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -186,23 +186,22 @@ export const transformStoryIndexToStoriesHash = (
   index = index.v === 4 ? transformStoryIndexV4toV5(index as any) : index;
   index = index as API_PreparedStoryIndex;
 
-  const entryValues = Object.values(index.entries).filter((entry) => {
-    let result = true;
-
-    // All stories with a failing status should always show up, regardless of the applied filters
-    const storyStatuses = allStatuses[entry.id] ?? {};
-    if (Object.values(storyStatuses).some(({ value }) => value === 'status-value:error')) {
-      return result;
+  const indexEntries = Object.values(index.entries);
+  const filterFunctions = Object.values(filters);
+
+  const entryValues = indexEntries.filter((entry) => {
+    const statuses = allStatuses[entry.id] ?? {};
+    if (Object.values(statuses).some(({ value }) => value === 'status-value:error')) {
+      // All stories with a failing status should always show up, regardless of the applied filters
+      return true;
     }
 
-    Object.values(filters).forEach((filter) => {
-      if (result === false) {
-        return;
-      }
-      result = filter({ ...entry, statuses: storyStatuses });
-    });
+    if (filterFunctions.every((fn) => fn({ ...entry, statuses }))) {
+      return true;
+    }
 
-    return result;
+    const children = indexEntries.filter((item) => 'parent' in item && item.parent === entry.id);
+    return children.some((child) => filterFunctions.some((fn) => fn({ ...child, statuses })));
   });
 
   const { sidebar = {} } = provider.getConfig();
@@ -313,40 +312,37 @@ export const transformStoryIndexToStoriesHash = (
   // This function adds a "root" or "orphan" and all of its descendents to the hash.
   function addItem(acc: API_IndexHash, item: API_HashEntry) {
     // If we were already inserted as part of a group, that's great.
-    if (acc[item.id]) {
-      return acc;
-    }
+    if (!acc[item.id]) {
+      acc[item.id] = item;
 
-    acc[item.id] = item;
-    // Ensure we add the children depth-first *before* inserting any other entries,
-    // and compute tags from the children put in the accumulator afterwards, once
-    // they're all known and we can compute a sound intersection.
-    if (item.type === 'root' || item.type === 'group' || item.type === 'component') {
-      item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
-
-      item.tags =
-        item.children.reduce((currentTags: Tag[] | null, childId): Tag[] => {
-          // On the first child, we have nothing to intersect against so we use it as a source of data.
-          return currentTags === null
-            ? acc[childId].tags
-            : intersect(currentTags, acc[childId].tags);
-        }, null) || [];
+      // Ensure we add the children depth-first *before* inserting any other entries.
+      if ('children' in item) {
+        item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
+
+        item.tags =
+          item.children.reduce((currentTags: Tag[] | null, childId): Tag[] => {
+            // On the first child, we have nothing to intersect against so we use it as a source of data.
+            return currentTags === null
+              ? acc[childId].tags
+              : intersect(currentTags, acc[childId].tags);
+          }, null) || [];
+      }
     }
     return acc;
   }
 
   // We'll do two passes over the data, adding all the orphans, then all the roots
-  const orphanHash = Object.values(storiesHashOutOfOrder)
+  let storiesHash = Object.values(storiesHashOutOfOrder)
     .filter((i) => i.type !== 'root' && !i.parent)
     .reduce((acc, item) => addItem(acc, item), {} as API_IndexHash);
 
-  const storiesHash = Object.values(storiesHashOutOfOrder)
+  storiesHash = Object.values(storiesHashOutOfOrder)
     .filter((i) => i.type === 'root')
-    .reduce(addItem, orphanHash);
+    .reduce(addItem, storiesHash);
 
   // Add "wrapper" nodes for stories with tests
   // Because the order of entries matters, we need to insert the wrapper before the story and test
-  return Object.values(storiesHash).reduce((acc, item) => {
+  storiesHash = Object.values(storiesHash).reduce((acc, item) => {
     if (item.type === 'story' && item.subtype === 'test') {
       const wrapperId = `${item.parent}__wrapper`;
       const parentStory = storiesHash[item.parent] as API_StoryEntry;
@@ -354,12 +350,11 @@ export const transformStoryIndexToStoriesHash = (
 
       // Update component children to point to wrapper rather than story and tests
       (acc[componentNode.id] as API_ComponentEntry).children = componentNode.children
-        .filter((id) => id !== item.id && id !== item.parent)
-        .concat(wrapperId);
+        .filter((id) => id !== item.id)
+        .map((id) => (id === item.parent ? wrapperId : id));
 
-      // Create the wrapper, but first delete the story and test so that the wrapper is inserted before them
+      // Create the wrapper, but first delete the story so that the wrapper is inserted before it
       if (!acc[wrapperId]) {
-        delete acc[item.id];
         delete acc[item.parent];
         acc[wrapperId] = {
           ...parentStory,
@@ -395,6 +390,8 @@ export const transformStoryIndexToStoriesHash = (
     }
     return acc;
   }, {} as API_IndexHash);
+
+  return storiesHash;
 };
 
 /** Now we need to patch in the existing prepared stories */
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 769ae4c2cd62..f8f33c03fd31 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useRef } from 'react';
 
 import { Button, IconButton, ListItem } from 'storybook/internal/components';
 import { PRELOAD_ENTRIES } from 'storybook/internal/core-events';
-import type { API_TestEntry, StatusValue } from 'storybook/internal/types';
+import type { StatusValue } from 'storybook/internal/types';
 import {
   type API_HashEntry,
   type StatusByTypeId,

From d9bf94aa0f4f4557eeebcaf4924cfa55f47b83b0 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 29 Aug 2025 15:10:29 +0200
Subject: [PATCH 082/130] Fix sortStory

---
 code/core/src/preview-api/modules/store/sortStories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/core/src/preview-api/modules/store/sortStories.ts b/code/core/src/preview-api/modules/store/sortStories.ts
index 3d4f41e9c4be..72bc4b2f58ec 100644
--- a/code/core/src/preview-api/modules/store/sortStories.ts
+++ b/code/core/src/preview-api/modules/store/sortStories.ts
@@ -46,7 +46,7 @@ export const sortStoriesV7 = (
     Error sorting stories with sort parameter ${storySortParameter}:
 
     > ${(err as Error).message}
-    
+
     Are you using a V6-style sort function in V7 mode?
 
     More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
@@ -55,8 +55,8 @@ export const sortStoriesV7 = (
 };
 
 const toIndexEntry = (story: any): StoryIndexEntry => {
-  const { id, title, name, parameters, type } = story;
-  return { id, title, name, importPath: parameters.fileName, type };
+  const { id, title, name, parameters, type, subtype, parent } = story;
+  return { id, title, name, importPath: parameters.fileName, type, subtype, parent };
 };
 
 export const sortStoriesV6 = <TRenderer extends Renderer>(

From b6c82bc82a8a361eb8cfee5e90adc8f7a1eff322 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 29 Aug 2025 15:57:16 +0200
Subject: [PATCH 083/130] fix tests

---
 code/core/src/core-server/build-index.test.ts |  2 +
 .../utils/StoryIndexGenerator.test.ts         | 52 +++++++++++++++++++
 .../utils/__tests__/index-extraction.test.ts  | 10 ++++
 .../core-server/utils/stories-json.test.ts    | 16 ++++++
 code/core/src/csf-tools/CsfFile.test.ts       |  8 +++
 5 files changed, 88 insertions(+)

diff --git a/code/core/src/core-server/build-index.test.ts b/code/core/src/core-server/build-index.test.ts
index e467a4f86a85..0b62d594b0ce 100644
--- a/code/core/src/core-server/build-index.test.ts
+++ b/code/core/src/core-server/build-index.test.ts
@@ -15,6 +15,7 @@ describe('buildIndex', () => {
             "id": "my-component-a--story-one",
             "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/A.stories.jsx",
             "name": "Story One",
+            "subtype": "story",
             "tags": [
               "dev",
               "test",
@@ -43,6 +44,7 @@ describe('buildIndex', () => {
             "id": "my-component-b--story-one",
             "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/B.stories.jsx",
             "name": "Story One",
+            "subtype": "story",
             "tags": [
               "dev",
               "test",
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index 777dc6982bb3..a2f40f0f4409 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -80,6 +80,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -142,6 +143,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "f--story-one",
                 "importPath": "./src/F.story.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -188,6 +190,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "stories--story-one",
                 "importPath": "./src/stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -221,6 +224,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-extension--story-one",
                 "importPath": "./src/componentPath/extension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -233,6 +237,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-noextension--story-one",
                 "importPath": "./src/componentPath/noExtension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -245,6 +250,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-package--story-one",
                 "importPath": "./src/componentPath/package.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -257,6 +263,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -270,6 +277,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "second-nested-g--story-one",
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -302,6 +310,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -329,6 +338,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "b--story-one",
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -342,6 +352,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-extension--story-one",
                 "importPath": "./src/componentPath/extension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -354,6 +365,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-noextension--story-one",
                 "importPath": "./src/componentPath/noExtension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -366,6 +378,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-package--story-one",
                 "importPath": "./src/componentPath/package.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -391,6 +404,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "d--story-one",
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -404,6 +418,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "example-button--story-one",
                 "importPath": "./src/Button.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -417,6 +432,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-f--story-one",
                 "importPath": "./src/first-nested/deeply/F.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -429,6 +445,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-csf-1",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With CSF 1",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -441,6 +458,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-play",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Play",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -454,6 +472,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-render",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Render",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -466,6 +485,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-story-fn",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Story Fn",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -478,6 +498,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-test",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Test",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -504,6 +525,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "h--story-one",
                 "importPath": "./src/H.stories.mjs",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -517,6 +539,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -530,6 +553,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "second-nested-g--story-one",
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -582,6 +606,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -609,6 +634,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "b--story-one",
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -622,6 +648,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-extension--story-one",
                 "importPath": "./src/componentPath/extension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -634,6 +661,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-noextension--story-one",
                 "importPath": "./src/componentPath/noExtension.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -646,6 +674,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "componentpath-package--story-one",
                 "importPath": "./src/componentPath/package.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -671,6 +700,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "d--story-one",
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -684,6 +714,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "example-button--story-one",
                 "importPath": "./src/Button.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -697,6 +728,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-f--story-one",
                 "importPath": "./src/first-nested/deeply/F.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -709,6 +741,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-csf-1",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With CSF 1",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -721,6 +754,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-play",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Play",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -734,6 +768,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-render",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Render",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -746,6 +781,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-story-fn",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Story Fn",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -758,6 +794,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "first-nested-deeply-features--with-test",
                 "importPath": "./src/first-nested/deeply/Features.stories.jsx",
                 "name": "With Test",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -784,6 +821,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "h--story-one",
                 "importPath": "./src/H.stories.mjs",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -797,6 +835,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -810,6 +849,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "second-nested-g--story-one",
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1029,6 +1069,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "b--story-one",
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1094,6 +1135,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "b--story-one",
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1151,6 +1193,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1208,6 +1251,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1257,6 +1301,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "duplicate-a--story-one",
                 "importPath": "./duplicate/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1270,6 +1315,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "duplicate-a--story-two",
                 "importPath": "./duplicate/SecondA.stories.js",
                 "name": "Story Two",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1334,6 +1380,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "my-component-a--story-one",
                 "importPath": "./docs-id-generation/A.stories.jsx",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1397,6 +1444,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1548,6 +1596,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1636,6 +1685,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1663,6 +1713,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "b--story-one",
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
@@ -1732,6 +1783,7 @@ describe('StoryIndexGenerator', () => {
                 "id": "my-component-b--story-one",
                 "importPath": "./docs-id-generation/B.stories.jsx",
                 "name": "Story One",
+                "subtype": "story",
                 "tags": [
                   "dev",
                   "test",
diff --git a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
index 41cfdf116fcd..cac3705ce221 100644
--- a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
+++ b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
@@ -70,6 +70,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -85,6 +86,7 @@ describe('story extraction', () => {
             "id": "some-fully-custom-id",
             "importPath": "./src/A.stories.js",
             "name": "Another Story Name",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -132,6 +134,7 @@ describe('story extraction', () => {
             "id": "f--story-one",
             "importPath": "./src/first-nested/deeply/F.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [],
             "title": "F",
             "type": "story",
@@ -181,6 +184,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/first-nested/deeply/F.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -232,6 +236,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -301,6 +306,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -316,6 +322,7 @@ describe('story extraction', () => {
             "id": "custom-title--story-two",
             "importPath": "./src/A.stories.js",
             "name": "Custom Name For Second Story",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -331,6 +338,7 @@ describe('story extraction', () => {
             "id": "custom-meta-id--story-three",
             "importPath": "./src/A.stories.js",
             "name": "Story Three",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -379,6 +387,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -444,6 +453,7 @@ describe('docs entries from story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
+            "subtype": undefined,
             "tags": [
               "autodocs",
               "story-tag-from-indexer",
diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts
index 5920551c8455..fa8aee25c48b 100644
--- a/code/core/src/core-server/utils/stories-json.test.ts
+++ b/code/core/src/core-server/utils/stories-json.test.ts
@@ -146,6 +146,7 @@ describe('useStoriesJson', () => {
               "id": "a--story-one",
               "importPath": "./src/A.stories.js",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -172,6 +173,7 @@ describe('useStoriesJson', () => {
               "id": "b--story-one",
               "importPath": "./src/B.stories.ts",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -185,6 +187,7 @@ describe('useStoriesJson', () => {
               "id": "componentpath-extension--story-one",
               "importPath": "./src/componentPath/extension.stories.js",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -197,6 +200,7 @@ describe('useStoriesJson', () => {
               "id": "componentpath-noextension--story-one",
               "importPath": "./src/componentPath/noExtension.stories.js",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -209,6 +213,7 @@ describe('useStoriesJson', () => {
               "id": "componentpath-package--story-one",
               "importPath": "./src/componentPath/package.stories.js",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -233,6 +238,7 @@ describe('useStoriesJson', () => {
               "id": "d--story-one",
               "importPath": "./src/D.stories.jsx",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -299,6 +305,7 @@ describe('useStoriesJson', () => {
               "id": "example-button--story-one",
               "importPath": "./src/Button.stories.ts",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -311,6 +318,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-f--story-one",
               "importPath": "./src/first-nested/deeply/F.stories.js",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -322,6 +330,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-features--with-csf-1",
               "importPath": "./src/first-nested/deeply/Features.stories.jsx",
               "name": "With CSF 1",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -333,6 +342,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-features--with-play",
               "importPath": "./src/first-nested/deeply/Features.stories.jsx",
               "name": "With Play",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -345,6 +355,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-features--with-render",
               "importPath": "./src/first-nested/deeply/Features.stories.jsx",
               "name": "With Render",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -356,6 +367,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-features--with-story-fn",
               "importPath": "./src/first-nested/deeply/Features.stories.jsx",
               "name": "With Story Fn",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -367,6 +379,7 @@ describe('useStoriesJson', () => {
               "id": "first-nested-deeply-features--with-test",
               "importPath": "./src/first-nested/deeply/Features.stories.jsx",
               "name": "With Test",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -392,6 +405,7 @@ describe('useStoriesJson', () => {
               "id": "h--story-one",
               "importPath": "./src/H.stories.mjs",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -404,6 +418,7 @@ describe('useStoriesJson', () => {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
@@ -416,6 +431,7 @@ describe('useStoriesJson', () => {
               "id": "second-nested-g--story-one",
               "importPath": "./src/second-nested/G.stories.ts",
               "name": "Story One",
+              "subtype": "story",
               "tags": [
                 "dev",
                 "test",
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 0b45fd9d12ce..fbdb9198d940 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -1820,6 +1820,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
         - importPath: foo/bar.stories.js
           exportName: B
@@ -1842,6 +1843,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: B
       `);
     });
@@ -1882,6 +1884,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });
@@ -1927,6 +1930,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });
@@ -1987,6 +1991,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });
@@ -2026,6 +2031,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });
@@ -2065,6 +2071,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });
@@ -2104,6 +2111,7 @@ describe('CsfFile', () => {
             mount: false
             moduleMock: false
           type: story
+          subtype: story
           name: A
       `);
     });

From 8e06a4650d4fbd7ce4da5940fb5d1a54da248cba Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 29 Aug 2025 16:49:36 +0200
Subject: [PATCH 084/130] fix build/type issues

---
 .../blocks/blocks/external/ExternalPreview.ts |  2 ++
 .../components/TestProviderRender.stories.tsx |  1 +
 .../vitest/src/node/test-manager.test.ts      |  4 +++
 .../utils/StoryIndexGenerator.test.ts         |  1 +
 .../utils/__tests__/index-extraction.test.ts  | 10 ++++++
 .../core-server/utils/summarizeIndex.test.ts  | 19 ++++++++++
 code/core/src/manager-api/lib/stories.test.ts |  2 ++
 .../manager-api/tests/mockStoriesEntries.ts   | 14 ++++++++
 code/core/src/manager-api/tests/refs.test.ts  |  2 ++
 .../src/manager-api/tests/stories.test.ts     | 36 +++++++++++++++++--
 .../components/sidebar/Sidebar.stories.tsx    |  1 +
 .../preview-web/PreviewWeb.mockdata.ts        |  4 +++
 .../modules/preview-web/PreviewWeb.test.ts    |  2 ++
 .../modules/store/StoryIndexStore.test.ts     |  3 ++
 .../modules/store/StoryStore.test.ts          |  6 ++++
 .../modules/store/storySort.test.ts           |  5 ++-
 .../src/preview/preview-navigator.stories.tsx |  6 ++++
 code/core/src/types/modules/indexer.ts        |  2 +-
 code/renderers/server/src/preset.ts           |  1 +
 19 files changed, 116 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts b/code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts
index 92ea6c8e4c8d..913df2db074d 100644
--- a/code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts
+++ b/code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts
@@ -71,9 +71,11 @@ export class ExternalPreview<TRenderer extends Renderer = Renderer> extends Prev
         title,
         name,
         type: 'story',
+        subtype: 'story',
       };
     });
 
+    // TODO: We probably need to do something here about story tests
     this.onStoriesChanged({ storyIndex: this.storyIndex });
 
     return csfFile;
diff --git a/code/addons/vitest/src/components/TestProviderRender.stories.tsx b/code/addons/vitest/src/components/TestProviderRender.stories.tsx
index fa5456ce69c1..966bd4893425 100644
--- a/code/addons/vitest/src/components/TestProviderRender.stories.tsx
+++ b/code/addons/vitest/src/components/TestProviderRender.stories.tsx
@@ -310,6 +310,7 @@ export const InSidebarContextMenu: Story = {
     entry: {
       id: 'story-id-1',
       type: 'story',
+      subtype: 'story',
       name: 'Example Story',
       tags: [],
       title: 'Example Story',
diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index ee959c42e96e..23a73dd5f277 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -102,6 +102,7 @@ global.fetch = vi.fn().mockResolvedValue({
         entries: {
           'story--one': {
             type: 'story',
+            subtype: 'story',
             id: 'story--one',
             name: 'One',
             title: 'story/one',
@@ -110,6 +111,7 @@ global.fetch = vi.fn().mockResolvedValue({
           },
           'another--one': {
             type: 'story',
+            subtype: 'story',
             id: 'another--one',
             name: 'One',
             title: 'another/one',
@@ -118,6 +120,7 @@ global.fetch = vi.fn().mockResolvedValue({
           },
           'parent--story': {
             type: 'story',
+            subtype: 'story',
             id: 'parent--story',
             name: 'Parent story',
             title: 'parent/story',
@@ -126,6 +129,7 @@ global.fetch = vi.fn().mockResolvedValue({
           },
           'parent--story:test': {
             type: 'story',
+            subtype: 'test',
             id: 'parent--story:test',
             name: 'Test name',
             title: 'parent/story',
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index a2f40f0f4409..591f5675c0a9 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -1891,6 +1891,7 @@ describe('StoryIndexGenerator', () => {
           title: 'ComponentTitle',
           importPath: 'Path',
           type: 'story',
+          subtype: 'story',
         };
         expect(() => {
           generator.chooseDuplicate(mockEntry, { ...mockEntry, importPath: 'DifferentPath' }, []);
diff --git a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
index cac3705ce221..138b5a084050 100644
--- a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
+++ b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
@@ -32,6 +32,7 @@ describe('story extraction', () => {
             // properties identical to the auto-generated ones, eg. 'StoryOne' -> 'Story One'
             {
               type: 'story',
+              subtype: 'story',
               importPath: fileName,
               exportName: 'StoryOne',
               name: 'Story One',
@@ -43,6 +44,7 @@ describe('story extraction', () => {
             // properties different from the auto-generated ones, eg. 'StoryOne' -> 'Another Story Name'
             {
               type: 'story',
+              subtype: 'story',
               importPath: fileName,
               exportName: 'StoryOne',
               name: 'Another Story Name',
@@ -114,6 +116,7 @@ describe('story extraction', () => {
               exportName: 'StoryOne',
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
@@ -164,6 +167,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
@@ -216,6 +220,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
@@ -268,6 +273,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
             // exportName + custom title (ignoring custom name) -> id
             {
@@ -277,6 +283,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
             // exportName + custom metaId (ignoring custom title and name) -> id
             {
@@ -286,6 +293,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
@@ -367,6 +375,7 @@ describe('story extraction', () => {
               tags: ['story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
@@ -421,6 +430,7 @@ describe('docs entries from story extraction', () => {
               tags: [AUTODOCS_TAG, 'story-tag-from-indexer'],
               importPath: fileName,
               type: 'story',
+              subtype: 'story',
             },
           ],
         },
diff --git a/code/core/src/core-server/utils/summarizeIndex.test.ts b/code/core/src/core-server/utils/summarizeIndex.test.ts
index a486525dbe5d..2bb1d92dd9b4 100644
--- a/code/core/src/core-server/utils/summarizeIndex.test.ts
+++ b/code/core/src/core-server/utils/summarizeIndex.test.ts
@@ -66,6 +66,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-button--secondary': {
             id: 'example-button--secondary',
@@ -74,6 +75,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-button--large': {
             id: 'example-button--large',
@@ -82,6 +84,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-button--small': {
             id: 'example-button--small',
@@ -90,6 +93,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-header--docs': {
             id: 'example-header--docs',
@@ -107,6 +111,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Header.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-header--logged-out': {
             id: 'example-header--logged-out',
@@ -115,6 +120,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Header.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-page--logged-out': {
             id: 'example-page--logged-out',
@@ -123,6 +129,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Page.stories.ts',
             tags: ['story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-page--logged-in': {
             id: 'example-page--logged-in',
@@ -131,6 +138,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Page.stories.ts',
             tags: ['play-fn', 'story'],
             type: 'story',
+            subtype: 'story',
           },
         },
       })
@@ -182,6 +190,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-button--warning': {
             id: 'example-button--warning',
@@ -190,6 +199,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story', 'svelte-csf-v4'],
             type: 'story',
+            subtype: 'story',
           },
         },
       })
@@ -223,6 +233,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/renderers/react/errors.stories.tsx',
             tags: ['story'],
             type: 'story',
+            subtype: 'story',
           },
           'stories-renderers-react-hooks--basic': {
             id: 'stories-renderers-react-hooks--basic',
@@ -231,6 +242,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/renderers/react/hooks.stories.tsx',
             tags: ['story'],
             type: 'story',
+            subtype: 'story',
           },
           'stories-renderers-react-js-argtypes--js-class-component': {
             id: 'stories-renderers-react-js-argtypes--js-class-component',
@@ -239,6 +251,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/renderers/react/js-argtypes.stories.jsx',
             tags: ['story', 'svelte-csf-v5'],
             type: 'story',
+            subtype: 'story',
           },
           'stories-renderers-react-js-argtypes--js-function-component': {
             id: 'stories-renderers-react-js-argtypes--js-function-component',
@@ -247,6 +260,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/renderers/react/js-argtypes.stories.jsx',
             tags: ['story', 'svelte-csf-v4'],
             type: 'story',
+            subtype: 'story',
           },
         },
       })
@@ -280,6 +294,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Page.stories.ts',
             tags: ['story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-page--logged-in': {
             id: 'example-page--logged-in',
@@ -288,6 +303,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Page.stories.ts',
             tags: ['play-fn', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'addons-docs-docspage-autoplay--docs': {
             id: 'addons-docs-docspage-autoplay--docs',
@@ -305,6 +321,7 @@ describe('summarizeIndex', () => {
             importPath: './template-stories/addons/docs/docspage/autoplay.stories.ts',
             tags: ['play-fn', 'story'],
             type: 'story',
+            subtype: 'story',
           },
         },
       })
@@ -347,6 +364,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'example-button--small': {
             id: 'example-button--small',
@@ -355,6 +373,7 @@ describe('summarizeIndex', () => {
             importPath: './src/stories/Button.stories.ts',
             tags: ['autodocs', 'story'],
             type: 'story',
+            subtype: 'story',
           },
           'lib-preview-api-shortcuts--docs': {
             id: 'lib-preview-api-shortcuts--docs',
diff --git a/code/core/src/manager-api/lib/stories.test.ts b/code/core/src/manager-api/lib/stories.test.ts
index 299ad2c12ae6..8b0a812e2080 100644
--- a/code/core/src/manager-api/lib/stories.test.ts
+++ b/code/core/src/manager-api/lib/stories.test.ts
@@ -233,6 +233,7 @@ describe('transformStoryIndexToStoriesHash', () => {
         '1': {
           id: '1',
           type: 'story',
+          subtype: 'story',
           title: 'Story 1',
           name: 'Story 1',
           importPath: './path/to/story-1.ts',
@@ -242,6 +243,7 @@ describe('transformStoryIndexToStoriesHash', () => {
         '2': {
           id: '2',
           type: 'story',
+          subtype: 'story',
           title: 'Story 2',
           name: 'Story 2',
           importPath: './path/to/story-2.ts',
diff --git a/code/core/src/manager-api/tests/mockStoriesEntries.ts b/code/core/src/manager-api/tests/mockStoriesEntries.ts
index a66fd8184896..fde09e90100e 100644
--- a/code/core/src/manager-api/tests/mockStoriesEntries.ts
+++ b/code/core/src/manager-api/tests/mockStoriesEntries.ts
@@ -11,6 +11,7 @@ export const mockEntries: StoryIndex['entries'] = {
   },
   'component-a--story-1': {
     type: 'story',
+    subtype: 'story',
     id: 'component-a--story-1',
     title: 'Component A',
     name: 'Story 1',
@@ -18,6 +19,7 @@ export const mockEntries: StoryIndex['entries'] = {
   },
   'component-a--story-2': {
     type: 'story',
+    subtype: 'story',
     id: 'component-a--story-2',
     title: 'Component A',
     name: 'Story 2',
@@ -25,6 +27,7 @@ export const mockEntries: StoryIndex['entries'] = {
   },
   'component-b--story-3': {
     type: 'story',
+    subtype: 'story',
     id: 'component-b--story-3',
     title: 'Component B',
     name: 'Story 3',
@@ -34,6 +37,7 @@ export const mockEntries: StoryIndex['entries'] = {
 export const docsEntries: StoryIndex['entries'] = {
   'component-a--page': {
     type: 'story',
+    subtype: 'story',
     id: 'component-a--page',
     title: 'Component A',
     name: 'Page',
@@ -41,6 +45,7 @@ export const docsEntries: StoryIndex['entries'] = {
   },
   'component-a--story-2': {
     type: 'story',
+    subtype: 'story',
     id: 'component-a--story-2',
     title: 'Component A',
     name: 'Story 2',
@@ -56,6 +61,7 @@ export const docsEntries: StoryIndex['entries'] = {
   },
   'component-c--story-4': {
     type: 'story',
+    subtype: 'story',
     id: 'component-c--story-4',
     title: 'Component c',
     name: 'Story 4',
@@ -65,6 +71,7 @@ export const docsEntries: StoryIndex['entries'] = {
 export const navigationEntries: StoryIndex['entries'] = {
   'a--1': {
     type: 'story',
+    subtype: 'story',
     title: 'a',
     name: '1',
     id: 'a--1',
@@ -72,6 +79,7 @@ export const navigationEntries: StoryIndex['entries'] = {
   },
   'a--2': {
     type: 'story',
+    subtype: 'story',
     title: 'a',
     name: '2',
     id: 'a--2',
@@ -79,6 +87,7 @@ export const navigationEntries: StoryIndex['entries'] = {
   },
   'b-c--1': {
     type: 'story',
+    subtype: 'story',
     title: 'b/c',
     name: '1',
     id: 'b-c--1',
@@ -86,6 +95,7 @@ export const navigationEntries: StoryIndex['entries'] = {
   },
   'b-d--1': {
     type: 'story',
+    subtype: 'story',
     title: 'b/d',
     name: '1',
     id: 'b-d--1',
@@ -93,6 +103,7 @@ export const navigationEntries: StoryIndex['entries'] = {
   },
   'b-d--2': {
     type: 'story',
+    subtype: 'story',
     title: 'b/d',
     name: '2',
     id: 'b-d--2',
@@ -100,6 +111,7 @@ export const navigationEntries: StoryIndex['entries'] = {
   },
   'custom-id--1': {
     type: 'story',
+    subtype: 'story',
     title: 'b/e',
     name: '1',
     id: 'custom-id--1',
@@ -109,6 +121,7 @@ export const navigationEntries: StoryIndex['entries'] = {
 export const preparedEntries: API_PreparedStoryIndex['entries'] = {
   'a--1': {
     type: 'story',
+    subtype: 'story',
     title: 'a',
     name: '1',
     parameters: {},
@@ -118,6 +131,7 @@ export const preparedEntries: API_PreparedStoryIndex['entries'] = {
   },
   'b--1': {
     type: 'story',
+    subtype: 'story',
     title: 'b',
     name: '1',
     parameters: {},
diff --git a/code/core/src/manager-api/tests/refs.test.ts b/code/core/src/manager-api/tests/refs.test.ts
index b277f2b9ea8c..07eddf864e49 100644
--- a/code/core/src/manager-api/tests/refs.test.ts
+++ b/code/core/src/manager-api/tests/refs.test.ts
@@ -1227,6 +1227,7 @@ describe('Refs API', () => {
             name: '1',
             importPath: './path/to/a1.ts',
             type: 'story',
+            subtype: 'story',
           },
           'a--2': {
             id: 'a--2',
@@ -1234,6 +1235,7 @@ describe('Refs API', () => {
             name: '2',
             importPath: './path/to/a2.ts',
             type: 'story',
+            subtype: 'story',
           },
         },
       };
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index 0a922aa186ec..a7d0fdc8c295 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -146,6 +146,7 @@ describe('stories API', () => {
         entries: {
           'design-system-some-component--my-story': {
             type: 'story',
+            subtype: 'story',
             id: 'design-system-some-component--my-story',
             title: '  Design System  /  Some Component  ', // note the leading/trailing whitespace around each part of the path
             name: '  My Story  ', // we only trim the path, so this will be kept as-is (it may intentionally have whitespace)
@@ -184,6 +185,7 @@ describe('stories API', () => {
         entries: {
           'root-first--story-1': {
             type: 'story',
+            subtype: 'story',
             id: 'root-first--story-1',
             title: 'Root/First',
             name: 'Story 1',
@@ -223,6 +225,7 @@ describe('stories API', () => {
         entries: {
           'a-b--1': {
             type: 'story',
+            subtype: 'story',
             id: 'a-b--1',
             title: 'a/b',
             name: '1',
@@ -264,6 +267,7 @@ describe('stories API', () => {
         entries: {
           'a--1': {
             type: 'story',
+            subtype: 'story',
             id: 'a--1',
             title: 'a',
             name: '1',
@@ -296,6 +300,7 @@ describe('stories API', () => {
         entries: {
           'a--1': {
             type: 'story',
+            subtype: 'story',
             id: 'a--1',
             title: 'a',
             name: '1',
@@ -304,6 +309,7 @@ describe('stories API', () => {
           },
           'a--2': {
             type: 'story',
+            subtype: 'story',
             id: 'a--2',
             title: 'a',
             name: '2',
@@ -348,6 +354,7 @@ describe('stories API', () => {
         entries: {
           'a-sampleone': {
             type: 'story',
+            subtype: 'story',
             id: 'a-sampleone',
             title: 'A/SampleOne',
             name: '1',
@@ -356,6 +363,7 @@ describe('stories API', () => {
           },
           'a-sampletwo': {
             type: 'story',
+            subtype: 'story',
             id: 'a-sampletwo',
             title: 'A/SampleTwo',
             name: '2',
@@ -418,9 +426,30 @@ describe('stories API', () => {
       api.setIndex({
         v: 5,
         entries: {
-          'a--1': { type: 'story', title: 'a', name: '1', id: 'a--1', importPath: './a.ts' },
-          'b--1': { type: 'story', title: 'b', name: '1', id: 'b--1', importPath: './b.ts' },
-          'a--2': { type: 'story', title: 'a', name: '2', id: 'a--2', importPath: './a.ts' },
+          'a--1': {
+            type: 'story',
+            subtype: 'story',
+            title: 'a',
+            name: '1',
+            id: 'a--1',
+            importPath: './a.ts',
+          },
+          'b--1': {
+            type: 'story',
+            subtype: 'story',
+            title: 'b',
+            name: '1',
+            id: 'b--1',
+            importPath: './b.ts',
+          },
+          'a--2': {
+            type: 'story',
+            subtype: 'story',
+            title: 'a',
+            name: '2',
+            id: 'a--2',
+            importPath: './a.ts',
+          },
         },
       });
       const { index } = store.getState();
@@ -447,6 +476,7 @@ describe('stories API', () => {
         entries: {
           'prepared--story': {
             type: 'story',
+            subtype: 'story',
             id: 'prepared--story',
             title: 'Prepared',
             name: 'Story',
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index d422baf27a4b..8757ce4c2140 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -76,6 +76,7 @@ const meta = {
           title: 'dummy',
           importPath: './dummy.stories.js',
           type: 'story',
+          subtype: 'story',
           tags: ['A', 'B', 'C', 'dev'],
         },
       },
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
index 64ae00dfc9cd..1341774121e9 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
@@ -110,6 +110,7 @@ export const storyIndex: StoryIndex = {
     },
     'component-one--a': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--a',
       title: 'Component One',
       name: 'A',
@@ -117,6 +118,7 @@ export const storyIndex: StoryIndex = {
     },
     'component-one--b': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--b',
       title: 'Component One',
       name: 'B',
@@ -124,6 +126,7 @@ export const storyIndex: StoryIndex = {
     },
     'component-one--e': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--e',
       title: 'Component One',
       name: 'E',
@@ -140,6 +143,7 @@ export const storyIndex: StoryIndex = {
     },
     'component-two--c': {
       type: 'story',
+      subtype: 'story',
       id: 'component-two--c',
       title: 'Component Two',
       name: 'C',
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index 056d94e7e040..7683c0d11baa 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -337,6 +337,7 @@ describe('PreviewWeb', () => {
               ...storyIndex.entries,
               'component-one--missing': {
                 type: 'story',
+                subtype: 'story',
                 id: 'component-one--missing',
                 title: 'Component One',
                 name: 'D',
@@ -392,6 +393,7 @@ describe('PreviewWeb', () => {
                 ...storyIndex.entries,
                 'component-one--missing': {
                   type: 'story',
+                  subtype: 'story',
                   id: 'component-one--missing',
                   title: 'Component One',
                   name: 'D',
diff --git a/code/core/src/preview-api/modules/store/StoryIndexStore.test.ts b/code/core/src/preview-api/modules/store/StoryIndexStore.test.ts
index e28a63b8533d..3ad12a1b49ea 100644
--- a/code/core/src/preview-api/modules/store/StoryIndexStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryIndexStore.test.ts
@@ -11,6 +11,7 @@ const storyIndex: StoryIndex = {
   entries: {
     'component-one--a': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--a',
       title: 'Component One',
       name: 'A',
@@ -18,6 +19,7 @@ const storyIndex: StoryIndex = {
     },
     'component-one--b': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--b',
       title: 'Component One',
       name: 'B',
@@ -25,6 +27,7 @@ const storyIndex: StoryIndex = {
     },
     'component-two--c': {
       type: 'story',
+      subtype: 'story',
       id: 'component-two--c',
       title: 'Component Two',
       name: 'C',
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index e8c91ee2211d..7de00f38fb9e 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -57,6 +57,7 @@ const storyIndex: StoryIndex = {
   entries: {
     'component-one--a': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--a',
       title: 'Component One',
       name: 'A',
@@ -64,6 +65,7 @@ const storyIndex: StoryIndex = {
     },
     'component-one--b': {
       type: 'story',
+      subtype: 'story',
       id: 'component-one--b',
       title: 'Component One',
       name: 'B',
@@ -71,6 +73,7 @@ const storyIndex: StoryIndex = {
     },
     'component-two--c': {
       type: 'story',
+      subtype: 'story',
       id: 'component-two--c',
       title: 'Component Two',
       name: 'C',
@@ -211,6 +214,7 @@ describe('StoryStore', () => {
             ...storyIndex.entries,
             'new-component--story': {
               type: 'story',
+              subtype: 'story',
               id: 'new-component--story',
               title: 'New Component',
               name: 'Story',
@@ -241,6 +245,7 @@ describe('StoryStore', () => {
           entries: {
             'component-one--a': {
               type: 'story',
+              subtype: 'story',
               id: 'component-one--a',
               title: 'Component One',
               name: 'A',
@@ -270,6 +275,7 @@ describe('StoryStore', () => {
           entries: {
             'component-one--a': {
               type: 'story',
+              subtype: 'story',
               id: 'component-one--a',
               title: 'Component One',
               name: 'A',
diff --git a/code/core/src/preview-api/modules/store/storySort.test.ts b/code/core/src/preview-api/modules/store/storySort.test.ts
index 2c60aa0ddff6..80ea927bd3b7 100644
--- a/code/core/src/preview-api/modules/store/storySort.test.ts
+++ b/code/core/src/preview-api/modules/store/storySort.test.ts
@@ -24,7 +24,10 @@ describe('preview.storySort', () => {
       c_b__b: { title: 'c / b', name: 'b' },
       c_b__c: { title: 'c / b', name: 'c' },
       c__c: { title: 'c', name: 'c' },
-    }).map(([id, entry]) => [id, { type: 'story', name: 'name', ...entry, id, importPath: id }])
+    }).map(([id, entry]) => [
+      id,
+      { type: 'story', subtype: 'story', name: 'name', ...entry, id, importPath: id },
+    ])
   );
 
   it('uses configure order by default', () => {
diff --git a/code/core/src/preview/preview-navigator.stories.tsx b/code/core/src/preview/preview-navigator.stories.tsx
index 4940b4920361..1d6e083cfa14 100644
--- a/code/core/src/preview/preview-navigator.stories.tsx
+++ b/code/core/src/preview/preview-navigator.stories.tsx
@@ -28,6 +28,7 @@ const mockIndex: StoryIndex = {
       title: 'Button',
       name: 'Primary',
       type: 'story',
+      subtype: 'story',
       importPath: './button/Button.stories.ts',
     },
     'button--secondary': {
@@ -35,6 +36,7 @@ const mockIndex: StoryIndex = {
       title: 'Button',
       name: 'Secondary',
       type: 'story',
+      subtype: 'story',
       importPath: './button/Button.stories.ts',
     },
     'input--text': {
@@ -42,6 +44,7 @@ const mockIndex: StoryIndex = {
       title: 'Forms/Input',
       name: 'Text',
       type: 'story',
+      subtype: 'story',
       importPath: './components/input/Input.stories.ts',
     },
     'input--number': {
@@ -49,6 +52,7 @@ const mockIndex: StoryIndex = {
       title: 'Forms/Input',
       name: 'Number',
       type: 'story',
+      subtype: 'story',
       importPath: './components/input/Input.stories.ts',
     },
     'checkbox--default': {
@@ -56,6 +60,7 @@ const mockIndex: StoryIndex = {
       title: 'Forms/Checkbox',
       name: 'Default',
       type: 'story',
+      subtype: 'story',
       importPath: './components/checkbox/Checkbox.stories.ts',
     },
     'select--basic': {
@@ -63,6 +68,7 @@ const mockIndex: StoryIndex = {
       title: 'Forms/Select',
       name: 'Basic',
       type: 'story',
+      subtype: 'story',
       importPath: './components/select/Select.stories.ts',
     },
   },
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index ac6f3814b636..ad161b5a5852 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -146,7 +146,7 @@ export type DocsIndexInput = BaseIndexInput & {
 
 export type IndexInput = StoryIndexInput | DocsIndexInput;
 
-export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags'> {
+export interface V3CompatIndexEntry extends Omit<StoryIndexEntry, 'type' | 'tags' | 'subtype'> {
   kind: ComponentTitle;
   story: StoryName;
   parameters: Parameters;
diff --git a/code/renderers/server/src/preset.ts b/code/renderers/server/src/preset.ts
index acda308d5967..3dd49dcbea58 100644
--- a/code/renderers/server/src/preset.ts
+++ b/code/renderers/server/src/preset.ts
@@ -31,6 +31,7 @@ export const experimental_indexers: PresetProperty<'experimental_indexers'> = (
           title: content.title,
           tags,
           type: 'story',
+          subtype: 'story',
         };
       });
     },

From f70fbdafed89d54338b230eeef3a8c51fe9a59c2 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 29 Aug 2025 17:19:03 +0200
Subject: [PATCH 085/130] fix unit tests, write E2E

---
 .../utils/__tests__/index-extraction.test.ts  | 20 +++----
 code/core/src/manager-api/lib/stories.test.ts |  3 +
 .../src/manager-api/tests/stories.test.ts     | 59 ++++++++++---------
 code/e2e-tests/component-tests.spec.ts        | 46 ++++++++++++++-
 code/e2e-tests/util.ts                        | 14 ++++-
 5 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
index 138b5a084050..87a33b9abd3b 100644
--- a/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
+++ b/code/core/src/core-server/utils/__tests__/index-extraction.test.ts
@@ -72,7 +72,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -88,7 +88,7 @@ describe('story extraction', () => {
             "id": "some-fully-custom-id",
             "importPath": "./src/A.stories.js",
             "name": "Another Story Name",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -137,7 +137,7 @@ describe('story extraction', () => {
             "id": "f--story-one",
             "importPath": "./src/first-nested/deeply/F.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [],
             "title": "F",
             "type": "story",
@@ -188,7 +188,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/first-nested/deeply/F.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -241,7 +241,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -314,7 +314,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -330,7 +330,7 @@ describe('story extraction', () => {
             "id": "custom-title--story-two",
             "importPath": "./src/A.stories.js",
             "name": "Custom Name For Second Story",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -346,7 +346,7 @@ describe('story extraction', () => {
             "id": "custom-meta-id--story-three",
             "importPath": "./src/A.stories.js",
             "name": "Story Three",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -396,7 +396,7 @@ describe('story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "story-tag-from-indexer",
             ],
@@ -463,7 +463,7 @@ describe('docs entries from story extraction', () => {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
             "name": "Story One",
-            "subtype": undefined,
+            "subtype": "story",
             "tags": [
               "autodocs",
               "story-tag-from-indexer",
diff --git a/code/core/src/manager-api/lib/stories.test.ts b/code/core/src/manager-api/lib/stories.test.ts
index 8b0a812e2080..1e023e1aaf9e 100644
--- a/code/core/src/manager-api/lib/stories.test.ts
+++ b/code/core/src/manager-api/lib/stories.test.ts
@@ -191,6 +191,7 @@ describe('transformStoryIndexV4toV5', () => {
             "id": "component-a--story-1",
             "importPath": "./path/to/component-a.ts",
             "name": "Story 1",
+            "subtype": "story",
             "tags": [
               "dev",
             ],
@@ -201,6 +202,7 @@ describe('transformStoryIndexV4toV5', () => {
             "id": "component-a--story-2",
             "importPath": "./path/to/component-a.ts",
             "name": "Story 2",
+            "subtype": "story",
             "tags": [
               "dev",
             ],
@@ -211,6 +213,7 @@ describe('transformStoryIndexV4toV5', () => {
             "id": "component-b--story-3",
             "importPath": "./path/to/component-b.ts",
             "name": "Story 3",
+            "subtype": "story",
             "tags": [
               "dev",
             ],
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index a7d0fdc8c295..14cf99336351 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -1465,6 +1465,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "subtype": "story",
             "tags": [],
             "title": "a",
             "type": "story",
@@ -1477,6 +1478,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "subtype": "story",
             "tags": [],
             "title": "a",
             "type": "story",
@@ -1522,33 +1524,34 @@ describe('stories API', () => {
 
       await vi.waitFor(() => {
         expect(store.getState().filteredIndex).toMatchInlineSnapshot(`
-        {
-          "a": {
-            "children": [
-              "a--1",
-            ],
-            "depth": 0,
-            "id": "a",
-            "name": "a",
-            "parent": undefined,
-            "renderLabel": undefined,
-            "tags": [],
-            "type": "component",
-          },
-          "a--1": {
-            "depth": 1,
-            "id": "a--1",
-            "importPath": "./a.ts",
-            "name": "1",
-            "parent": "a",
-            "prepared": false,
-            "renderLabel": undefined,
-            "tags": [],
-            "title": "a",
-            "type": "story",
-          },
-        }
-      `);
+          {
+            "a": {
+              "children": [
+                "a--1",
+              ],
+              "depth": 0,
+              "id": "a",
+              "name": "a",
+              "parent": undefined,
+              "renderLabel": undefined,
+              "tags": [],
+              "type": "component",
+            },
+            "a--1": {
+              "depth": 1,
+              "id": "a--1",
+              "importPath": "./a.ts",
+              "name": "1",
+              "parent": "a",
+              "prepared": false,
+              "renderLabel": undefined,
+              "subtype": "story",
+              "tags": [],
+              "title": "a",
+              "type": "story",
+            },
+          }
+        `);
       });
     });
 
@@ -1587,6 +1590,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "subtype": "story",
             "tags": [],
             "title": "a",
             "type": "story",
@@ -1599,6 +1603,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "subtype": "story",
             "tags": [],
             "title": "a",
             "type": "story",
diff --git a/code/e2e-tests/component-tests.spec.ts b/code/e2e-tests/component-tests.spec.ts
index 1d2f81bbfe06..3059bda9d5a7 100644
--- a/code/e2e-tests/component-tests.spec.ts
+++ b/code/e2e-tests/component-tests.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import process from 'process';
 
-import { SbPage } from './util';
+import { SbPage, checkTemplate } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -52,7 +52,7 @@ test.describe('interactions', () => {
     );
     test.skip(
       browserName === 'firefox',
-      `Skipping on FIreFox, which has trouble with "initial value"`
+      `Skipping on FireFox, which has trouble with "initial value"`
     );
 
     const sbPage = new SbPage(page, expect);
@@ -144,3 +144,45 @@ test.describe('interactions', () => {
     await expect(panel).toBeVisible();
   });
 });
+
+test.describe('test function', () => {
+  test.skip(
+    checkTemplate(templateName, (template) => template.expected.renderer !== '@storybook/react'),
+    `Skipping ${templateName}, which does not support test functions`
+  );
+  test.skip(
+    templateName.includes('react-native-web'),
+    'React Native does not use className locators'
+  );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+  });
+
+  test('should execute steps in the test function', async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+    await sbPage.deepLinkToStory(
+      storybookUrl,
+      'stories/renderers/react/test-fn',
+      'default',
+      'simple'
+    );
+    await sbPage.viewAddonPanel('Interactions');
+
+    const welcome = sbPage.previewRoot().locator('button');
+    await expect(welcome).toContainText('Arg from story', { timeout: 50000 });
+
+    const interactionsTab = page.locator('#tabbutton-storybook-interactions-panel');
+    await expect(interactionsTab).toContainText(/(\d)/);
+    await expect(interactionsTab).toBeVisible();
+
+    const panel = sbPage.panelContent();
+    await expect(panel).toContainText(/Pass/);
+    await expect(panel).toContainText(/userEvent.click/);
+    await expect(panel).toBeVisible();
+
+    const done = panel.locator('[data-testid=icon-done]').nth(0);
+    await expect(done).toBeVisible();
+  });
+});
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index 1ecef0d1c498..10540c6e881a 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -30,10 +30,10 @@ export class SbPage {
   }
 
   /** Visit a story via the URL instead of selecting from the sidebar. */
-  async deepLinkToStory(baseURL: string, title: string, name: 'docs' | string) {
+  async deepLinkToStory(baseURL: string, title: string, name: 'docs' | string, testName?: string) {
     const titleId = toId(title);
     const storyId = toId(name);
-    const storyLinkId = `${titleId}--${storyId}`;
+    const storyLinkId = testName ? `${titleId}--${storyId}:${testName}` : `${titleId}--${storyId}`;
     const viewMode = name === 'docs' ? 'docs' : 'story';
     await this.page.goto(`${baseURL}/?path=/${viewMode}/${storyLinkId}`);
 
@@ -208,6 +208,16 @@ const templates = allTemplates;
 export const hasVitestIntegration =
   !templates[templateName]?.skipTasks?.includes('vitest-integration');
 
+export const checkTemplate = (
+  templateName: string,
+  predicate: (template: (typeof templates)[keyof typeof templates]) => boolean
+) => {
+  return (
+    templates[templateName as keyof typeof templates] &&
+    predicate(templates[templateName as keyof typeof templates])
+  );
+};
+
 export const hasOnboardingFeature = (templateName: string) =>
   ['@storybook/react', '@storybook/vue3', '@storybook/angular'].includes(
     templates[templateName as keyof typeof templates]?.expected.renderer

From eefc73e0fc2f86d3cadfc0f9a2ea6c5721a13cdf Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 28 Aug 2025 20:46:05 +0200
Subject: [PATCH 086/130] fix indexing of tests

---
 code/core/src/csf-tools/CsfFile.test.ts |  7 ++++--
 code/core/src/csf-tools/CsfFile.ts      | 29 ++++++++++---------------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index fbdb9198d940..9f7787045b4c 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -2449,7 +2449,8 @@ describe('CsfFile', () => {
             A.test('simple test', async () => {})
             A.test('with overrides', { args: { label: 'bar' } }, async () => {})
             const runTest = () => {}
-            A.test('with function reference', runTest, async () => {})
+            A.test('with function reference', runTest)
+            A.test('with function call', runTest())
           `,
           { makeTitle }
         ).parse();
@@ -2457,13 +2458,15 @@ describe('CsfFile', () => {
         expect(story.__stats.tests).toBe(true);
 
         const storyTests = data._storyTests['A'];
-        expect(storyTests).toHaveLength(3);
+        expect(storyTests).toHaveLength(4);
         expect(storyTests[0].name).toBe('simple test');
         expect(storyTests[1].name).toBe('with overrides');
         expect(storyTests[2].name).toBe('with function reference');
+        expect(storyTests[3].name).toBe('with function call');
         expect(storyTests[0].function).toBeDefined();
         expect(storyTests[1].function).toBeDefined();
         expect(storyTests[2].function).toBeDefined();
+        expect(storyTests[3].function).toBeDefined();
       });
 
       it('story name', () => {
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index c9ca6b84fc22..5d1ed896fa64 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -703,23 +703,18 @@ export class CsfFile {
               self._storyTests[exportName] = [];
             }
 
-            if (
-              t.isArrowFunctionExpression(testFunction) ||
-              t.isFunctionExpression(testFunction) ||
-              t.isIdentifier(testFunction)
-            ) {
-              self._storyTests[exportName].push({
-                function: testFunction,
-                name: testName,
-                options: testOptions,
-                node: expression,
-                // can't set id because meta title isn't available yet
-                // so it's set later on
-                id: 'FIXME',
-              });
-
-              self._stories[exportName].__stats.tests = true;
-            }
+            self._storyTests[exportName].push({
+              function: testFunction,
+              name: testName,
+              options: testOptions,
+              node: expression,
+              // can't set id because meta title isn't available yet
+              // so it's set later on
+              id: 'FIXME',
+            });
+
+            // TODO: fix this when stories fail
+            self._stories[exportName].__stats.tests = true;
           }
         },
       },

From 5344b3fe89a777f8481a72153095917a7bcfabce Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 29 Aug 2025 17:40:33 +0200
Subject: [PATCH 087/130] fix snapshot

---
 code/core/src/csf-tools/vitest-plugin/transformer.test.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 0cd22aba76c7..e5007c247730 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -789,7 +789,7 @@ describe('transformer', () => {
         import { config } from '#.storybook/preview';
         const meta = config.meta({ component: Button });
         export const A = meta.story({});
-        A.test("foo", () => {}, { args: { primary: true }});
+        A.test("foo", { args: { primary: true }}, () => {});
         A.test("bar", () => {});
       `;
 
@@ -804,16 +804,17 @@ describe('transformer', () => {
             title: "automatic/calculated/title"
           });
           export const A = meta.story({});
-          A.test("foo", () => {}, {
+          A.test("foo", {
             args: {
               primary: true
             }
-          });
+          }, () => {});
           A.test("bar", () => {});
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
             _describe("A", () => {
               _test("base story", _testStory("A", A, meta, []));
+              _test("foo", _testStory("A", A, meta, [], "foo"));
               _test("bar", _testStory("A", A, meta, [], "bar"));
             });
           }

From c166dc4492c0fa3fd54811c5ed465a7ef5e0dfc1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 29 Aug 2025 18:00:40 +0200
Subject: [PATCH 088/130] fix check

---
 code/core/src/core-server/utils/summarizeIndex.test.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/code/core/src/core-server/utils/summarizeIndex.test.ts b/code/core/src/core-server/utils/summarizeIndex.test.ts
index 70b3d3178606..a90e0b27f703 100644
--- a/code/core/src/core-server/utils/summarizeIndex.test.ts
+++ b/code/core/src/core-server/utils/summarizeIndex.test.ts
@@ -298,6 +298,7 @@ describe('summarizeIndex', () => {
         entries: {
           'component-testing-test-fn--default': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default',
             name: 'Default',
             title: 'component-testing/test-fn',
@@ -306,6 +307,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default:simple': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default:simple',
             name: 'simple',
             title: 'component-testing/test-fn',
@@ -315,6 +317,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default:referring-to-function-in-file': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default:referring-to-function-in-file',
             name: 'referring to function in file',
             title: 'component-testing/test-fn',
@@ -324,6 +327,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default:with-overrides': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default:with-overrides',
             name: 'with overrides',
             title: 'component-testing/test-fn',
@@ -333,6 +337,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default:with-play-function': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default:with-play-function',
             name: 'with play function',
             title: 'component-testing/test-fn',
@@ -342,6 +347,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default-extended': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default-extended',
             name: 'Default Extended',
             title: 'component-testing/test-fn',
@@ -350,6 +356,7 @@ describe('summarizeIndex', () => {
           },
           'component-testing-test-fn--default-extended:should-have-extended-args': {
             type: 'story',
+            subtype: 'story',
             id: 'component-testing-test-fn--default-extended:should-have-extended-args',
             name: 'should have extended args',
             title: 'component-testing/test-fn',

From 07d688d21191d35437f847d5882d7c467b8a48a6 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 1 Sep 2025 09:45:04 +0200
Subject: [PATCH 089/130] Update tags filter UI

Cherry-picked from https://github.com/storybookjs/storybook/commit/069516a18d74f3a31304fb06f66d91616d30b59d
---
 .../components/tooltip/ListItem.tsx           |   3 -
 .../components/tooltip/WithTooltip.tsx        |  13 +-
 .../manager/components/sidebar/TagsFilter.tsx |  39 +++--
 .../sidebar/TagsFilterPanel.stories.tsx       |  22 ++-
 .../components/sidebar/TagsFilterPanel.tsx    | 153 +++++++++++++-----
 code/e2e-tests/tags.spec.ts                   |  61 +++++++
 6 files changed, 228 insertions(+), 63 deletions(-)

diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
index 830eac72f49b..421d4e27e5bf 100644
--- a/code/core/src/components/components/tooltip/ListItem.tsx
+++ b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -54,9 +54,6 @@ const Right = styled.span<RightProps>({
     margin: '3px 0',
     verticalAlign: 'top',
   },
-  '& path': {
-    fill: 'inherit',
-  },
 });
 
 const Center = styled.span<{ isIndented: boolean }>(
diff --git a/code/core/src/components/components/tooltip/WithTooltip.tsx b/code/core/src/components/components/tooltip/WithTooltip.tsx
index 05755a541729..8276bcd5e43a 100644
--- a/code/core/src/components/components/tooltip/WithTooltip.tsx
+++ b/code/core/src/components/components/tooltip/WithTooltip.tsx
@@ -44,6 +44,11 @@ export interface WithTooltipPureProps
    * @default false
    */
   closeOnOutsideClick?: boolean;
+  /**
+   * Optional container to portal the tooltip into. Can be a CSS selector string or a DOM Element.
+   * Falls back to document.body.
+   */
+  portalContainer?: Element | string | null;
 }
 
 // Pure, does not bind to the body
@@ -87,6 +92,7 @@ const WithTooltipPure = ({
   strategy,
   followCursor,
   onVisibleChange,
+  portalContainer,
   ...props
 }: WithTooltipPureProps) => {
   const Container = svg ? TargetSvgContainer : TargetContainer;
@@ -119,6 +125,11 @@ const WithTooltipPure = ({
     }
   );
 
+  const portalTarget: Element =
+    (typeof portalContainer === 'string'
+      ? document.querySelector(portalContainer)
+      : portalContainer) || document.body;
+
   const tooltipComponent = isVisible ? (
     <Tooltip
       placement={state?.placement}
@@ -138,7 +149,7 @@ const WithTooltipPure = ({
       <Container trigger={trigger} ref={setTriggerRef as any} {...(props as any)}>
         {children}
       </Container>
-      {isVisible && ReactDOM.createPortal(tooltipComponent, document.body)}
+      {isVisible && ReactDOM.createPortal(tooltipComponent, portalTarget)}
     </>
   );
 };
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 8137cb8758eb..53bd6ed2182e 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -59,23 +59,27 @@ export const TagsFilter = ({
 }: TagsFilterProps) => {
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [expanded, setExpanded] = useState(false);
+  const [inverted, setInverted] = useState(false);
   const tagsActive = selectedTags.length > 0;
 
   useEffect(() => {
-    api.experimental_setFilter(
-      TAGS_FILTER,
-      (item) => selectedTags.length === 0 || selectedTags.some((tag) => item.tags?.includes(tag))
-    );
-  }, [api, selectedTags]);
+    api.experimental_setFilter(TAGS_FILTER, (item) => {
+      if (selectedTags.length === 0) {
+        return true;
+      }
+      const match = selectedTags.some((tag) => item.tags?.includes(tag));
+      return inverted ? !match : match;
+    });
+  }, [api, selectedTags, inverted]);
 
   const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
     entry.tags?.forEach((tag: Tag) => {
       if (!BUILT_IN_TAGS_HIDE.has(tag)) {
-        acc.add(tag);
+        acc.set(tag, (acc.get(tag) || 0) + 1);
       }
     });
     return acc;
-  }, new Set<Tag>());
+  }, new Map<Tag, number>());
 
   const toggleTag = useCallback(
     (tag: string) => {
@@ -87,6 +91,17 @@ export const TagsFilter = ({
     },
     [selectedTags, setSelectedTags]
   );
+  const setAllTags = useCallback(
+    (selected: boolean) => {
+      if (selected) {
+        setSelectedTags(Array.from(allTags.keys()));
+      } else {
+        setSelectedTags([]);
+        setInverted(false);
+      }
+    },
+    [allTags, setSelectedTags]
+  );
 
   const handleToggleExpand = useCallback(
     (event: React.SyntheticEvent<Element, Event>): void => {
@@ -101,20 +116,22 @@ export const TagsFilter = ({
     return null;
   }
 
-  const tags = Array.from(allTags);
-  tags.sort();
-
   return (
     <WithTooltip
       placement="bottom"
       trigger="click"
       onVisibleChange={setExpanded}
+      // render the tooltip in the mobile menu (so that the stacking context is correct) and fallback to document.body on desktop
+      portalContainer="#storybook-mobile-menu"
       tooltip={() => (
         <TagsFilterPanel
           api={api}
-          allTags={tags}
+          allTags={allTags}
           selectedTags={selectedTags}
           toggleTag={toggleTag}
+          setAllTags={setAllTags}
+          inverted={inverted}
+          setInverted={setInverted}
           isDevelopment={isDevelopment}
         />
       )}
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index 7884b231d309..8df95a0114fb 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -9,6 +9,9 @@ const meta = {
   title: 'Sidebar/TagsFilterPanel',
   args: {
     toggleTag: fn(),
+    setAllTags: fn(),
+    inverted: false,
+    setInverted: fn(),
     api: {
       getDocsUrl: () => 'https://storybook.js.org/docs/',
     } as any,
@@ -23,14 +26,14 @@ type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
   args: {
-    allTags: [],
+    allTags: new Map(),
     selectedTags: [],
   },
 };
 
 export const BuiltInTagsOnly: Story = {
   args: {
-    allTags: ['play-fn'],
+    allTags: new Map([['play-fn', 1]]),
     selectedTags: [],
   },
 };
@@ -44,14 +47,25 @@ export const BuiltInTagsOnlyProduction: Story = {
 
 export const Default: Story = {
   args: {
-    allTags: ['tag1', 'tag2', 'tag3'],
+    allTags: new Map([
+      ['tag1', 1],
+      ['tag2', 1],
+      ['tag3', 1],
+    ]),
     selectedTags: ['tag1', 'tag3'],
   },
 };
 
+export const Inverted: Story = {
+  args: {
+    ...Default.args,
+    inverted: true,
+  },
+};
+
 export const BuiltInTags: Story = {
   args: {
-    allTags: [...Default.args.allTags, 'play-fn'],
+    allTags: new Map([...Default.args.allTags, ['play-fn', 1]]),
     selectedTags: ['tag1', 'tag3'],
   },
 };
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index d78fa9b23120..cd7dc975346c 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -1,27 +1,60 @@
 import React from 'react';
 
-import { TooltipLinkList } from 'storybook/internal/components';
+import { Form, IconButton, TooltipLinkList } from 'storybook/internal/components';
 import type { Tag } from 'storybook/internal/types';
 
-import { ShareAltIcon } from '@storybook/icons';
+import {
+  BatchAcceptIcon,
+  CloseIcon,
+  DocumentIcon,
+  EyeCloseIcon,
+  EyeIcon,
+  ShareAltIcon,
+} from '@storybook/icons';
 
 import type { API } from 'storybook/manager-api';
-import { styled, useTheme } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
 
-const BUILT_IN_TAGS_SHOW = new Set(['play-fn']);
+const BUILT_IN_TAGS = new Set([
+  'dev',
+  'test',
+  'dev-only',
+  'test-only',
+  'docs-only',
+  'autodocs',
+  'attached-mdx',
+  'unattached-mdx',
+  'play-fn',
+  'test-fn',
+  'vitest',
+  'svelte-csf',
+  'svelte-csf-v4',
+  'svelte-csf-v5',
+]);
 
 const Wrapper = styled.div({
-  minWidth: 180,
-  maxWidth: 220,
+  minWidth: 240,
+  maxWidth: 300,
 });
 
+const Actions = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: 4,
+  padding: 4,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+}));
+
 interface TagsFilterPanelProps {
   api: API;
-  allTags: Tag[];
+  allTags: Map<Tag, number>;
   selectedTags: Tag[];
   toggleTag: (tag: Tag) => void;
+  setAllTags: (selected: boolean) => void;
+  inverted: boolean;
+  setInverted: (inverted: boolean) => void;
   isDevelopment: boolean;
 }
 
@@ -30,54 +63,62 @@ export const TagsFilterPanel = ({
   allTags,
   selectedTags,
   toggleTag,
+  setAllTags,
+  inverted,
+  setInverted,
   isDevelopment,
 }: TagsFilterPanelProps) => {
-  const userTags = allTags.filter((tag) => !BUILT_IN_TAGS_SHOW.has(tag));
+  const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
+    (acc, [tag, count]) => {
+      acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
+      return acc;
+    },
+    [[], []] as [[Tag, number][], [Tag, number][]]
+  );
+
   const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' });
 
+  const noTags = {
+    id: 'no-tags',
+    title: 'There are no tags. Use tags to organize and filter your Storybook.',
+    isIndented: false,
+  };
+
   const groups = [
-    allTags.map((tag) => {
-      const checked = selectedTags.includes(tag);
-      const id = `tag-${tag}`;
-      return {
-        id,
-        title: tag,
-        right: (
-          <input
-            type="checkbox"
-            id={id}
-            name={id}
-            value={tag}
-            checked={checked}
-            onChange={() => {
-              // The onClick handler higher up the tree will handle the toggle
-              // For controlled inputs, a onClick handler is needed, though
-              // Accessibility-wise this isn't optimal, but I guess that's a limitation
-              // of the current design of TooltipLinkList
-            }}
-          />
-        ),
-        onClick: () => toggleTag(tag),
-      };
-    }),
+    allTags.size === 0 ? [noTags] : [],
+    userEntries
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([tag, count]) => {
+        const checked = selectedTags.includes(tag);
+        const id = `tag-${tag}`;
+        return {
+          id,
+          title: tag,
+          right: count,
+          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} />,
+        };
+      }),
+    builtInEntries
+      .sort((a, b) => a[0].localeCompare(b[0]))
+      .map(([tag, count]) => {
+        const checked = selectedTags.includes(tag);
+        const id = `tag-${tag}`;
+        return {
+          id,
+          title: tag,
+          right: count,
+          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} />,
+        };
+      }),
   ] as Link[][];
 
-  if (allTags.length === 0) {
-    groups.push([
-      {
-        id: 'no-tags',
-        title: 'There are no tags. Use tags to organize and filter your Storybook.',
-        isIndented: false,
-      },
-    ]);
-  }
-
-  if (userTags.length === 0 && isDevelopment) {
+  if (userEntries.length === 0 && isDevelopment) {
     groups.push([
       {
         id: 'tags-docs',
         title: 'Learn how to add tags',
-        icon: <ShareAltIcon />,
+        icon: <DocumentIcon />,
+        right: <ShareAltIcon />,
         href: docsUrl,
       },
     ]);
@@ -85,6 +126,30 @@ export const TagsFilterPanel = ({
 
   return (
     <Wrapper>
+      {allTags.size > 0 && (
+        <Actions>
+          {selectedTags.length ? (
+            <IconButton id="unselect-all" onClick={() => setAllTags(false)}>
+              <CloseIcon />
+              Clear filters
+            </IconButton>
+          ) : (
+            <IconButton id="select-all" onClick={() => setAllTags(true)}>
+              <BatchAcceptIcon />
+              Select all
+            </IconButton>
+          )}
+          <IconButton
+            id="invert-selection"
+            disabled={selectedTags.length === 0}
+            onClick={() => setInverted(!inverted)}
+            active={inverted}
+          >
+            {inverted ? <EyeCloseIcon /> : <EyeIcon />}
+            Invert
+          </IconButton>
+        </Actions>
+      )}
       <TooltipLinkList links={groups} />
     </Wrapper>
   );
diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
index e4743c0c2974..6e1eca678db6 100644
--- a/code/e2e-tests/tags.spec.ts
+++ b/code/e2e-tests/tags.spec.ts
@@ -64,4 +64,65 @@ test.describe('tags', () => {
     await expect(preview.locator('#anchor--core-tags-remove--no-autodocs')).toHaveCount(0);
     await expect(preview.locator('#anchor--core-tags-remove--no-test')).toHaveCount(1);
   });
+
+  test.describe('Tag filters tooltip', () => {
+    test('filters stories via Tag filters tooltip (desktop)', async ({ page }) => {
+      // Open Tag filters tooltip
+      await page.locator('[title="Tag filters"]').click();
+      const tooltip = page.locator('[data-testid="tooltip"]');
+      await expect(tooltip).toBeVisible();
+
+      // No checkbox selected by default and "Select all tags" is shown
+      await expect(tooltip.locator('#select-all')).toBeVisible();
+      await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+
+      // Select the dev-only tag
+      await tooltip.locator('#list-item-tag-dev-only').click();
+
+      // Assert that only one story is visible in the sidebar
+      const stories = page.locator('#storybook-explorer-menu .sidebar-item');
+      await expect(stories).toHaveCount(1);
+
+      // Clear selection
+      await expect(tooltip.locator('#unselect-all')).toBeVisible();
+      await tooltip.locator('#unselect-all').click();
+
+      // Checkboxes are not selected anymore
+      await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+    });
+
+    test.describe('mobile viewport', () => {
+      test.use({ viewport: { width: 390, height: 844 } });
+
+      test('filters stories via Tag filters tooltip (mobile)', async ({ page }) => {
+        // Open mobile navigation menu to ensure the tooltip is portaled inside it
+        const mobileNavigationHeading = page.locator('[aria-label="Open navigation menu"]');
+        await mobileNavigationHeading.click();
+        await expect(page.locator('#storybook-explorer-menu')).toBeVisible();
+
+        // Open Tag filters tooltip
+        await page.locator('[title="Tag filters"]').click();
+        const tooltip = page.locator('[data-testid="tooltip"]');
+        await expect(tooltip).toBeVisible();
+
+        // No checkbox selected by default and "Select all tags" is shown
+        await expect(tooltip.locator('#select-all')).toBeVisible();
+        await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+
+        // Select the dev-only tag
+        await tooltip.locator('#list-item-tag-dev-only').click();
+
+        // Assert that only one story is visible in the (mobile) sidebar
+        const stories = page.locator('#storybook-explorer-menu .sidebar-item');
+        await expect(stories).toHaveCount(1);
+
+        // Clear selection
+        await expect(tooltip.locator('#unselect-all')).toBeVisible();
+        await tooltip.locator('#unselect-all').click();
+
+        // Checkboxes are not selected anymore
+        await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+      });
+    });
+  });
 });

From cf297c8485be1a6b9a7a50f32ff4c91d7da2fed7 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Sep 2025 15:34:00 +0200
Subject: [PATCH 090/130] Enhance sidebar to support test entries and improve
 story handling

- Updated HighlightStyles to include 'test' nodetype for styling.
- Added 'subtype' property to mock dataset entries for better differentiation between story and test types.
- Modified Tree and TreeNode components to handle test entries correctly.
- Adjusted API types to separate story and test entries for clearer structure.
- Improved event handling in useExpanded and useHighlighted hooks to include tests.
---
 code/core/src/manager-api/lib/stories.ts      | 44 +++----------------
 .../components/sidebar/HighlightStyles.tsx    |  2 +-
 .../src/manager/components/sidebar/Refs.tsx   |  3 +-
 .../src/manager/components/sidebar/Tree.tsx   | 44 +++++++++++--------
 .../manager/components/sidebar/TreeNode.tsx   |  7 ++-
 .../manager/components/sidebar/mockdata.ts    | 30 ++++++++-----
 .../manager/components/sidebar/useExpanded.ts |  7 ++-
 .../components/sidebar/useHighlighted.ts      |  6 +--
 code/core/src/types/modules/api-stories.ts    | 19 ++++----
 9 files changed, 71 insertions(+), 91 deletions(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 0484000ace43..2d8f6c576f74 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -10,7 +10,6 @@ import type {
   API_Provider,
   API_RootEntry,
   API_StoryEntry,
-  API_WrapperEntry,
   DocsOptions,
   IndexEntry,
   Parameters,
@@ -316,7 +315,7 @@ export const transformStoryIndexToStoriesHash = (
       acc[item.id] = item;
 
       // Ensure we add the children depth-first *before* inserting any other entries.
-      if ('children' in item) {
+      if ('children' in item && item.children) {
         item.children.forEach((childId) => addItem(acc, storiesHashOutOfOrder[childId]));
 
         item.tags =
@@ -340,49 +339,16 @@ export const transformStoryIndexToStoriesHash = (
     .filter((i) => i.type === 'root')
     .reduce(addItem, storiesHash);
 
-  // Add "wrapper" nodes for stories with tests
-  // Because the order of entries matters, we need to insert the wrapper before the story and test
+  // Update stories to include tests as children, and increase depth for those tests
   storiesHash = Object.values(storiesHash).reduce((acc, item) => {
     if (item.type === 'story' && item.subtype === 'test') {
-      const wrapperId = `${item.parent}__wrapper`;
       const parentStory = storiesHash[item.parent] as API_StoryEntry;
-      const componentNode = storiesHash[parentStory.parent] as API_ComponentEntry;
-
-      // Update component children to point to wrapper rather than story and tests
-      (acc[componentNode.id] as API_ComponentEntry).children = componentNode.children
-        .filter((id) => id !== item.id)
-        .map((id) => (id === item.parent ? wrapperId : id));
-
-      // Create the wrapper, but first delete the story so that the wrapper is inserted before it
-      if (!acc[wrapperId]) {
-        delete acc[item.parent];
-        acc[wrapperId] = {
-          ...parentStory,
-          type: 'wrapper',
-          id: wrapperId,
-          parent: parentStory.parent,
-          children: [parentStory.id],
-          depth: parentStory.depth,
-        };
-      }
-
-      const wrapperNode = acc[wrapperId] as API_WrapperEntry;
-      wrapperNode.children.push(item.id);
-      wrapperNode.tags = intersect(wrapperNode.tags, item.tags);
-
-      // Create or update parent to point to wrapper rather than story
-      // Remove test-fn tag from story, as it should only exist on the wrapper
       acc[item.parent] = {
         ...parentStory,
-        parent: wrapperId,
-        depth: parentStory.depth + 1,
-        tags: parentStory.tags.filter((tag) => tag !== 'test-fn'),
+        children: (parentStory.children || []).concat(item.id).filter((id) => storiesHash[id]),
       };
-
-      // Create or update the test to point to wrapper rather than story
       acc[item.id] = {
         ...item,
-        parent: wrapperId,
         depth: item.depth + 1,
       };
     } else {
@@ -404,6 +370,10 @@ export const addPreparedStories = (newHash: API_IndexHash, oldHash?: API_IndexHa
     Object.entries(newHash).map(([id, newEntry]) => {
       const oldEntry = oldHash[id];
       if (newEntry.type === 'story' && oldEntry?.type === 'story' && oldEntry.prepared) {
+        if ('children' in oldEntry) {
+          // Prevent old entry from re-adding children if the story no longer has any (e.g. due to filters)
+          delete oldEntry.children;
+        }
         return [id, { ...oldEntry, ...newEntry, prepared: true }];
       }
 
diff --git a/code/core/src/manager/components/sidebar/HighlightStyles.tsx b/code/core/src/manager/components/sidebar/HighlightStyles.tsx
index 80fc202a8b38..714c8f88567e 100644
--- a/code/core/src/manager/components/sidebar/HighlightStyles.tsx
+++ b/code/core/src/manager/components/sidebar/HighlightStyles.tsx
@@ -17,7 +17,7 @@ export const HighlightStyles: FC<Highlight> = ({ refId, itemId }) => (
             background,
             '&:hover, &:focus': { background },
           },
-          [`&[data-nodetype="story"], &[data-nodetype="document"]`]: {
+          [`&[data-nodetype="story"], &[data-nodetype="document"], &[data-nodetype="test"]`]: {
             color: color.defaultText,
             background,
             '&:hover, &:focus': { background },
diff --git a/code/core/src/manager/components/sidebar/Refs.tsx b/code/core/src/manager/components/sidebar/Refs.tsx
index cb70f8ea7826..ed2784597513 100644
--- a/code/core/src/manager/components/sidebar/Refs.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.tsx
@@ -121,8 +121,7 @@ export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
   );
 
   const onSelectStoryId = useCallback(
-    // @ts-expect-error (non strict)
-    (storyId: string) => api && api.selectStory(storyId, undefined, { ref: !isMain && refId }),
+    (storyId: string) => api?.selectStory(storyId, undefined, { ref: isMain ? undefined : refId }),
     [api, isMain, refId]
   );
 
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index f8f33c03fd31..5501f6526c83 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -255,6 +255,7 @@ const Node = React.memo<NodeProps>(function Node(props) {
         }));
     }
 
+    // TODO should this be updated for stories with tests?
     if (item.type === 'component' || item.type === 'group') {
       const links: Link[] = [];
       const errorCount = counts['status-value:error'];
@@ -338,17 +339,21 @@ const Node = React.memo<NodeProps>(function Node(props) {
     );
   }
 
-  if (item.type === 'component' || item.type === 'group' || item.type === 'wrapper') {
+  if (
+    item.type === 'component' ||
+    item.type === 'group' ||
+    (item.type === 'story' && 'children' in item && item.children)
+  ) {
+    const { children = [] } = item;
     const itemStatus = groupStatus?.[item.id];
     const color = itemStatus ? statusMapping[itemStatus][1] : null;
-    const BranchNode = { component: ComponentNode, group: GroupNode, wrapper: StoryNode }[
-      item.type
-    ];
+    const BranchNode = { component: ComponentNode, group: GroupNode, story: StoryNode }[item.type];
 
     return (
       <LeafNodeStyleWrapper
         key={id}
         className="sidebar-item"
+        data-selected={isSelected}
         data-ref-id={refId}
         data-item-id={item.id}
         data-parent-id={item.parent}
@@ -358,28 +363,25 @@ const Node = React.memo<NodeProps>(function Node(props) {
       >
         <BranchNode
           id={id}
-          style={color ? { color } : {}}
-          aria-controls={item.children.join(' ')}
+          style={color && !isSelected ? { color } : {}}
+          aria-controls={children.join(' ')}
           aria-expanded={isExpanded}
           depth={isOrphan ? item.depth : item.depth - 1}
-          isExpandable={item.children.length > 0}
+          isExpandable={children.length > 0}
           isExpanded={isExpanded}
           onClick={(event) => {
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
 
-            if (
-              (item.type === 'component' || item.type === 'wrapper') &&
-              !isExpanded &&
-              isDesktop
-            ) {
+            console.log('onClick', item.id, item.type, !isExpanded && isDesktop);
+            if ((item.type === 'component' || item.type === 'story') && !isExpanded && isDesktop) {
               onSelectStoryId(item.id);
             }
           }}
           onMouseEnter={() => {
-            if (item.type === 'component' || item.type === 'wrapper') {
+            if (item.type === 'component' || item.type === 'story') {
               api.emit(PRELOAD_ENTRIES, {
-                ids: [item.children[0]],
+                ids: [children[0]],
                 options: { target: refId },
               });
             }
@@ -388,9 +390,14 @@ const Node = React.memo<NodeProps>(function Node(props) {
           {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
             item.name}
         </BranchNode>
+        {isSelected && (
+          <SkipToContentLink asChild>
+            <a href="#storybook-preview-wrapper">Skip to canvas</a>
+          </SkipToContentLink>
+        )}
         {contextMenu.node}
         {(['status-value:error', 'status-value:warning'] as StatusValue[]).includes(itemStatus) && (
-          <StatusButton type="button" status={itemStatus}>
+          <StatusButton type="button" status={itemStatus} selectedItem={isSelected}>
             <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
               <UseSymbol type="dot" />
             </svg>
@@ -405,7 +412,7 @@ const Node = React.memo<NodeProps>(function Node(props) {
   const nodeType = isTest ? 'test' : { docs: 'document', story: 'story' }[item.type];
 
   const statusValue = getMostCriticalStatusValue(Object.values(statuses || {}).map((s) => s.value));
-  const [icon, textColor] = statusMapping[statusValue];
+  const [icon, color] = statusMapping[statusValue];
 
   return (
     <LeafNodeStyleWrapper
@@ -420,8 +427,7 @@ const Node = React.memo<NodeProps>(function Node(props) {
       onMouseEnter={contextMenu.onMouseEnter}
     >
       <LeafNode
-        // @ts-expect-error (non strict)
-        style={isSelected ? {} : { color: textColor }}
+        style={color && !isSelected ? { color } : {}}
         href={getLink(item, refId)}
         id={id}
         depth={isOrphan ? item.depth : item.depth - 1}
@@ -566,7 +572,7 @@ export const Tree = React.memo<{
         return true;
       }
 
-      if (onlyChild.type === 'story') {
+      if (onlyChild.type === 'story' && onlyChild.subtype === 'story') {
         return isStoryHoistable(onlyChild.name, name);
       }
       return false;
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index 112ac213fa1f..f86c0f00fd00 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -140,8 +140,8 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
   }
 );
 
-export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: boolean }> = React.memo(
-  function DocumentNode({ theme, children, docsMode, ...props }) {
+export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode?: boolean }> =
+  React.memo(function DocumentNode({ theme, children, docsMode, ...props }) {
     return (
       <LeafNode tabIndex={-1} {...props}>
         <Wrapper>
@@ -152,8 +152,7 @@ export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: bool
         {children}
       </LeafNode>
     );
-  }
-);
+  });
 
 export const StoryNode: FC<ComponentProps<typeof BranchNode>> = React.memo(function StoryNode({
   theme,
diff --git a/code/core/src/manager/components/sidebar/mockdata.ts b/code/core/src/manager/components/sidebar/mockdata.ts
index b9fc9c1a1e87..08a1abce053d 100644
--- a/code/core/src/manager/components/sidebar/mockdata.ts
+++ b/code/core/src/manager/components/sidebar/mockdata.ts
@@ -13,6 +13,7 @@ export const mockDataset: MockDataSet = {
     },
     'group-1--child-b1': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'group-1--child-b1',
       depth: 1,
@@ -25,6 +26,7 @@ export const mockDataset: MockDataSet = {
     },
     'group-1--child-b2': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'group-1--child-b2',
       depth: 1,
@@ -56,33 +58,28 @@ export const mockDataset: MockDataSet = {
       parent: 'root-1',
       name: 'Child A2',
       depth: 1,
-      children: ['root-1-child-a2--grandchild-a1-1__wrapper', 'root-1-child-a2--grandchild-a1-2'],
-    },
-    'root-1-child-a2--grandchild-a1-1__wrapper': {
-      type: 'wrapper',
-      id: 'root-1-child-a2--grandchild-a1-1__wrapper',
-      parent: 'root-1-child-a2',
-      depth: 2,
-      name: 'GrandChild A1.1',
-      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-1:test1'],
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
     },
     'root-1-child-a2--grandchild-a1-1': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'root-1-child-a2--grandchild-a1-1',
-      parent: 'root-1-child-a2--grandchild-a1-1__wrapper',
-      depth: 3,
+      parent: 'root-1-child-a2',
+      depth: 2,
       name: 'GrandChild A1.1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
+      children: ['root-1-child-a2--grandchild-a1-1:test1'],
     },
     'root-1-child-a2--grandchild-a1-1:test1': {
       type: 'story',
+      subtype: 'test',
       prepared: true,
       id: 'root-1-child-a2--grandchild-a1-1:test1',
-      parent: 'root-1-child-a2--grandchild-a1-1__wrapper',
+      parent: 'root-1-child-a2--grandchild-a1-1',
       depth: 3,
       name: 'Test 1',
       title: '',
@@ -92,6 +89,7 @@ export const mockDataset: MockDataSet = {
     },
     'root-1-child-a2--grandchild-a1-2': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'root-1-child-a2--grandchild-a1-2',
       parent: 'root-1-child-a2',
@@ -111,6 +109,7 @@ export const mockDataset: MockDataSet = {
     },
     'root-3--child-a1': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'root-3--child-a1',
       depth: 1,
@@ -131,6 +130,7 @@ export const mockDataset: MockDataSet = {
     },
     'root-3-child-a2--grandchild-a1-1': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'root-3-child-a2--grandchild-a1-1',
       depth: 2,
@@ -143,6 +143,7 @@ export const mockDataset: MockDataSet = {
     },
     'root-3-child-a2--grandchild-a1-2': {
       type: 'story',
+      subtype: 'story',
       prepared: true,
       id: 'root-3-child-a2--grandchild-a1-2',
       depth: 2,
@@ -174,6 +175,7 @@ export const mockDataset: MockDataSet = {
       depth: 1,
       name: 'Child A1',
       type: 'story',
+      subtype: 'story',
       prepared: true,
       parent: 'root-1',
       title: '',
@@ -186,6 +188,7 @@ export const mockDataset: MockDataSet = {
       depth: 2,
       name: 'GrandChild A1.1',
       type: 'story',
+      subtype: 'story',
       prepared: true,
       parent: 'root-1-child-a2',
       title: '',
@@ -198,6 +201,7 @@ export const mockDataset: MockDataSet = {
       depth: 2,
       name: 'GrandChild A1.2',
       type: 'story',
+      subtype: 'story',
       prepared: true,
       parent: 'root-1-child-a2',
       title: '',
@@ -218,6 +222,7 @@ export const mockDataset: MockDataSet = {
       depth: 1,
       name: 'Child B1',
       type: 'story',
+      subtype: 'story',
       prepared: true,
       parent: 'group-1',
       title: '',
@@ -230,6 +235,7 @@ export const mockDataset: MockDataSet = {
       depth: 1,
       name: 'Child B2',
       type: 'story',
+      subtype: 'story',
       prepared: true,
       parent: 'group-1',
       title: '',
diff --git a/code/core/src/manager/components/sidebar/useExpanded.ts b/code/core/src/manager/components/sidebar/useExpanded.ts
index c9f5282b2eaf..52f9fc33e587 100644
--- a/code/core/src/manager/components/sidebar/useExpanded.ts
+++ b/code/core/src/manager/components/sidebar/useExpanded.ts
@@ -202,8 +202,11 @@ export const useExpanded = ({
       }
 
       const type = highlightedElement.getAttribute('data-nodetype');
-      // @ts-expect-error (non strict)
-      if ((isEnter || isSpace) && ['component', 'story', 'document'].includes(type)) {
+      if (
+        type &&
+        (isEnter || isSpace) &&
+        ['component', 'story', 'document', 'test'].includes(type)
+      ) {
         onSelectStoryId(highlightedItemId);
       }
 
diff --git a/code/core/src/manager/components/sidebar/useHighlighted.ts b/code/core/src/manager/components/sidebar/useHighlighted.ts
index cced6fcaa24a..d68ebc5767c2 100644
--- a/code/core/src/manager/components/sidebar/useHighlighted.ts
+++ b/code/core/src/manager/components/sidebar/useHighlighted.ts
@@ -144,10 +144,8 @@ export const useHighlighted = ({
           // @ts-expect-error (non strict)
           const { itemId, refId } = highlightedRef.current;
           const item = api.resolveStory(itemId, refId === 'storybook_internal' ? undefined : refId);
-          // @ts-expect-error (non strict)
-          if (item.type === 'component') {
+          if (item?.type === 'component') {
             api.emit(PRELOAD_ENTRIES, {
-              // @ts-expect-error (non strict)
               ids: [item.children[0]],
               options: { target: refId },
             });
@@ -158,7 +156,7 @@ export const useHighlighted = ({
 
     document.addEventListener('keydown', navigateTree);
     return () => document.removeEventListener('keydown', navigateTree);
-  }, [isLoading, isBrowsing, highlightedRef, highlightElement]);
+  }, [api, containerRef, isLoading, isBrowsing, highlightedRef, highlightElement]);
 
   // @ts-expect-error (non strict)
   return [highlighted, updateHighlighted, highlightedRef];
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 7336962cdc54..58cd941087df 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -30,12 +30,6 @@ export interface API_ComponentEntry extends API_BaseEntry {
   children: StoryId[];
 }
 
-export interface API_WrapperEntry extends API_BaseEntry {
-  type: 'wrapper';
-  parent: StoryId;
-  children: StoryId[];
-}
-
 export interface API_DocsEntry extends API_BaseEntry {
   type: 'docs';
   parent: StoryId;
@@ -49,7 +43,7 @@ export interface API_DocsEntry extends API_BaseEntry {
 
 export interface API_StoryEntry extends API_BaseEntry {
   type: 'story';
-  subtype: 'story' | 'test';
+  subtype: 'story';
   parent: StoryId;
   title: ComponentTitle;
   importPath: Path;
@@ -60,16 +54,21 @@ export interface API_StoryEntry extends API_BaseEntry {
   args?: Args;
   argTypes?: ArgTypes;
   initialArgs?: Args;
+  children?: StoryId[];
+}
+
+export interface API_TestEntry extends Omit<API_StoryEntry, 'subtype' | 'children'> {
+  subtype: 'test';
 }
 
-export type API_LeafEntry = API_DocsEntry | API_StoryEntry;
+export type API_LeafEntry = API_DocsEntry | API_StoryEntry | API_TestEntry;
 export type API_HashEntry =
   | API_RootEntry
   | API_GroupEntry
   | API_ComponentEntry
-  | API_WrapperEntry
   | API_DocsEntry
-  | API_StoryEntry;
+  | API_StoryEntry
+  | API_TestEntry;
 
 /**
  * The `IndexHash` is our manager-side representation of the `StoryIndex`. We create entries in the

From a95c291a60c1a8f9b75fba4e142df10ffde6e4bb Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 15:42:03 +0200
Subject: [PATCH 091/130] Add default selection for tags in sidebar and update
 TagsFilter component

- Introduced 'play-fn' and 'test-fn' tags with default selection in common-preset.
- Enhanced Sidebar component to utilize tag presets for managing selected tags.
- Updated TagsFilter to initialize selected tags based on tag presets.
- Modified TagsFilter stories to reflect new tag preset functionality.
---
 .../src/core-server/presets/common-preset.ts  |  1 +
 .../manager/components/sidebar/Sidebar.tsx    | 19 ++++++++++++--
 .../components/sidebar/TagsFilter.stories.tsx | 25 ++++++++++++++-----
 .../manager/components/sidebar/TagsFilter.tsx | 10 +++++++-
 code/core/src/types/modules/core-common.ts    |  1 +
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index d3a402e3fc64..6b5724cbc3d5 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -282,6 +282,7 @@ export const resolvedReact = async (existing: any) => {
 /** Set up `dev-only`, `docs-only`, `test-only` tags out of the box */
 export const tags = async (existing: any) => {
   return {
+    // If there should be any default selected tag, add them before ...existing so users can still override them
     ...existing,
     'dev-only': { excludeFromDocsStories: true },
     'docs-only': { excludeFromSidebar: true },
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index 605dd84dae78..653e7762e05c 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -7,7 +7,7 @@ import {
   TooltipNote,
   WithTooltip,
 } from 'storybook/internal/components';
-import type { API_LoadedRefData, StoryIndex } from 'storybook/internal/types';
+import type { API_LoadedRefData, StoryIndex, TagsOptions } from 'storybook/internal/types';
 import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
@@ -152,6 +152,16 @@ export const Sidebar = React.memo(function Sidebar({
   const { isMobile } = useLayout();
   const api = useStorybookApi();
 
+  const tagPresets = useMemo(
+    () =>
+      Object.entries(global.TAGS_OPTIONS ?? {}).reduce((acc, entry) => {
+        const [tag, option] = entry;
+        acc[tag] = option;
+        return acc;
+      }, {} as TagsOptions),
+    []
+  );
+
   return (
     <Container className="container sidebar-container" aria-label="Global">
       <ScrollArea vertical offset={3} scrollbarSize={6}>
@@ -195,7 +205,12 @@ export const Sidebar = React.memo(function Sidebar({
             }
             searchFieldContent={
               indexJson && (
-                <TagsFilter api={api} indexJson={indexJson} isDevelopment={isDevelopment} />
+                <TagsFilter
+                  api={api}
+                  indexJson={indexJson}
+                  isDevelopment={isDevelopment}
+                  tagPresets={tagPresets}
+                />
               )
             }
             {...lastViewedProps}
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index d7be4feedc38..7d18f19bcda9 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { findByRole, fn } from 'storybook/test';
+import { findByRole, fn, screen } from 'storybook/test';
 
 import { TagsFilter } from './TagsFilter';
 
@@ -21,6 +21,7 @@ const meta = {
       applyQueryParams: fn().mockName('api::applyQueryParams'),
     } as any,
     isDevelopment: true,
+    tagPresets: {},
   },
 } satisfies Meta<typeof TagsFilter>;
 
@@ -42,22 +43,34 @@ export const Closed: Story = {
 export const ClosedWithSelection: Story = {
   args: {
     ...Closed.args,
-    initialSelectedTags: ['A', 'B'],
+    tagPresets: {
+      A: { defaultSelected: true },
+      B: { defaultSelected: true },
+    },
   },
 };
 
-export const Open: Story = {
+export const Open = {
   ...Closed,
   play: async ({ canvasElement }) => {
     const button = await findByRole(canvasElement, 'button');
     await button.click();
   },
-};
+} satisfies Story;
 
-export const OpenWithSelection: Story = {
+export const OpenWithSelection = {
   ...ClosedWithSelection,
   play: Open.play,
-};
+} satisfies Story;
+
+export const OpenWithSelectionAndInverted = {
+  ...ClosedWithSelection,
+  play: async (context) => {
+    await Open.play(context);
+    const button = await screen.findByRole('button', { name: 'Invert' });
+    await button.click();
+  },
+} satisfies Story;
 
 export const OpenEmpty: Story = {
   args: {
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 53bd6ed2182e..fa54409a81f2 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Badge, IconButton, WithTooltip } from 'storybook/internal/components';
-import type { StoryIndex, Tag } from 'storybook/internal/types';
+import type { StoryIndex, Tag, TagsOptions } from 'storybook/internal/types';
 
 import { FilterIcon } from '@storybook/icons';
 
@@ -49,6 +49,7 @@ export interface TagsFilterProps {
   indexJson: StoryIndex;
   initialSelectedTags?: Tag[];
   isDevelopment: boolean;
+  tagPresets: TagsOptions;
 }
 
 export const TagsFilter = ({
@@ -56,12 +57,19 @@ export const TagsFilter = ({
   indexJson,
   initialSelectedTags = [],
   isDevelopment,
+  tagPresets,
 }: TagsFilterProps) => {
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [expanded, setExpanded] = useState(false);
   const [inverted, setInverted] = useState(false);
   const tagsActive = selectedTags.length > 0;
 
+  useEffect(() => {
+    const tags = Object.keys(tagPresets);
+    const selectedTags = tags.filter((tag) => tagPresets[tag].defaultSelected);
+    setSelectedTags(selectedTags);
+  }, [tagPresets]);
+
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
       if (selectedTags.length === 0) {
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index caff102504df..fb168006ee35 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -330,6 +330,7 @@ export interface TestBuildConfig {
 type Tag = string;
 
 export interface TagOptions {
+  defaultSelected?: boolean;
   excludeFromSidebar: boolean;
   excludeFromDocsStories: boolean;
 }

From b6fbeda6281ebd2f223066f9c1836821102afc43 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 15:45:14 +0200
Subject: [PATCH 092/130] add jsdocs

---
 code/core/src/types/modules/core-common.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index fb168006ee35..6dd879f08550 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -330,6 +330,7 @@ export interface TestBuildConfig {
 type Tag = string;
 
 export interface TagOptions {
+  /** Whether the tag should be selected by default in the tags filter in Storybook */
   defaultSelected?: boolean;
   excludeFromSidebar: boolean;
   excludeFromDocsStories: boolean;

From a632036a549478e2d159ec254252920d2ffa856a Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Sep 2025 15:55:49 +0200
Subject: [PATCH 093/130] Remove console.log

---
 code/core/src/manager/components/sidebar/Tree.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 5501f6526c83..42dbd0bba992 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -373,7 +373,6 @@ const Node = React.memo<NodeProps>(function Node(props) {
             event.preventDefault();
             setExpanded({ ids: [item.id], value: !isExpanded });
 
-            console.log('onClick', item.id, item.type, !isExpanded && isDesktop);
             if ((item.type === 'component' || item.type === 'story') && !isExpanded && isDesktop) {
               onSelectStoryId(item.id);
             }

From 0b3d490ae261ca7a3b2f49f782a3a1ab9b1c711c Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Sep 2025 16:17:17 +0200
Subject: [PATCH 094/130] Enhance Button story rendering and improve sidebar
 node expansion logic

---
 .../component-testing/components/test-fn.stories.tsx |  8 ++++++++
 code/core/src/manager/components/sidebar/Tree.tsx    | 12 +++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/code/core/src/component-testing/components/test-fn.stories.tsx b/code/core/src/component-testing/components/test-fn.stories.tsx
index c49a9308c26e..6b926a961913 100644
--- a/code/core/src/component-testing/components/test-fn.stories.tsx
+++ b/code/core/src/component-testing/components/test-fn.stories.tsx
@@ -10,6 +10,14 @@ const Button = (args: React.ComponentProps<'button'>) => <button {...args} />;
 
 const meta = preview.meta({
   component: Button,
+  render: (args, { name }) => (
+    <span>
+      {name}
+      <br />
+      <br />
+      <button {...args} />
+    </span>
+  ),
   args: {
     children: 'Default',
     onClick: fn(),
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 42dbd0bba992..88a02b053be4 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -371,10 +371,16 @@ const Node = React.memo<NodeProps>(function Node(props) {
           isExpanded={isExpanded}
           onClick={(event) => {
             event.preventDefault();
-            setExpanded({ ids: [item.id], value: !isExpanded });
-
-            if ((item.type === 'component' || item.type === 'story') && !isExpanded && isDesktop) {
+            if (item.type === 'story') {
               onSelectStoryId(item.id);
+              if (!isExpanded || isSelected) {
+                setExpanded({ ids: [item.id], value: !isExpanded });
+              }
+            } else if (item.type === 'component') {
+              if (!isExpanded && isDesktop) {
+                onSelectStoryId(item.id);
+              }
+              setExpanded({ ids: [item.id], value: !isExpanded });
             }
           }}
           onMouseEnter={() => {

From 9f16a26ad8edd94115489c1844c3bb3c288b8dac Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Sep 2025 16:58:48 +0200
Subject: [PATCH 095/130] Update VitestManager to use correct RegExp

---
 code/addons/vitest/src/node/vitest-manager.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index 7b73691a261b..de7ead667481 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -271,6 +271,10 @@ export class VitestManager {
       ? allStories.filter((story) => runPayload.storyIds?.includes(story.id))
       : allStories;
 
+    // When we run tests that involved a describe block (parent story + tests)
+    // we need to remove spaces from the parent story name, as the describe block does not have spaces
+    const getExportName = (name: string) => name.replace(/\s+/g, '');
+
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
       const selectedStory = filteredStories.find((story) => story.id === runPayload.storyIds?.[0]);
@@ -278,7 +282,7 @@ export class VitestManager {
         throw new Error(`Story ${runPayload.storyIds?.[0]} not found`);
       }
 
-      const storyName = selectedStory.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const storyName = selectedStory.name;
       let regex: RegExp;
 
       const isParentStory = allStories.some((story) => selectedStory.id === story.parent);
@@ -298,7 +302,8 @@ export class VitestManager {
          * present in the Vitest VSCode extension and the issue would occur with normal vitest tests
          * as well.
          */
-        regex = new RegExp(`^${storyName.replace(/\s+/g, '')} `); // the extra space is intentional!
+        const parentName = getExportName(selectedStory.name);
+        regex = new RegExp(`^${parentName} `); // the extra space is intentional!
       } else if (hasParentStory) {
         // Use case 2: Single story run on a specific story test
         // in this case the regex pattern should be the story parentName + story.name
@@ -307,7 +312,7 @@ export class VitestManager {
           throw new Error(`Parent story not found for story ${selectedStory.id}`);
         }
 
-        const parentName = parentStory.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const parentName = getExportName(parentStory.name);
         regex = new RegExp(`^${parentName} ${storyName}$`);
       } else {
         // Use case 3: Single story run on a story without tests

From 5705bb5fb6682e86f10bf5cebb1a8e30cc6a7dc1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 17:31:26 +0200
Subject: [PATCH 096/130] update to use defaultSelection instead

---
 .../components/sidebar/TagsFilter.stories.tsx  | 18 ++++++++++--------
 .../manager/components/sidebar/TagsFilter.tsx  | 12 +++++++++---
 code/core/src/types/modules/core-common.ts     |  4 ++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index 7d18f19bcda9..34afa5a07fda 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -44,8 +44,8 @@ export const ClosedWithSelection: Story = {
   args: {
     ...Closed.args,
     tagPresets: {
-      A: { defaultSelected: true },
-      B: { defaultSelected: true },
+      A: { defaultSelection: 'include' },
+      B: { defaultSelection: 'include' },
     },
   },
 };
@@ -63,12 +63,14 @@ export const OpenWithSelection = {
   play: Open.play,
 } satisfies Story;
 
-export const OpenWithSelectionAndInverted = {
-  ...ClosedWithSelection,
-  play: async (context) => {
-    await Open.play(context);
-    const button = await screen.findByRole('button', { name: 'Invert' });
-    await button.click();
+export const OpenWithSelectionInverted = {
+  ...Open,
+  args: {
+    ...Open.args,
+    tagPresets: {
+      A: { defaultSelection: 'exclude' },
+      B: { defaultSelection: 'exclude' },
+    },
   },
 } satisfies Story;
 
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index fa54409a81f2..ef5dc1a50e48 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -59,16 +59,22 @@ export const TagsFilter = ({
   isDevelopment,
   tagPresets,
 }: TagsFilterProps) => {
+  const allExcluded = Object.values(tagPresets).every(
+    (preset) => !('defaultSelection' in preset) || preset.defaultSelection === 'exclude'
+  );
+
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [expanded, setExpanded] = useState(false);
-  const [inverted, setInverted] = useState(false);
+  const [inverted, setInverted] = useState(allExcluded);
   const tagsActive = selectedTags.length > 0;
 
   useEffect(() => {
     const tags = Object.keys(tagPresets);
-    const selectedTags = tags.filter((tag) => tagPresets[tag].defaultSelected);
+    const selectedTags = tags.filter(
+      (tag) => tagPresets[tag].defaultSelection === (allExcluded ? 'exclude' : 'include')
+    );
     setSelectedTags(selectedTags);
-  }, [tagPresets]);
+  }, [tagPresets, allExcluded]);
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index 6dd879f08550..4387752fb206 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -330,8 +330,8 @@ export interface TestBuildConfig {
 type Tag = string;
 
 export interface TagOptions {
-  /** Whether the tag should be selected by default in the tags filter in Storybook */
-  defaultSelected?: boolean;
+  /** Visually include or exclude stories with this tag in the sidebar by default */
+  defaultSelection?: 'include' | 'exclude';
   excludeFromSidebar: boolean;
   excludeFromDocsStories: boolean;
 }

From 24253d84133231f9881eed80e149ad8874009a1c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 17:39:06 +0200
Subject: [PATCH 097/130] small rename

---
 .../src/manager/components/sidebar/TagsFilter.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index ef5dc1a50e48..61751bc6e09f 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -47,33 +47,26 @@ const TagSelected = styled(Badge)(({ theme }) => ({
 export interface TagsFilterProps {
   api: API;
   indexJson: StoryIndex;
-  initialSelectedTags?: Tag[];
   isDevelopment: boolean;
   tagPresets: TagsOptions;
 }
 
-export const TagsFilter = ({
-  api,
-  indexJson,
-  initialSelectedTags = [],
-  isDevelopment,
-  tagPresets,
-}: TagsFilterProps) => {
+export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFilterProps) => {
   const allExcluded = Object.values(tagPresets).every(
     (preset) => !('defaultSelection' in preset) || preset.defaultSelection === 'exclude'
   );
 
-  const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
+  const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
   const [expanded, setExpanded] = useState(false);
   const [inverted, setInverted] = useState(allExcluded);
   const tagsActive = selectedTags.length > 0;
 
   useEffect(() => {
     const tags = Object.keys(tagPresets);
-    const selectedTags = tags.filter(
+    const defaultSelectedTags = tags.filter(
       (tag) => tagPresets[tag].defaultSelection === (allExcluded ? 'exclude' : 'include')
     );
-    setSelectedTags(selectedTags);
+    setSelectedTags(defaultSelectedTags);
   }, [tagPresets, allExcluded]);
 
   useEffect(() => {

From 8d18419c64d4008b81ca865697323e90962d6f87 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 17:42:12 +0200
Subject: [PATCH 098/130] cleanup

---
 code/core/src/core-server/presets/common-preset.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index 6b5724cbc3d5..d3a402e3fc64 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -282,7 +282,6 @@ export const resolvedReact = async (existing: any) => {
 /** Set up `dev-only`, `docs-only`, `test-only` tags out of the box */
 export const tags = async (existing: any) => {
   return {
-    // If there should be any default selected tag, add them before ...existing so users can still override them
     ...existing,
     'dev-only': { excludeFromDocsStories: true },
     'docs-only': { excludeFromSidebar: true },

From 4831e99b3531190ac1021ae00c1f7a910f28b334 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 2 Sep 2025 19:32:34 +0200
Subject: [PATCH 099/130] fix build

---
 code/core/src/manager-api/modules/stories.ts | 9 +++++----
 code/core/src/manager-api/root.tsx           | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index f0b866ef57d9..37b1475bfb31 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -30,6 +30,7 @@ import type {
   API_LoadedRefData,
   API_PreparedStoryIndex,
   API_StoryEntry,
+  API_TestEntry,
   API_ViewMode,
   Args,
   ComponentTitle,
@@ -188,20 +189,20 @@ export interface SubAPI {
   /**
    * Updates the arguments for the given story with the provided new arguments.
    *
-   * @param {API_StoryEntry} story - The story to update the arguments for.
+   * @param {API_StoryEntry | API_TestEntry} story - The story to update the arguments for.
    * @param {Args} newArgs - The new arguments to set for the story.
    * @returns {void}
    */
-  updateStoryArgs(story: API_StoryEntry, newArgs: Args): void;
+  updateStoryArgs(story: API_StoryEntry | API_TestEntry, newArgs: Args): void;
   /**
    * Resets the arguments for the given story to their initial values.
    *
-   * @param {API_StoryEntry} story - The story to reset the arguments for.
+   * @param {API_StoryEntry | API_TestEntry} story - The story to reset the arguments for.
    * @param {string[]} [argNames] - An optional array of argument names to reset. If not provided,
    *   all arguments will be reset.
    * @returns {void}
    */
-  resetStoryArgs: (story: API_StoryEntry, argNames?: string[]) => void;
+  resetStoryArgs: (story: API_StoryEntry | API_TestEntry, argNames?: string[]) => void;
   /**
    * Finds the leaf entry for the given story ID in the given story index.
    *
diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index 625e58b66ea4..187932a1c8de 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -35,6 +35,7 @@ import type {
   API_RootEntry,
   API_StateMerger,
   API_StoryEntry,
+  API_TestEntry,
   ArgTypes,
   Args,
   Globals,
@@ -487,7 +488,7 @@ export function useGlobalTypes(): ArgTypes {
   return useStorybookApi().getGlobalTypes();
 }
 
-function useCurrentStory(): API_StoryEntry | API_DocsEntry {
+function useCurrentStory(): API_StoryEntry | API_TestEntry | API_DocsEntry {
   const { getCurrentStoryData } = useStorybookApi();
 
   return getCurrentStoryData();

From 3e8c306b158db433c3b7a70cfcda10499f02e854 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 3 Sep 2025 09:44:58 +0200
Subject: [PATCH 100/130] Implement indeterminate state for unrepresentable
 combination of defaultSelection for tags

---
 .../components/sidebar/TagsFilter.stories.tsx | 11 +++++
 .../manager/components/sidebar/TagsFilter.tsx | 32 +++++++++-----
 .../components/sidebar/TagsFilterPanel.tsx    | 43 ++++++++++++++-----
 3 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index 34afa5a07fda..f42af0d8dc33 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -74,6 +74,17 @@ export const OpenWithSelectionInverted = {
   },
 } satisfies Story;
 
+export const OpenWithSelectionMixed = {
+  ...Open,
+  args: {
+    ...Open.args,
+    tagPresets: {
+      A: { defaultSelection: 'include' },
+      B: { defaultSelection: 'exclude' },
+    },
+  },
+} satisfies Story;
+
 export const OpenEmpty: Story = {
   args: {
     indexJson: {
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 61751bc6e09f..4e876e38a311 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -52,22 +52,29 @@ export interface TagsFilterProps {
 }
 
 export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFilterProps) => {
-  const allExcluded = Object.values(tagPresets).every(
-    (preset) => !('defaultSelection' in preset) || preset.defaultSelection === 'exclude'
-  );
-
   const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
+  const [indeterminateTags, setIndeterminateTags] = useState<Tag[]>([]);
   const [expanded, setExpanded] = useState(false);
-  const [inverted, setInverted] = useState(allExcluded);
+  const [inverted, setInverted] = useState(false);
+  const [initial, setInitial] = useState(false);
   const tagsActive = selectedTags.length > 0;
 
-  useEffect(() => {
+  const resetTags = useCallback(() => {
     const tags = Object.keys(tagPresets);
-    const defaultSelectedTags = tags.filter(
-      (tag) => tagPresets[tag].defaultSelection === (allExcluded ? 'exclude' : 'include')
+    const invert = Object.values(tagPresets).every(
+      (preset) => !('defaultSelection' in preset) || preset.defaultSelection === 'exclude'
     );
-    setSelectedTags(defaultSelectedTags);
-  }, [tagPresets, allExcluded]);
+    setSelectedTags(
+      tags.filter((tag) => tagPresets[tag].defaultSelection === (invert ? 'exclude' : 'include'))
+    );
+    setIndeterminateTags(
+      invert ? [] : tags.filter((tag) => tagPresets[tag].defaultSelection === 'exclude')
+    );
+    setInverted(invert);
+    setInitial(true);
+  }, [tagPresets]);
+
+  useEffect(resetTags, [resetTags]);
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
@@ -95,6 +102,7 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
       } else {
         setSelectedTags([...selectedTags, tag]);
       }
+      setInitial(false);
     },
     [selectedTags, setSelectedTags]
   );
@@ -106,6 +114,7 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
         setSelectedTags([]);
         setInverted(false);
       }
+      setInitial(false);
     },
     [allTags, setSelectedTags]
   );
@@ -135,11 +144,14 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
           api={api}
           allTags={allTags}
           selectedTags={selectedTags}
+          indeterminateTags={indeterminateTags}
           toggleTag={toggleTag}
           setAllTags={setAllTags}
+          resetTags={resetTags}
           inverted={inverted}
           setInverted={setInverted}
           isDevelopment={isDevelopment}
+          isInitialSelection={initial}
         />
       )}
       closeOnOutsideClick
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index cd7dc975346c..ae88066cdd27 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { Form, IconButton, TooltipLinkList } from 'storybook/internal/components';
 import type { Tag } from 'storybook/internal/types';
@@ -51,23 +51,44 @@ interface TagsFilterPanelProps {
   api: API;
   allTags: Map<Tag, number>;
   selectedTags: Tag[];
+  indeterminateTags: Tag[];
   toggleTag: (tag: Tag) => void;
   setAllTags: (selected: boolean) => void;
+  resetTags: () => void;
   inverted: boolean;
   setInverted: (inverted: boolean) => void;
   isDevelopment: boolean;
+  isInitialSelection: boolean;
 }
 
 export const TagsFilterPanel = ({
   api,
   allTags,
   selectedTags,
+  indeterminateTags,
   toggleTag,
   setAllTags,
+  resetTags,
   inverted,
   setInverted,
   isDevelopment,
+  isInitialSelection,
 }: TagsFilterPanelProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkboxes = ref.current?.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+    if (!checkboxes) {
+      return;
+    }
+    for (const checkbox of checkboxes) {
+      const tag = checkbox.getAttribute('data-tag');
+      if (tag && indeterminateTags.includes(tag)) {
+        checkbox.indeterminate = true;
+      }
+    }
+  }, [indeterminateTags]);
+
   const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
     (acc, [tag, count]) => {
       acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
@@ -95,7 +116,7 @@ export const TagsFilterPanel = ({
           id,
           title: tag,
           right: count,
-          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} />,
+          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />,
         };
       }),
     builtInEntries
@@ -107,7 +128,7 @@ export const TagsFilterPanel = ({
           id,
           title: tag,
           right: count,
-          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} />,
+          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />,
         };
       }),
   ] as Link[][];
@@ -125,19 +146,19 @@ export const TagsFilterPanel = ({
   }
 
   return (
-    <Wrapper>
+    <Wrapper ref={ref}>
       {allTags.size > 0 && (
         <Actions>
-          {selectedTags.length ? (
-            <IconButton id="unselect-all" onClick={() => setAllTags(false)}>
-              <CloseIcon />
-              Clear filters
-            </IconButton>
-          ) : (
-            <IconButton id="select-all" onClick={() => setAllTags(true)}>
+          {isInitialSelection ? (
+            <IconButton id="select-all" key="select-all" onClick={() => setAllTags(true)}>
               <BatchAcceptIcon />
               Select all
             </IconButton>
+          ) : (
+            <IconButton id="reset-filters" key="reset-filters" onClick={resetTags}>
+              <CloseIcon />
+              Reset filters
+            </IconButton>
           )}
           <IconButton
             id="invert-selection"

From 1a4ee939efd46a3b58e6f12ed1ffeeda26183b90 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 10:19:39 +0200
Subject: [PATCH 101/130] disable save from controls in story tests

---
 code/core/src/controls/components/ControlsPanel.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/code/core/src/controls/components/ControlsPanel.tsx b/code/core/src/controls/components/ControlsPanel.tsx
index 157e6a77d211..9a7db5842a4d 100644
--- a/code/core/src/controls/components/ControlsPanel.tsx
+++ b/code/core/src/controls/components/ControlsPanel.tsx
@@ -10,6 +10,7 @@ import {
   useArgs,
   useGlobals,
   useParameter,
+  useStorybookApi,
   useStorybookState,
 } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
@@ -50,6 +51,7 @@ interface ControlsPanelProps {
 }
 
 export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => {
+  const api = useStorybookApi();
   const [isLoading, setIsLoading] = useState(true);
   const [args, updateArgs, resetArgs, initialArgs] = useArgs();
   const [globals] = useGlobals();
@@ -61,6 +63,7 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
     disableSaveFromUI = false,
   } = useParameter<ControlsParameters>(PARAM_KEY, {});
   const { path, previewInitialized } = useStorybookState();
+  const storyData = api.getCurrentStoryData();
 
   // If the story is prepared, then show the args table
   // and reset the loading states
@@ -103,6 +106,8 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) =>
         isLoading={isLoading}
       />
       {hasControls &&
+        storyData.type === 'story' &&
+        storyData.subtype !== 'test' &&
         hasUpdatedArgs &&
         global.CONFIG_TYPE === 'DEVELOPMENT' &&
         disableSaveFromUI !== true && <SaveStory {...{ resetArgs, saveStory, createStory }} />}

From cd66148dbc306957da38d26a04fd9fe9845c5db2 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 10:47:41 +0200
Subject: [PATCH 102/130] fix build

---
 .../components/sidebar/TagsFilterPanel.stories.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index 8df95a0114fb..15a6e34b72d7 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -12,6 +12,9 @@ const meta = {
     setAllTags: fn(),
     inverted: false,
     setInverted: fn(),
+    indeterminateTags: [],
+    resetTags: fn(),
+    isInitialSelection: false,
     api: {
       getDocsUrl: () => 'https://storybook.js.org/docs/',
     } as any,
@@ -63,6 +66,13 @@ export const Inverted: Story = {
   },
 };
 
+export const Indeterminate: Story = {
+  args: {
+    ...Default.args,
+    indeterminateTags: ['tag1', 'tag3'],
+  },
+};
+
 export const BuiltInTags: Story = {
   args: {
     allTags: new Map([...Default.args.allTags, ['play-fn', 1]]),

From bab3780acc8c7c9858b8aa9cc9bec002657f4bbb Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 3 Sep 2025 10:55:34 +0200
Subject: [PATCH 103/130] Add story for non-initial state

---
 .../components/sidebar/TagsFilterPanel.stories.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index 15a6e34b72d7..a990f5cff04e 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
     setInverted: fn(),
     indeterminateTags: [],
     resetTags: fn(),
-    isInitialSelection: false,
+    isInitialSelection: true,
     api: {
       getDocsUrl: () => 'https://storybook.js.org/docs/',
     } as any,
@@ -73,6 +73,13 @@ export const Indeterminate: Story = {
   },
 };
 
+export const Modified: Story = {
+  args: {
+    ...Default.args,
+    isInitialSelection: false,
+  },
+};
+
 export const BuiltInTags: Story = {
   args: {
     allTags: new Map([...Default.args.allTags, ['play-fn', 1]]),

From f570532ced56fdcdd72fa0e83b8f4d4572f9df78 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 3 Sep 2025 11:39:55 +0200
Subject: [PATCH 104/130] Fix filtering out stories which have tests

---
 code/core/src/manager-api/lib/stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 2d8f6c576f74..47ea02e0b525 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -200,7 +200,7 @@ export const transformStoryIndexToStoriesHash = (
     }
 
     const children = indexEntries.filter((item) => 'parent' in item && item.parent === entry.id);
-    return children.some((child) => filterFunctions.some((fn) => fn({ ...child, statuses })));
+    return children.some((child) => filterFunctions.every((fn) => fn({ ...child, statuses })));
   });
 
   const { sidebar = {} } = provider.getConfig();

From 7a03431d7d6e383cb252439e3f78400bb0b028d1 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 3 Sep 2025 11:56:07 +0200
Subject: [PATCH 105/130] Fix default invert toggle setting

---
 code/core/src/manager/components/sidebar/TagsFilter.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 4e876e38a311..368ed1bc4c25 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -61,9 +61,10 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
 
   const resetTags = useCallback(() => {
     const tags = Object.keys(tagPresets);
-    const invert = Object.values(tagPresets).every(
-      (preset) => !('defaultSelection' in preset) || preset.defaultSelection === 'exclude'
-    );
+    const presets = Object.values(tagPresets);
+    const invert =
+      presets.some((p) => 'defaultSelection' in p && p.defaultSelection === 'exclude') &&
+      !presets.some((p) => 'defaultSelection' in p && p.defaultSelection === 'include');
     setSelectedTags(
       tags.filter((tag) => tagPresets[tag].defaultSelection === (invert ? 'exclude' : 'include'))
     );

From 07e99aefe0522d5628b97928db30b31cd4752080 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 13:32:58 +0200
Subject: [PATCH 106/130] Refactor CsfFile to support test tags and update
 related methods for retrieving story tests

---
 code/core/src/csf-tools/CsfFile.test.ts       |  2 +-
 code/core/src/csf-tools/CsfFile.ts            | 83 ++++++++++++++-----
 .../csf-tools/vitest-plugin/transformer.ts    |  6 +-
 .../modules/store/csf/prepareStory.ts         |  8 ++
 4 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 9f7787045b4c..88ef5ccfe19d 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -2457,7 +2457,7 @@ describe('CsfFile', () => {
         const story = data._stories['A'];
         expect(story.__stats.tests).toBe(true);
 
-        const storyTests = data._storyTests['A'];
+        const storyTests = data.getStoryTests('A');
         expect(storyTests).toHaveLength(4);
         expect(storyTests[0].name).toBe('simple test');
         expect(storyTests[1].name).toBe('with overrides');
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 5d1ed896fa64..543fbb6a28b9 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -76,6 +76,34 @@ function parseTags(prop: t.Node) {
   }) as Tag[];
 }
 
+function parseTestTags(optionsNode: t.Node | null | undefined, program: t.Program) {
+  if (!optionsNode) {
+    return [] as string[];
+  }
+
+  let node: t.Node = optionsNode;
+  if (t.isIdentifier(node)) {
+    node = findVarInitialization(node.name, program);
+  }
+
+  if (t.isObjectExpression(node)) {
+    const tagsProp = node.properties.find(
+      (property) =>
+        t.isObjectProperty(property) && t.isIdentifier(property.key) && property.key.name === 'tags'
+    ) as t.ObjectProperty | undefined;
+
+    if (tagsProp) {
+      let tagsNode: t.Node = tagsProp.value as t.Node;
+      if (t.isIdentifier(tagsNode)) {
+        tagsNode = findVarInitialization(tagsNode.name, program);
+      }
+      return parseTags(tagsNode);
+    }
+  }
+
+  return [] as string[];
+}
+
 const formatLocation = (node: t.Node, fileName?: string) => {
   let loc = '';
   if (node.loc) {
@@ -276,16 +304,15 @@ export class CsfFile {
 
   imports: string[];
 
-  _storyTests: Record<
-    string,
-    Array<{
-      node: t.Node;
-      function: t.Node;
-      name: string;
-      id: string;
-      options: any;
-    }>
-  > = {};
+  _tests: Array<{
+    node: t.Node;
+    function: t.Node;
+    name: string;
+    id: string;
+    options: any;
+    tags: string[];
+    parent: { node: t.Node };
+  }> = [];
 
   constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
     this._ast = ast;
@@ -698,12 +725,9 @@ export class CsfFile {
             const testFunction =
               expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
             const testOptions = expression.arguments.length === 2 ? null : expression.arguments[1];
+            const tags = parseTestTags(testOptions as t.Node | null, self._ast.program);
 
-            if (!self._storyTests[exportName]) {
-              self._storyTests[exportName] = [];
-            }
-
-            self._storyTests[exportName].push({
+            self._tests.push({
               function: testFunction,
               name: testName,
               options: testOptions,
@@ -711,6 +735,8 @@ export class CsfFile {
               // can't set id because meta title isn't available yet
               // so it's set later on
               id: 'FIXME',
+              tags,
+              parent: { node: self._storyStatements[exportName] },
             });
 
             // TODO: fix this when stories fail
@@ -827,12 +853,14 @@ export class CsfFile {
         stats.mount = hasMount(storyAnnotations.play ?? self._metaAnnotations.play);
         stats.moduleMock = !!self.imports.find((fname) => isModuleMock(fname));
 
-        if (self._storyTests[key]) {
+        const storyNode = self._storyStatements[key];
+        const storyTests = self._tests.filter((t) => t.parent.node === storyNode);
+        if (storyTests.length > 0) {
           // TODO: [test-syntax] if we want to add a tag for the story that contains tests, this is the place for it
           // acc[key].tags = [...(acc[key].tags || []), 'story-with-tests'];
 
           stats.tests = true;
-          self._storyTests[key].forEach((test) => {
+          storyTests.forEach((test) => {
             test.id = toTestId(id, test.name);
           });
         }
@@ -876,6 +904,14 @@ export class CsfFile {
     return Object.values(this._stories);
   }
 
+  public getStoryTests(story: string | t.Node) {
+    const storyNode = typeof story === 'string' ? this._storyStatements[story] : story;
+    if (!storyNode) {
+      return [];
+    }
+    return this._tests.filter((t) => t.parent.node === storyNode);
+  }
+
   public get indexInputs(): IndexInput[] {
     const { fileName } = this._options;
     if (!fileName) {
@@ -901,8 +937,8 @@ export class CsfFile {
         __stats: story.__stats,
       };
 
-      const tests = this._storyTests[exportName];
-      const hasTests = tests?.length;
+      const tests = this.getStoryTests(exportName);
+      const hasTests = tests.length > 0;
 
       index.push({
         ...storyInput,
@@ -921,7 +957,14 @@ export class CsfFile {
             subtype: 'test',
             parent: story.id,
             name: test.name,
-            tags: [...storyInput.tags, 'test-fn'],
+            tags: [
+              ...storyInput.tags,
+              // this tag comes before test tags so users can invert if they like
+              '!autodocs',
+              ...test.tags,
+              // this tag comes after test tags so users can't change it
+              'test-fn',
+            ],
             __id: test.id,
           });
         });
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 28a7cab25366..7b66e5ad8f4b 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -238,7 +238,7 @@ export async function vitestTransform({
   const getDescribeStatementForStory = (options: {
     localName: string;
     exportName: string;
-    tests: (typeof parsed._storyTests)[string];
+    tests: Array<{ name: string; node: t.Node }>;
     node: t.Node;
   }): t.ExpressionStatement => {
     const { localName, exportName, tests, node } = options;
@@ -291,7 +291,7 @@ export async function vitestTransform({
       const localName = parsed._stories[exportName].localName ?? exportName;
       // use the story's name as the test title for vitest, and fallback to exportName
       const testTitle = parsed._stories[exportName].name ?? exportName;
-      const tests = parsed._storyTests[exportName];
+      const tests = parsed.getStoryTests(exportName);
 
       if (tests?.length > 0) {
         return getDescribeStatementForStory({ localName, exportName, tests, node });
@@ -306,7 +306,7 @@ export async function vitestTransform({
   ast.program.body.push(testBlock);
 
   const hasTests = Object.keys(validStories).some(
-    (exportName) => parsed._storyTests[exportName]?.length > 0
+    (exportName) => parsed.getStoryTests(exportName).length > 0
   );
 
   const imports = [
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 42d17914ad48..55b135860ee2 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -189,12 +189,20 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
 
   const defaultTags = ['dev', 'test'];
   const extraTags = globalThis.DOCS_OPTIONS?.autodocs === true ? ['autodocs'] : [];
+  /**
+   * DISCLAIMER: This feels like a hack but seems like it's the only way to override the autodocs
+   * tag for test-fn stories. That's because the Story index does not include negated tags e.g.
+   * !autodocs so the negation does not get passed through, and therefore we need to do it here.
+   * Therefore, unfortunately we have to duplicate the logic here.
+   */
+  const overrideTags = storyAnnotations?.tags?.includes('test-fn') ? ['!autodocs'] : [];
 
   const tags = combineTags(
     ...defaultTags,
     ...extraTags,
     ...(projectAnnotations.tags ?? []),
     ...(componentAnnotations.tags ?? []),
+    ...(overrideTags ?? []),
     ...(storyAnnotations?.tags ?? [])
   );
 

From b6c6e9498fa7816867e38030f4132c215e9c32b5 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 3 Sep 2025 16:42:48 +0200
Subject: [PATCH 107/130] Make it possible to distinguish tests from stories in
 StoryStore.extract, and track the parent story name for a test.

- Updated 'story' property to always be the story name rather than the test name
- Added 'storyId' property to point to the parent story from a test
---
 .../core/src/core-server/utils/StoryIndexGenerator.ts |  4 +++-
 code/core/src/csf-tools/CsfFile.ts                    |  3 ++-
 code/core/src/preview-api/modules/store/StoryStore.ts | 11 +++++++----
 code/core/src/types/modules/indexer.ts                |  2 ++
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index a211bbc8bc97..dacacb50bc25 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -453,7 +453,9 @@ export class StoryIndexGenerator {
           importPath,
           componentPath,
           tags,
-          ...(input.type === 'story' && input.parent ? { parent: input.parent } : {}),
+          ...(input.type === 'story' && input.subtype === 'test'
+            ? { parent: input.parent, parentName: input.parentName }
+            : {}),
         };
       }
     );
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 5d1ed896fa64..7e8aba369ddd 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -919,8 +919,9 @@ export class CsfFile {
             // title: `${storyInput.title}/${story.name}`,
             type: 'story',
             subtype: 'test',
-            parent: story.id,
             name: test.name,
+            parent: story.id,
+            parentName: story.name,
             tags: [...storyInput.tags, 'test-fn'],
             __id: test.id,
           });
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 8853b529e3c2..a5ba69675885 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -292,12 +292,12 @@ export class StoryStore<TRenderer extends Renderer> {
     }
 
     const stories = Object.entries(this.storyIndex.entries).reduce(
-      (acc, [storyId, { type, importPath }]) => {
-        if (type === 'docs') {
+      (acc, [storyId, entry]) => {
+        if (entry.type === 'docs') {
           return acc;
         }
 
-        const csfFile = cachedCSFFiles[importPath];
+        const csfFile = cachedCSFFiles[entry.importPath];
         const story = this.storyFromCSFFile({ storyId, csfFile });
 
         if (!options.includeDocsOnly && story.parameters.docsOnly) {
@@ -306,6 +306,9 @@ export class StoryStore<TRenderer extends Renderer> {
 
         acc[storyId] = Object.entries(story).reduce(
           (storyAcc, [key, value]) => {
+            if (key === 'story' && entry.subtype === 'test') {
+              return { ...storyAcc, story: entry.parentName };
+            }
             if (key === 'moduleExport') {
               return storyAcc;
             }
@@ -318,13 +321,13 @@ export class StoryStore<TRenderer extends Renderer> {
             return Object.assign(storyAcc, { [key]: value });
           },
           {
-            //
             args: story.initialArgs,
             globals: {
               ...this.userGlobals.initialGlobals,
               ...this.userGlobals.globals,
               ...story.storyGlobals,
             },
+            storyId: entry.parent ? entry.parent : storyId,
           }
         );
         return acc;
diff --git a/code/core/src/types/modules/indexer.ts b/code/core/src/types/modules/indexer.ts
index ad161b5a5852..ff43c215d34e 100644
--- a/code/core/src/types/modules/indexer.ts
+++ b/code/core/src/types/modules/indexer.ts
@@ -75,6 +75,7 @@ export type StoryIndexEntry = BaseIndexEntry & {
   type: 'story';
   subtype: 'story' | 'test';
   parent?: StoryId; // exists only on tests
+  parentName?: StoryName; // exists only on tests
 };
 
 export type DocsIndexEntry = BaseIndexEntry & {
@@ -135,6 +136,7 @@ export type StoryIndexInput = BaseIndexInput & {
   type: 'story';
   subtype: 'story' | 'test';
   parent?: StoryId; // exists only on tests
+  parentName?: StoryName; // exists only on tests
 };
 
 /** The input for indexing a docs entry. */

From 639042cf6a92e11051a4219a4b560c8be20cb7b9 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 17:30:22 +0200
Subject: [PATCH 108/130] small refactor

---
 code/core/src/csf-tools/CsfFile.ts            | 25 ++++++++++---------
 .../modules/store/csf/prepareStory.ts         |  2 +-
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index 543fbb6a28b9..db1149febbdd 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -265,6 +265,15 @@ export interface StaticStory extends Pick<StoryAnnotations, 'name' | 'parameters
   __stats: IndexInputStats;
 }
 
+export interface StoryTest {
+  node: t.Node;
+  function: t.Node;
+  name: string;
+  id: string;
+  tags: string[];
+  parent: { node: t.Node };
+}
+
 export class CsfFile {
   _ast: t.File;
 
@@ -304,15 +313,7 @@ export class CsfFile {
 
   imports: string[];
 
-  _tests: Array<{
-    node: t.Node;
-    function: t.Node;
-    name: string;
-    id: string;
-    options: any;
-    tags: string[];
-    parent: { node: t.Node };
-  }> = [];
+  _tests: StoryTest[] = [];
 
   constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
     this._ast = ast;
@@ -724,13 +725,13 @@ export class CsfFile {
             const testName = expression.arguments[0].value;
             const testFunction =
               expression.arguments.length === 2 ? expression.arguments[1] : expression.arguments[2];
-            const testOptions = expression.arguments.length === 2 ? null : expression.arguments[1];
-            const tags = parseTestTags(testOptions as t.Node | null, self._ast.program);
+            const testArguments =
+              expression.arguments.length === 2 ? null : expression.arguments[1];
+            const tags = parseTestTags(testArguments as t.Node | null, self._ast.program);
 
             self._tests.push({
               function: testFunction,
               name: testName,
-              options: testOptions,
               node: expression,
               // can't set id because meta title isn't available yet
               // so it's set later on
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 55b135860ee2..be45c366a0b4 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -202,7 +202,7 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
     ...extraTags,
     ...(projectAnnotations.tags ?? []),
     ...(componentAnnotations.tags ?? []),
-    ...(overrideTags ?? []),
+    ...overrideTags,
     ...(storyAnnotations?.tags ?? [])
   );
 

From 9b7fa17a9cd39c7323b29e53560eb325ac45b256 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 17:34:44 +0200
Subject: [PATCH 109/130] fix tests

---
 code/core/src/preview-api/modules/store/StoryStore.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index 7de00f38fb9e..bbb7af05f19e 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -343,6 +343,7 @@ describe('StoryStore', () => {
             "renderToCanvas": undefined,
             "story": "A",
             "storyGlobals": {},
+            "storyId": "component-one--a",
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -535,6 +536,7 @@ describe('StoryStore', () => {
             "renderToCanvas": undefined,
             "story": "A",
             "storyGlobals": {},
+            "storyId": "component-one--a",
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -600,6 +602,7 @@ describe('StoryStore', () => {
             "renderToCanvas": undefined,
             "story": "B",
             "storyGlobals": {},
+            "storyId": "component-one--b",
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -665,6 +668,7 @@ describe('StoryStore', () => {
             "renderToCanvas": undefined,
             "story": "C",
             "storyGlobals": {},
+            "storyId": "component-two--c",
             "subcomponents": undefined,
             "tags": [
               "dev",

From 478e4f1e00a730d95135c133473b692be0fda389 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 19:01:01 +0200
Subject: [PATCH 110/130] undo some merge changes

---
 CHANGELOG.prerelease.md                       |  9 --
 code/addons/a11y/package.json                 |  2 +-
 code/addons/docs/package.json                 |  2 +-
 code/addons/docs/src/preview.ts               |  7 --
 code/addons/docs/src/typings.d.ts             |  1 -
 code/addons/jest/package.json                 |  2 +-
 code/addons/links/package.json                |  2 +-
 code/addons/onboarding/package.json           |  2 +-
 code/addons/pseudo-states/package.json        |  2 +-
 code/addons/themes/package.json               |  2 +-
 code/addons/vitest/package.json               |  2 +-
 code/builders/builder-vite/package.json       |  2 +-
 code/builders/builder-webpack5/package.json   |  2 +-
 code/core/package.json                        |  2 +-
 code/core/src/common/versions.ts              | 86 +++++++++----------
 code/frameworks/angular/package.json          |  2 +-
 code/frameworks/ember/package.json            |  2 +-
 code/frameworks/html-vite/package.json        |  2 +-
 code/frameworks/nextjs-vite/package.json      |  2 +-
 code/frameworks/nextjs/package.json           |  2 +-
 code/frameworks/preact-vite/package.json      |  2 +-
 .../react-native-web-vite/package.json        |  2 +-
 code/frameworks/react-vite/package.json       |  2 +-
 code/frameworks/react-webpack5/package.json   |  2 +-
 code/frameworks/server-webpack5/package.json  |  2 +-
 code/frameworks/svelte-vite/package.json      |  2 +-
 code/frameworks/sveltekit/package.json        |  2 +-
 code/frameworks/vue3-vite/package.json        |  2 +-
 .../web-components-vite/package.json          |  2 +-
 code/lib/cli-sb/package.json                  |  2 +-
 code/lib/cli-storybook/package.json           |  2 +-
 code/lib/codemod/package.json                 |  2 +-
 code/lib/core-webpack/package.json            |  2 +-
 code/lib/create-storybook/package.json        |  2 +-
 code/lib/csf-plugin/package.json              |  2 +-
 code/lib/eslint-plugin/package.json           |  2 +-
 code/lib/react-dom-shim/package.json          |  2 +-
 code/package.json                             |  2 +-
 code/presets/create-react-app/package.json    |  2 +-
 code/presets/react-webpack/package.json       |  2 +-
 code/presets/server-webpack/package.json      |  2 +-
 code/renderers/html/package.json              |  2 +-
 code/renderers/preact/package.json            |  2 +-
 code/renderers/react/package.json             |  2 +-
 code/renderers/server/package.json            |  2 +-
 code/renderers/svelte/package.json            |  2 +-
 code/renderers/vue3/package.json              |  2 +-
 code/renderers/web-components/package.json    |  2 +-
 docs/versions/next.json                       |  7 +-
 49 files changed, 88 insertions(+), 110 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 4130c77de4da..3b75ceecf9b7 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,12 +1,3 @@
-## 9.2.0-alpha.1
-
-- Addon Docs: Add `__STORYBOOK_UNSAFE_TOCBOT__` global - [#32176](https://github.com/storybookjs/storybook/pull/32176), thanks @yannbf!
-- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!
-- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!
-
-## 9.2.0-alpha.0
-
-
 ## 9.1.0-beta.3
 
 - Core: Prevent interactions panel from flickering and showing incorrect state - [#32150](https://github.com/storybookjs/storybook/pull/32150), thanks @ghengeveld!
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 2e7fab0c3f6b..c8818609d296 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Addon A11y: Test UI component compliance with WCAG web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index c0ca3ce927d1..58dafd2e19dd 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Docs: Document UI components automatically with stories and MDX",
   "keywords": [
     "docs",
diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
index 4a5a57123b12..713352b025ea 100644
--- a/code/addons/docs/src/preview.ts
+++ b/code/addons/docs/src/preview.ts
@@ -1,12 +1,5 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
-import * as tocbot from 'tocbot';
-
-if (!globalThis.__STORYBOOK_UNSAFE_TOCBOT__) {
-  // Users that load dynamic content need to have a way to refresh the TOC, so we expose the tocbot instance
-  globalThis.__STORYBOOK_UNSAFE_TOCBOT__ = tocbot.default ?? tocbot;
-}
-
 const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
   (acc, entry) => {
     const [tag, option] = entry;
diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts
index 2deb8921d2ad..468759c8ba22 100644
--- a/code/addons/docs/src/typings.d.ts
+++ b/code/addons/docs/src/typings.d.ts
@@ -7,7 +7,6 @@ declare var __DOCS_CONTEXT__: any;
 declare var PREVIEW_URL: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var TAGS_OPTIONS: import('storybook/internal/types').TagsOptions;
-declare var __STORYBOOK_UNSAFE_TOCBOT__: typeof import('tocbot').default;
 
 declare module '*.md';
 declare module '*.md?raw';
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 0c810c11c6cf..bc417af93d59 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Jest addon: Show Jest report in Storybook's addon panel",
   "keywords": [
     "jest",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 9eabc103a0a3..46d57c6c199d 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Links: Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 3c8a2d5b8b88..1e599d0cfc24 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Onboarding: Help new users learn how to write stories",
   "keywords": [
     "storybook",
diff --git a/code/addons/pseudo-states/package.json b/code/addons/pseudo-states/package.json
index f1747ee4803a..e0dbca8e3760 100644
--- a/code/addons/pseudo-states/package.json
+++ b/code/addons/pseudo-states/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Pseudo-states addon: Manipulate CSS pseudo states",
   "keywords": [
     "storybook",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index bc4065f8e323..0200e5cf31cf 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Themes addon: Switch between themes from the toolbar",
   "keywords": [
     "css",
diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json
index 9e691179b841..e6b99deffc34 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/vitest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-vitest",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Vitest addon: Blazing fast component testing using stories",
   "keywords": [
     "storybook",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 24d792e3d9ea..b6122a8f5d0d 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "A Storybook builder to dev and build with Vite",
   "keywords": [
     "storybook",
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 3f7d37703d64..191d3d24fa84 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "A Storybook builder to dev and build with Webpack",
   "keywords": [
     "storybook",
diff --git a/code/core/package.json b/code/core/package.json
index 31b60b8d2cb9..219ab4719d5c 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index 0c5e2ae37c8f..c8c75856164d 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,46 +1,46 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '9.2.0-alpha.1',
-  '@storybook/addon-docs': '9.2.0-alpha.1',
-  '@storybook/addon-jest': '9.2.0-alpha.1',
-  '@storybook/addon-links': '9.2.0-alpha.1',
-  '@storybook/addon-onboarding': '9.2.0-alpha.1',
-  'storybook-addon-pseudo-states': '9.2.0-alpha.1',
-  '@storybook/addon-themes': '9.2.0-alpha.1',
-  '@storybook/addon-vitest': '9.2.0-alpha.1',
-  '@storybook/builder-vite': '9.2.0-alpha.1',
-  '@storybook/builder-webpack5': '9.2.0-alpha.1',
-  storybook: '9.2.0-alpha.1',
-  '@storybook/angular': '9.2.0-alpha.1',
-  '@storybook/ember': '9.2.0-alpha.1',
-  '@storybook/html-vite': '9.2.0-alpha.1',
-  '@storybook/nextjs': '9.2.0-alpha.1',
-  '@storybook/nextjs-vite': '9.2.0-alpha.1',
-  '@storybook/preact-vite': '9.2.0-alpha.1',
-  '@storybook/react-native-web-vite': '9.2.0-alpha.1',
-  '@storybook/react-vite': '9.2.0-alpha.1',
-  '@storybook/react-webpack5': '9.2.0-alpha.1',
-  '@storybook/server-webpack5': '9.2.0-alpha.1',
-  '@storybook/svelte-vite': '9.2.0-alpha.1',
-  '@storybook/sveltekit': '9.2.0-alpha.1',
-  '@storybook/vue3-vite': '9.2.0-alpha.1',
-  '@storybook/web-components-vite': '9.2.0-alpha.1',
-  sb: '9.2.0-alpha.1',
-  '@storybook/cli': '9.2.0-alpha.1',
-  '@storybook/codemod': '9.2.0-alpha.1',
-  '@storybook/core-webpack': '9.2.0-alpha.1',
-  'create-storybook': '9.2.0-alpha.1',
-  '@storybook/csf-plugin': '9.2.0-alpha.1',
-  'eslint-plugin-storybook': '9.2.0-alpha.1',
-  '@storybook/react-dom-shim': '9.2.0-alpha.1',
-  '@storybook/preset-create-react-app': '9.2.0-alpha.1',
-  '@storybook/preset-react-webpack': '9.2.0-alpha.1',
-  '@storybook/preset-server-webpack': '9.2.0-alpha.1',
-  '@storybook/html': '9.2.0-alpha.1',
-  '@storybook/preact': '9.2.0-alpha.1',
-  '@storybook/react': '9.2.0-alpha.1',
-  '@storybook/server': '9.2.0-alpha.1',
-  '@storybook/svelte': '9.2.0-alpha.1',
-  '@storybook/vue3': '9.2.0-alpha.1',
-  '@storybook/web-components': '9.2.0-alpha.1',
+  '@storybook/addon-a11y': '9.1.4',
+  '@storybook/addon-docs': '9.1.4',
+  '@storybook/addon-jest': '9.1.4',
+  '@storybook/addon-links': '9.1.4',
+  '@storybook/addon-onboarding': '9.1.4',
+  'storybook-addon-pseudo-states': '9.1.4',
+  '@storybook/addon-themes': '9.1.4',
+  '@storybook/addon-vitest': '9.1.4',
+  '@storybook/builder-vite': '9.1.4',
+  '@storybook/builder-webpack5': '9.1.4',
+  storybook: '9.1.4',
+  '@storybook/angular': '9.1.4',
+  '@storybook/ember': '9.1.4',
+  '@storybook/html-vite': '9.1.4',
+  '@storybook/nextjs': '9.1.4',
+  '@storybook/nextjs-vite': '9.1.4',
+  '@storybook/preact-vite': '9.1.4',
+  '@storybook/react-native-web-vite': '9.1.4',
+  '@storybook/react-vite': '9.1.4',
+  '@storybook/react-webpack5': '9.1.4',
+  '@storybook/server-webpack5': '9.1.4',
+  '@storybook/svelte-vite': '9.1.4',
+  '@storybook/sveltekit': '9.1.4',
+  '@storybook/vue3-vite': '9.1.4',
+  '@storybook/web-components-vite': '9.1.4',
+  sb: '9.1.4',
+  '@storybook/cli': '9.1.4',
+  '@storybook/codemod': '9.1.4',
+  '@storybook/core-webpack': '9.1.4',
+  'create-storybook': '9.1.4',
+  '@storybook/csf-plugin': '9.1.4',
+  'eslint-plugin-storybook': '9.1.4',
+  '@storybook/react-dom-shim': '9.1.4',
+  '@storybook/preset-create-react-app': '9.1.4',
+  '@storybook/preset-react-webpack': '9.1.4',
+  '@storybook/preset-server-webpack': '9.1.4',
+  '@storybook/html': '9.1.4',
+  '@storybook/preact': '9.1.4',
+  '@storybook/react': '9.1.4',
+  '@storybook/server': '9.1.4',
+  '@storybook/svelte': '9.1.4',
+  '@storybook/vue3': '9.1.4',
+  '@storybook/web-components': '9.1.4',
 };
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index d3014995d3a5..64ed720cab94 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Angular: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index fff1b0537d1d..001b185c0ab1 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Ember: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 0df71044aa2f..87d727f2b470 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for HTML and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json
index 5c863b2b4089..07359aa3ffd5 100644
--- a/code/frameworks/nextjs-vite/package.json
+++ b/code/frameworks/nextjs-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Next.js and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 27db4c154d3d..1bbe9ad7c6ec 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Next.js: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index bc3364a4abc3..3d8871189e3e 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Preact and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 0c0344d5be83..4b35ea6deedc 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for React Native Web and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 0fdfbdec2c6d..430e786d8294 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for React and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index de3e822a728f..81c16211a198 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for React and Webpack: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index e39565b2efb7..1cb2cc5b870e 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index efd9949a872e..3c160f45aaec 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Svelte and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 7a784b626e5a..e6cd135ef08e 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for SvelteKit: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 662394811226..3ed3946eba8f 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Vue3 and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index c667d69e30a4..2d4c01607dd0 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Web Components and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index ef095161ba5e..a5e4e63eea46 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook CLI: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 966c3f6f52a5..1b73795e0bab 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook CLI: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 46a0d35cca8c..3f3bdf950346 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 42a31710b484..5af8cadfc7f0 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 465db39ee8b5..6420f4c39cd8 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook installer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 4768355b4228..22c59e571150 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json
index df2a1904836d..ee70c7ce7e81 100644
--- a/code/lib/eslint-plugin/package.json
+++ b/code/lib/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-storybook",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook ESLint Plugin: Best practice rules for writing stories",
   "keywords": [
     "eslint",
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index c1ad1f2c5391..8d106bd15364 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index d109e886e7bc..edaa0c62c025 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 6ba5d1e0ef36..b6b45739c9be 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 1f7542f25a38..008806d5e794 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index f0daabb6b42d..66283714af0d 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 8b7f795dd369..11dd998bba0b 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook HTML renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 055e917ce8e8..549ef93c2415 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Preact renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 10b20dab6872..a4210f6ac54a 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 45b8ed32f977..22f5a570a049 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Server renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 7308eb638695..4838a8136694 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Svelte renderer: Develop, document, and test UI components in isolation.",
   "keywords": [
     "storybook",
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 199e222acd33..a13907269380 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Vue 3 renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index e1f4b93f64fa..6515828e6cdb 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "9.2.0-alpha.1",
+  "version": "9.1.4",
   "description": "Storybook Web Components renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
diff --git a/docs/versions/next.json b/docs/versions/next.json
index b623c14961d4..879cb84add23 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1,6 +1 @@
-{
-  "version": "10.0.0-beta.0",
-  "info": {
-    "plain": "- Core: Fix staticCopy not copying `index.html` to sub directory - [#32259](https://github.com/storybookjs/storybook/pull/32259), thanks @ndelangen!\n- Core: Remove CJS bundles, only ship ESM - [#31819](https://github.com/storybookjs/storybook/pull/31819), thanks @ndelangen!\n- Docs: Move button in ArgsTable heading to fix screenreader announcements - [#32238](https://github.com/storybookjs/storybook/pull/32238), thanks @Sidnioulz!\n- Telemetry: Disambiguate traffic coming from error/upgrade links - [#32287](https://github.com/storybookjs/storybook/pull/32287), thanks @shilman!\n- Telemetry: Disambiguate unattributed traffic from Onboarding - [#32286](https://github.com/storybookjs/storybook/pull/32286), thanks @shilman!"
-  }
-}
\ No newline at end of file
+{"version":"10.0.0-beta.0","info":{"plain":"- Core: Fix staticCopy not copying `index.html` to sub directory - [#32259](https://github.com/storybookjs/storybook/pull/32259), thanks @ndelangen!\n- Core: Remove CJS bundles, only ship ESM - [#31819](https://github.com/storybookjs/storybook/pull/31819), thanks @ndelangen!\n- Docs: Move button in ArgsTable heading to fix screenreader announcements - [#32238](https://github.com/storybookjs/storybook/pull/32238), thanks @Sidnioulz!\n- Telemetry: Disambiguate traffic coming from error/upgrade links - [#32287](https://github.com/storybookjs/storybook/pull/32287), thanks @shilman!\n- Telemetry: Disambiguate unattributed traffic from Onboarding - [#32286](https://github.com/storybookjs/storybook/pull/32286), thanks @shilman!"}}
\ No newline at end of file

From 7aa48c2dddbde021d80a2a1146cfb34344f46fa3 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 20:31:49 +0200
Subject: [PATCH 111/130] Fix regression and failing E2E tests

---
 code/core/src/manager/components/sidebar/Tree.tsx | 2 ++
 code/e2e-tests/tags.spec.ts                       | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 88a02b053be4..9ab6e372db73 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -381,6 +381,8 @@ const Node = React.memo<NodeProps>(function Node(props) {
                 onSelectStoryId(item.id);
               }
               setExpanded({ ids: [item.id], value: !isExpanded });
+            } else {
+              setExpanded({ ids: [item.id], value: !isExpanded });
             }
           }}
           onMouseEnter={() => {
diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
index 6e1eca678db6..0cfc334cbf37 100644
--- a/code/e2e-tests/tags.spec.ts
+++ b/code/e2e-tests/tags.spec.ts
@@ -84,8 +84,8 @@ test.describe('tags', () => {
       await expect(stories).toHaveCount(1);
 
       // Clear selection
-      await expect(tooltip.locator('#unselect-all')).toBeVisible();
-      await tooltip.locator('#unselect-all').click();
+      await expect(tooltip.locator('#reset-filters')).toBeVisible();
+      await tooltip.locator('#reset-filters').click();
 
       // Checkboxes are not selected anymore
       await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);
@@ -117,8 +117,8 @@ test.describe('tags', () => {
         await expect(stories).toHaveCount(1);
 
         // Clear selection
-        await expect(tooltip.locator('#unselect-all')).toBeVisible();
-        await tooltip.locator('#unselect-all').click();
+        await expect(tooltip.locator('#reset-filters')).toBeVisible();
+        await tooltip.locator('#reset-filters').click();
 
         // Checkboxes are not selected anymore
         await expect(tooltip.locator('input[type="checkbox"]:checked')).toHaveCount(0);

From f5e829d5e1517e1d89cb44737de5addede472673 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 20:41:11 +0200
Subject: [PATCH 112/130] fix test-runner tests

---
 code/renderers/react/template/stories/test-fn.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/renderers/react/template/stories/test-fn.stories.tsx b/code/renderers/react/template/stories/test-fn.stories.tsx
index 39468654d3db..dc0ceaddefee 100644
--- a/code/renderers/react/template/stories/test-fn.stories.tsx
+++ b/code/renderers/react/template/stories/test-fn.stories.tsx
@@ -60,6 +60,7 @@ Default.test(
       chromatic: { viewports: [380] },
     },
     globals: { viewport: { value: 'sized' } },
+    tags: ['!test'],
   },
   async ({ canvas }) => {
     const button = canvas.getByText('Arg from test override');

From 0b21affb43f1f22101d6d58bc6630c4db3cb3b7f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Sep 2025 21:39:29 +0200
Subject: [PATCH 113/130] fix unit tests

---
 .../vitest/src/node/test-manager.test.ts      |   2 +-
 .../modules/preview-web/PreviewWeb.test.ts    | 518 +++++++++---------
 2 files changed, 262 insertions(+), 258 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index 23a73dd5f277..4774ec50158c 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -235,7 +235,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be Parent Story Name + Test Name
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parent story Test name$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory Test name$/);
   });
 
   it('should trigger all tests of a story', async () => {
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index 7683c0d11baa..14f4f4006b42 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -3849,267 +3849,271 @@ describe('PreviewWeb', () => {
       expect(extracted).toBe(true);
 
       expect(await preview.extract()).toMatchInlineSnapshot(`
-  {
-    "component-one--a": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-        "one": {
-          "mapping": {
-            "1": "mapped-1",
-          },
-          "name": "one",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "a",
-        "one": 1,
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--a",
-      "initialArgs": {
-        "foo": "a",
-        "one": 1,
-      },
-      "kind": "Component One",
-      "name": "A",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
-          },
-        },
-        "docs": {
-          "container": [MockFunction spy],
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "story": "A",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-one--b": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
-          },
-        },
-        "one": {
-          "mapping": {
-            "1": "mapped-1",
-          },
-          "name": "one",
-          "type": {
-            "name": "string",
-          },
-        },
-      },
-      "args": {
-        "foo": "b",
-        "one": 1,
-      },
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--b",
-      "initialArgs": {
-        "foo": "b",
-        "one": 1,
-      },
-      "kind": "Component One",
-      "name": "B",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+        {
+          "component-one--a": {
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "one": {
+                "mapping": {
+                  "1": "mapped-1",
+                },
+                "name": "one",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "a",
+              "one": 1,
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--a",
+            "initialArgs": {
+              "foo": "a",
+              "one": 1,
+            },
+            "kind": "Component One",
+            "name": "A",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "container": [MockFunction spy],
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "story": "A",
+            "storyGlobals": {},
+            "storyId": "component-one--a",
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "container": [MockFunction spy],
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "story": "B",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-one--e": {
-      "argTypes": {},
-      "args": {},
-      "component": undefined,
-      "componentId": "component-one",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-one--e",
-      "initialArgs": {},
-      "kind": "Component One",
-      "name": "E",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+          "component-one--b": {
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+              "one": {
+                "mapping": {
+                  "1": "mapped-1",
+                },
+                "name": "one",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "b",
+              "one": 1,
+            },
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--b",
+            "initialArgs": {
+              "foo": "b",
+              "one": 1,
+            },
+            "kind": "Component One",
+            "name": "B",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "container": [MockFunction spy],
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "story": "B",
+            "storyGlobals": {},
+            "storyId": "component-one--b",
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "page": [MockFunction spy],
-          "renderer": [Function],
-        },
-        "fileName": "./src/ExtraComponentOne.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "story": "E",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component One",
-      "usesMount": false,
-    },
-    "component-two--c": {
-      "argTypes": {
-        "foo": {
-          "name": "foo",
-          "type": {
-            "name": "string",
+          "component-one--e": {
+            "argTypes": {},
+            "args": {},
+            "component": undefined,
+            "componentId": "component-one",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-one--e",
+            "initialArgs": {},
+            "kind": "Component One",
+            "name": "E",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "page": [MockFunction spy],
+                "renderer": [Function],
+              },
+              "fileName": "./src/ExtraComponentOne.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "story": "E",
+            "storyGlobals": {},
+            "storyId": "component-one--e",
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component One",
+            "usesMount": false,
           },
-        },
-      },
-      "args": {
-        "foo": "c",
-      },
-      "component": undefined,
-      "componentId": "component-two",
-      "globals": {
-        "a": "b",
-        "backgrounds": {
-          "grid": false,
-          "value": undefined,
-        },
-        "measureEnabled": false,
-        "outline": false,
-        "viewport": {
-          "isRotated": false,
-          "value": undefined,
-        },
-      },
-      "id": "component-two--c",
-      "initialArgs": {
-        "foo": "c",
-      },
-      "kind": "Component Two",
-      "name": "C",
-      "parameters": {
-        "__isArgsStory": false,
-        "backgrounds": {
-          "disable": false,
-          "grid": {
-            "cellAmount": 5,
-            "cellSize": 20,
-            "opacity": 0.5,
+          "component-two--c": {
+            "argTypes": {
+              "foo": {
+                "name": "foo",
+                "type": {
+                  "name": "string",
+                },
+              },
+            },
+            "args": {
+              "foo": "c",
+            },
+            "component": undefined,
+            "componentId": "component-two",
+            "globals": {
+              "a": "b",
+              "backgrounds": {
+                "grid": false,
+                "value": undefined,
+              },
+              "measureEnabled": false,
+              "outline": false,
+              "viewport": {
+                "isRotated": false,
+                "value": undefined,
+              },
+            },
+            "id": "component-two--c",
+            "initialArgs": {
+              "foo": "c",
+            },
+            "kind": "Component Two",
+            "name": "C",
+            "parameters": {
+              "__isArgsStory": false,
+              "backgrounds": {
+                "disable": false,
+                "grid": {
+                  "cellAmount": 5,
+                  "cellSize": 20,
+                  "opacity": 0.5,
+                },
+              },
+              "docs": {
+                "renderer": [Function],
+              },
+              "fileName": "./src/ComponentTwo.stories.js",
+              "throwPlayFunctionExceptions": false,
+            },
+            "playFunction": undefined,
+            "story": "C",
+            "storyGlobals": {},
+            "storyId": "component-two--c",
+            "subcomponents": undefined,
+            "tags": [
+              "dev",
+              "test",
+            ],
+            "testingLibraryRender": undefined,
+            "title": "Component Two",
+            "usesMount": false,
           },
-        },
-        "docs": {
-          "renderer": [Function],
-        },
-        "fileName": "./src/ComponentTwo.stories.js",
-        "throwPlayFunctionExceptions": false,
-      },
-      "playFunction": undefined,
-      "story": "C",
-      "storyGlobals": {},
-      "subcomponents": undefined,
-      "tags": [
-        "dev",
-        "test",
-      ],
-      "testingLibraryRender": undefined,
-      "title": "Component Two",
-      "usesMount": false,
-    },
-  }
-`);
+        }
+      `);
     });
   });
 });

From f793686c98447b5b626bc17779b78eb5d9edfb27 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 09:33:38 +0200
Subject: [PATCH 114/130] Fix focused test run in Storybook sidebar

---
 .../vitest/src/node/test-manager.test.ts      | 12 +++--
 code/addons/vitest/src/node/vitest-manager.ts | 38 +++++++-------
 .../vitest/src/vitest-plugin/test-utils.ts    | 10 ++--
 .../csf-tools/vitest-plugin/transformer.ts    | 50 ++++++++++++++++---
 4 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index 4774ec50158c..ba60ccade44e 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -15,6 +15,7 @@ import path from 'pathe';
 import { STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, storeOptions } from '../constants';
 import type { StoreEvent, StoreState } from '../types';
 import { TestManager, type TestManagerOptions } from './test-manager';
+import { ZERO_WIDTH_SPACE } from './vitest-manager';
 
 const setTestNamePattern = vi.hoisted(() => vi.fn());
 const vitest = vi.hoisted(() => ({
@@ -204,7 +205,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
@@ -220,7 +221,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be exact match of the story name
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
   });
 
   it('should trigger a single story test', async () => {
@@ -235,7 +236,9 @@ describe('TestManager', () => {
       },
     });
     // regex should be Parent Story Name + Test Name
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory Test name$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(
+      new RegExp(`^Parent story${ZERO_WIDTH_SPACE} Test name$`)
+    );
   });
 
   it('should trigger all tests of a story', async () => {
@@ -249,8 +252,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    // regex should be parent story name with no spaces in between plus a space at the end
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory /);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^Parent story${ZERO_WIDTH_SPACE}`));
   });
 
   it('should restart Vitest before a test run if coverage is enabled', async () => {
diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index de7ead667481..d4ddcf5e7c33 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -31,6 +31,17 @@ const packageDir = dirname(require.resolve('@storybook/addon-vitest/package.json
 // We have to tell Vitest that it runs as part of Storybook
 process.env.VITEST_STORYBOOK = 'true';
 
+/**
+ * The Storybook vitest plugin adds a special zero width space so that it's possible to do a regex
+ * for all test run use cases. Otherwise, if there were two unrelated stories like "Primary Button"
+ * and "Primary Button Mobile", once you run tests for "Primary Button" and its children it would
+ * also match "Primary Button Mobile". As it turns out, this limitation is also present in the
+ * Vitest VSCode extension and the issue would occur with normal vitest tests as well, but because
+ * we use the zero width space, we circumvent the issue.
+ */
+export const ZERO_WIDTH_SPACE = '​';
+const getTestName = (name: string) => `${name}${ZERO_WIDTH_SPACE}`;
+
 export class VitestManager {
   vitest: Vitest | null = null;
 
@@ -271,10 +282,6 @@ export class VitestManager {
       ? allStories.filter((story) => runPayload.storyIds?.includes(story.id))
       : allStories;
 
-    // When we run tests that involved a describe block (parent story + tests)
-    // we need to remove spaces from the parent story name, as the describe block does not have spaces
-    const getExportName = (name: string) => name.replace(/\s+/g, '');
-
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
       const selectedStory = filteredStories.find((story) => story.id === runPayload.storyIds?.[0]);
@@ -291,32 +298,21 @@ export class VitestManager {
       if (isParentStory) {
         // Use case 1: "Single" story run on a story with tests
         // -> run all tests of that story, as storyName is a describe block
-        /**
-         * The vitest transformation keeps the export name as is, e.g. "PrimaryButton", while the
-         * storybook sidebar changes the name to "Primary Button". That's why we need to remove
-         * spaces from the story name, to match the test name. If we were to also beautify the test
-         * name, doing a regex wouldn't be precise because there could be two describes, for
-         * instance: "Primary Button" and "Primary Button Mobile" and both would match. The fact
-         * that there are no spaces in the test name is what makes "PrimaryButton" and
-         * "PrimaryButtonMobile" work well in the regex. As it turns out, this limitation is also
-         * present in the Vitest VSCode extension and the issue would occur with normal vitest tests
-         * as well.
-         */
-        const parentName = getExportName(selectedStory.name);
-        regex = new RegExp(`^${parentName} `); // the extra space is intentional!
+        const parentName = getTestName(selectedStory.name);
+        regex = new RegExp(`^${parentName}`);
       } else if (hasParentStory) {
         // Use case 2: Single story run on a specific story test
-        // in this case the regex pattern should be the story parentName + story.name
+        // in this case the regex pattern should be the story parentName + space + story.name
         const parentStory = allStories.find((story) => story.id === selectedStory.parent);
         if (!parentStory) {
           throw new Error(`Parent story not found for story ${selectedStory.id}`);
         }
 
-        const parentName = getExportName(parentStory.name);
+        const parentName = getTestName(parentStory.name);
         regex = new RegExp(`^${parentName} ${storyName}$`);
       } else {
-        // Use case 3: Single story run on a story without tests
-        regex = new RegExp(`^${storyName}$`);
+        // Use case 3: Single story run on a story without tests, should be exact match of story name
+        regex = new RegExp(`^${getTestName(storyName)}$`);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 0501548275f1..b712eb48eb9a 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -36,6 +36,7 @@ export const testStory = (
   story: ComposedStoryFn | Story<Renderer>,
   meta: ComponentAnnotations | Meta<Renderer>,
   skipTags: string[],
+  storyId: string,
   testName?: string
 ) => {
   return async (context: TestContext & { story: ComposedStoryFn }) => {
@@ -66,12 +67,9 @@ export const testStory = (
       meta: TaskMeta & { storyId: string; reports: Report[] };
     };
 
-    if (testName) {
-      // TODO: [test-syntax] isn't this done by the csf plugin somehow?
-      _task.meta.storyId = toTestId(composedStory.id, testName);
-    } else {
-      _task.meta.storyId = composedStory.id;
-    }
+    // The id will always be present, calculated by CsfFile
+    // and is needed so that we can add the test to the story in Storybook's UI for the status
+    _task.meta.storyId = storyId;
 
     await setViewport(composedStory.parameters, composedStory.globals);
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 7b66e5ad8f4b..0fcb646c2b38 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -7,7 +7,7 @@ import type { StoriesEntry, Tag } from 'storybook/internal/types';
 
 import { dedent } from 'ts-dedent';
 
-import { formatCsf, loadCsf } from '../CsfFile';
+import { type StoryTest, formatCsf, loadCsf } from '../CsfFile';
 
 type TagsFilter = {
   include: string[];
@@ -31,6 +31,18 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
  * bundles.
  */
 
+/**
+ * We add a special zero width space so that it's possible to do a regex for all test run use cases.
+ * Otherwise, if there were two unrelated stories like "Primary Button" and "Primary Button Mobile",
+ * once you run tests for "Primary Button" and its children it would also match "Primary Button
+ * Mobile". As it turns out, this limitation is also present in the Vitest VSCode extension and the
+ * issue would occur with normal vitest tests as well, but because we use the zero width space, we
+ * circumvent the issue.
+ */
+const ZERO_WIDTH_SPACE = '​';
+const getLiteralWithZeroWidthSpace = (testTitle: string) =>
+  t.stringLiteral(`${testTitle}${ZERO_WIDTH_SPACE}`);
+
 export async function vitestTransform({
   code,
   fileName,
@@ -206,22 +218,25 @@ export async function vitestTransform({
     testTitle,
     node,
     overrideSourcemap = true,
+    storyId,
   }: {
     localName: string;
     exportName: string;
     testTitle: string;
     node: t.Node;
     overrideSourcemap?: boolean;
+    storyId: string;
   }): t.ExpressionStatement => {
     // Create the _test expression directly using the exportName identifier
     const testStoryCall = t.expressionStatement(
       t.callExpression(vitestTestId, [
-        t.stringLiteral(testTitle),
+        getLiteralWithZeroWidthSpace(testTitle),
         t.callExpression(testStoryId, [
           t.stringLiteral(exportName),
           t.identifier(localName),
           t.identifier(metaExportName),
           skipTagsId,
+          t.stringLiteral(storyId),
         ]),
       ])
     );
@@ -237,13 +252,15 @@ export async function vitestTransform({
 
   const getDescribeStatementForStory = (options: {
     localName: string;
+    describeTitle: string;
     exportName: string;
-    tests: Array<{ name: string; node: t.Node }>;
+    tests: StoryTest[];
     node: t.Node;
+    parentStoryId: string;
   }): t.ExpressionStatement => {
-    const { localName, exportName, tests, node } = options;
+    const { localName, describeTitle, exportName, tests, node, parentStoryId } = options;
     const describeBlock = t.callExpression(vitestDescribeId, [
-      t.stringLiteral(exportName),
+      getLiteralWithZeroWidthSpace(describeTitle),
       t.arrowFunctionExpression(
         [],
         t.blockStatement([
@@ -251,8 +268,9 @@ export async function vitestTransform({
             ...options,
             testTitle: 'base story',
             overrideSourcemap: false,
+            storyId: parentStoryId,
           }),
-          ...tests.map(({ name: testName, node: testNode }) => {
+          ...tests.map(({ name: testName, node: testNode, id: storyId }) => {
             const testStatement = t.expressionStatement(
               t.callExpression(vitestTestId, [
                 t.stringLiteral(testName),
@@ -261,6 +279,7 @@ export async function vitestTransform({
                   t.identifier(localName),
                   t.identifier(metaExportName),
                   t.arrayExpression([]),
+                  t.stringLiteral(storyId),
                   t.stringLiteral(testName),
                 ]),
               ])
@@ -288,16 +307,31 @@ export async function vitestTransform({
         return;
       }
 
+      console.log({ parsed: parsed._stories[exportName] });
       const localName = parsed._stories[exportName].localName ?? exportName;
       // use the story's name as the test title for vitest, and fallback to exportName
       const testTitle = parsed._stories[exportName].name ?? exportName;
+      const storyId = parsed._stories[exportName].id;
       const tests = parsed.getStoryTests(exportName);
 
       if (tests?.length > 0) {
-        return getDescribeStatementForStory({ localName, exportName, tests, node });
+        return getDescribeStatementForStory({
+          localName,
+          describeTitle: testTitle,
+          exportName,
+          tests,
+          node,
+          parentStoryId: storyId,
+        });
       }
 
-      return getTestStatementForStory({ testTitle, localName, exportName, node });
+      return getTestStatementForStory({
+        testTitle,
+        localName,
+        exportName,
+        node,
+        storyId,
+      });
     })
     .filter((st) => !!st) as t.ExpressionStatement[];
 

From 2d64830703103f2cf93e91663e86be6b5182eab8 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 09:35:25 +0200
Subject: [PATCH 115/130] Revert "Fix focused test run in Storybook sidebar"

This reverts commit f793686c98447b5b626bc17779b78eb5d9edfb27.
---
 .../vitest/src/node/test-manager.test.ts      | 12 ++---
 code/addons/vitest/src/node/vitest-manager.ts | 38 +++++++-------
 .../vitest/src/vitest-plugin/test-utils.ts    | 10 ++--
 .../csf-tools/vitest-plugin/transformer.ts    | 50 +++----------------
 4 files changed, 40 insertions(+), 70 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index ba60ccade44e..4774ec50158c 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -15,7 +15,6 @@ import path from 'pathe';
 import { STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, storeOptions } from '../constants';
 import type { StoreEvent, StoreState } from '../types';
 import { TestManager, type TestManagerOptions } from './test-manager';
-import { ZERO_WIDTH_SPACE } from './vitest-manager';
 
 const setTestNamePattern = vi.hoisted(() => vi.fn());
 const vitest = vi.hoisted(() => ({
@@ -205,7 +204,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
@@ -221,7 +220,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be exact match of the story name
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
   });
 
   it('should trigger a single story test', async () => {
@@ -236,9 +235,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be Parent Story Name + Test Name
-    expect(setTestNamePattern).toHaveBeenCalledWith(
-      new RegExp(`^Parent story${ZERO_WIDTH_SPACE} Test name$`)
-    );
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory Test name$/);
   });
 
   it('should trigger all tests of a story', async () => {
@@ -252,7 +249,8 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^Parent story${ZERO_WIDTH_SPACE}`));
+    // regex should be parent story name with no spaces in between plus a space at the end
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory /);
   });
 
   it('should restart Vitest before a test run if coverage is enabled', async () => {
diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index d4ddcf5e7c33..de7ead667481 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -31,17 +31,6 @@ const packageDir = dirname(require.resolve('@storybook/addon-vitest/package.json
 // We have to tell Vitest that it runs as part of Storybook
 process.env.VITEST_STORYBOOK = 'true';
 
-/**
- * The Storybook vitest plugin adds a special zero width space so that it's possible to do a regex
- * for all test run use cases. Otherwise, if there were two unrelated stories like "Primary Button"
- * and "Primary Button Mobile", once you run tests for "Primary Button" and its children it would
- * also match "Primary Button Mobile". As it turns out, this limitation is also present in the
- * Vitest VSCode extension and the issue would occur with normal vitest tests as well, but because
- * we use the zero width space, we circumvent the issue.
- */
-export const ZERO_WIDTH_SPACE = '​';
-const getTestName = (name: string) => `${name}${ZERO_WIDTH_SPACE}`;
-
 export class VitestManager {
   vitest: Vitest | null = null;
 
@@ -282,6 +271,10 @@ export class VitestManager {
       ? allStories.filter((story) => runPayload.storyIds?.includes(story.id))
       : allStories;
 
+    // When we run tests that involved a describe block (parent story + tests)
+    // we need to remove spaces from the parent story name, as the describe block does not have spaces
+    const getExportName = (name: string) => name.replace(/\s+/g, '');
+
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
       const selectedStory = filteredStories.find((story) => story.id === runPayload.storyIds?.[0]);
@@ -298,21 +291,32 @@ export class VitestManager {
       if (isParentStory) {
         // Use case 1: "Single" story run on a story with tests
         // -> run all tests of that story, as storyName is a describe block
-        const parentName = getTestName(selectedStory.name);
-        regex = new RegExp(`^${parentName}`);
+        /**
+         * The vitest transformation keeps the export name as is, e.g. "PrimaryButton", while the
+         * storybook sidebar changes the name to "Primary Button". That's why we need to remove
+         * spaces from the story name, to match the test name. If we were to also beautify the test
+         * name, doing a regex wouldn't be precise because there could be two describes, for
+         * instance: "Primary Button" and "Primary Button Mobile" and both would match. The fact
+         * that there are no spaces in the test name is what makes "PrimaryButton" and
+         * "PrimaryButtonMobile" work well in the regex. As it turns out, this limitation is also
+         * present in the Vitest VSCode extension and the issue would occur with normal vitest tests
+         * as well.
+         */
+        const parentName = getExportName(selectedStory.name);
+        regex = new RegExp(`^${parentName} `); // the extra space is intentional!
       } else if (hasParentStory) {
         // Use case 2: Single story run on a specific story test
-        // in this case the regex pattern should be the story parentName + space + story.name
+        // in this case the regex pattern should be the story parentName + story.name
         const parentStory = allStories.find((story) => story.id === selectedStory.parent);
         if (!parentStory) {
           throw new Error(`Parent story not found for story ${selectedStory.id}`);
         }
 
-        const parentName = getTestName(parentStory.name);
+        const parentName = getExportName(parentStory.name);
         regex = new RegExp(`^${parentName} ${storyName}$`);
       } else {
-        // Use case 3: Single story run on a story without tests, should be exact match of story name
-        regex = new RegExp(`^${getTestName(storyName)}$`);
+        // Use case 3: Single story run on a story without tests
+        regex = new RegExp(`^${storyName}$`);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index b712eb48eb9a..0501548275f1 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -36,7 +36,6 @@ export const testStory = (
   story: ComposedStoryFn | Story<Renderer>,
   meta: ComponentAnnotations | Meta<Renderer>,
   skipTags: string[],
-  storyId: string,
   testName?: string
 ) => {
   return async (context: TestContext & { story: ComposedStoryFn }) => {
@@ -67,9 +66,12 @@ export const testStory = (
       meta: TaskMeta & { storyId: string; reports: Report[] };
     };
 
-    // The id will always be present, calculated by CsfFile
-    // and is needed so that we can add the test to the story in Storybook's UI for the status
-    _task.meta.storyId = storyId;
+    if (testName) {
+      // TODO: [test-syntax] isn't this done by the csf plugin somehow?
+      _task.meta.storyId = toTestId(composedStory.id, testName);
+    } else {
+      _task.meta.storyId = composedStory.id;
+    }
 
     await setViewport(composedStory.parameters, composedStory.globals);
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 0fcb646c2b38..7b66e5ad8f4b 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -7,7 +7,7 @@ import type { StoriesEntry, Tag } from 'storybook/internal/types';
 
 import { dedent } from 'ts-dedent';
 
-import { type StoryTest, formatCsf, loadCsf } from '../CsfFile';
+import { formatCsf, loadCsf } from '../CsfFile';
 
 type TagsFilter = {
   include: string[];
@@ -31,18 +31,6 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
  * bundles.
  */
 
-/**
- * We add a special zero width space so that it's possible to do a regex for all test run use cases.
- * Otherwise, if there were two unrelated stories like "Primary Button" and "Primary Button Mobile",
- * once you run tests for "Primary Button" and its children it would also match "Primary Button
- * Mobile". As it turns out, this limitation is also present in the Vitest VSCode extension and the
- * issue would occur with normal vitest tests as well, but because we use the zero width space, we
- * circumvent the issue.
- */
-const ZERO_WIDTH_SPACE = '​';
-const getLiteralWithZeroWidthSpace = (testTitle: string) =>
-  t.stringLiteral(`${testTitle}${ZERO_WIDTH_SPACE}`);
-
 export async function vitestTransform({
   code,
   fileName,
@@ -218,25 +206,22 @@ export async function vitestTransform({
     testTitle,
     node,
     overrideSourcemap = true,
-    storyId,
   }: {
     localName: string;
     exportName: string;
     testTitle: string;
     node: t.Node;
     overrideSourcemap?: boolean;
-    storyId: string;
   }): t.ExpressionStatement => {
     // Create the _test expression directly using the exportName identifier
     const testStoryCall = t.expressionStatement(
       t.callExpression(vitestTestId, [
-        getLiteralWithZeroWidthSpace(testTitle),
+        t.stringLiteral(testTitle),
         t.callExpression(testStoryId, [
           t.stringLiteral(exportName),
           t.identifier(localName),
           t.identifier(metaExportName),
           skipTagsId,
-          t.stringLiteral(storyId),
         ]),
       ])
     );
@@ -252,15 +237,13 @@ export async function vitestTransform({
 
   const getDescribeStatementForStory = (options: {
     localName: string;
-    describeTitle: string;
     exportName: string;
-    tests: StoryTest[];
+    tests: Array<{ name: string; node: t.Node }>;
     node: t.Node;
-    parentStoryId: string;
   }): t.ExpressionStatement => {
-    const { localName, describeTitle, exportName, tests, node, parentStoryId } = options;
+    const { localName, exportName, tests, node } = options;
     const describeBlock = t.callExpression(vitestDescribeId, [
-      getLiteralWithZeroWidthSpace(describeTitle),
+      t.stringLiteral(exportName),
       t.arrowFunctionExpression(
         [],
         t.blockStatement([
@@ -268,9 +251,8 @@ export async function vitestTransform({
             ...options,
             testTitle: 'base story',
             overrideSourcemap: false,
-            storyId: parentStoryId,
           }),
-          ...tests.map(({ name: testName, node: testNode, id: storyId }) => {
+          ...tests.map(({ name: testName, node: testNode }) => {
             const testStatement = t.expressionStatement(
               t.callExpression(vitestTestId, [
                 t.stringLiteral(testName),
@@ -279,7 +261,6 @@ export async function vitestTransform({
                   t.identifier(localName),
                   t.identifier(metaExportName),
                   t.arrayExpression([]),
-                  t.stringLiteral(storyId),
                   t.stringLiteral(testName),
                 ]),
               ])
@@ -307,31 +288,16 @@ export async function vitestTransform({
         return;
       }
 
-      console.log({ parsed: parsed._stories[exportName] });
       const localName = parsed._stories[exportName].localName ?? exportName;
       // use the story's name as the test title for vitest, and fallback to exportName
       const testTitle = parsed._stories[exportName].name ?? exportName;
-      const storyId = parsed._stories[exportName].id;
       const tests = parsed.getStoryTests(exportName);
 
       if (tests?.length > 0) {
-        return getDescribeStatementForStory({
-          localName,
-          describeTitle: testTitle,
-          exportName,
-          tests,
-          node,
-          parentStoryId: storyId,
-        });
+        return getDescribeStatementForStory({ localName, exportName, tests, node });
       }
 
-      return getTestStatementForStory({
-        testTitle,
-        localName,
-        exportName,
-        node,
-        storyId,
-      });
+      return getTestStatementForStory({ testTitle, localName, exportName, node });
     })
     .filter((st) => !!st) as t.ExpressionStatement[];
 

From 86db94594498f167964817911bf565309e7afde7 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 09:36:02 +0200
Subject: [PATCH 116/130] Fix focused test run in Storybook sidebar

---
 .../vitest/src/node/test-manager.test.ts      | 12 +++--
 code/addons/vitest/src/node/vitest-manager.ts | 38 +++++++-------
 .../vitest/src/vitest-plugin/test-utils.ts    | 10 ++--
 .../csf-tools/vitest-plugin/transformer.ts    | 50 ++++++++++++++++---
 4 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index 4774ec50158c..ba60ccade44e 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -15,6 +15,7 @@ import path from 'pathe';
 import { STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, storeOptions } from '../constants';
 import type { StoreEvent, StoreState } from '../types';
 import { TestManager, type TestManagerOptions } from './test-manager';
+import { ZERO_WIDTH_SPACE } from './vitest-manager';
 
 const setTestNamePattern = vi.hoisted(() => vi.fn());
 const vitest = vi.hoisted(() => ({
@@ -204,7 +205,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
@@ -220,7 +221,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be exact match of the story name
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
   });
 
   it('should trigger a single story test', async () => {
@@ -235,7 +236,9 @@ describe('TestManager', () => {
       },
     });
     // regex should be Parent Story Name + Test Name
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory Test name$/);
+    expect(setTestNamePattern).toHaveBeenCalledWith(
+      new RegExp(`^Parent story${ZERO_WIDTH_SPACE} Test name$`)
+    );
   });
 
   it('should trigger all tests of a story', async () => {
@@ -249,8 +252,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    // regex should be parent story name with no spaces in between plus a space at the end
-    expect(setTestNamePattern).toHaveBeenCalledWith(/^Parentstory /);
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^Parent story${ZERO_WIDTH_SPACE}`));
   });
 
   it('should restart Vitest before a test run if coverage is enabled', async () => {
diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index de7ead667481..d4ddcf5e7c33 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -31,6 +31,17 @@ const packageDir = dirname(require.resolve('@storybook/addon-vitest/package.json
 // We have to tell Vitest that it runs as part of Storybook
 process.env.VITEST_STORYBOOK = 'true';
 
+/**
+ * The Storybook vitest plugin adds a special zero width space so that it's possible to do a regex
+ * for all test run use cases. Otherwise, if there were two unrelated stories like "Primary Button"
+ * and "Primary Button Mobile", once you run tests for "Primary Button" and its children it would
+ * also match "Primary Button Mobile". As it turns out, this limitation is also present in the
+ * Vitest VSCode extension and the issue would occur with normal vitest tests as well, but because
+ * we use the zero width space, we circumvent the issue.
+ */
+export const ZERO_WIDTH_SPACE = '​';
+const getTestName = (name: string) => `${name}${ZERO_WIDTH_SPACE}`;
+
 export class VitestManager {
   vitest: Vitest | null = null;
 
@@ -271,10 +282,6 @@ export class VitestManager {
       ? allStories.filter((story) => runPayload.storyIds?.includes(story.id))
       : allStories;
 
-    // When we run tests that involved a describe block (parent story + tests)
-    // we need to remove spaces from the parent story name, as the describe block does not have spaces
-    const getExportName = (name: string) => name.replace(/\s+/g, '');
-
     const isSingleStoryRun = runPayload.storyIds?.length === 1;
     if (isSingleStoryRun) {
       const selectedStory = filteredStories.find((story) => story.id === runPayload.storyIds?.[0]);
@@ -291,32 +298,21 @@ export class VitestManager {
       if (isParentStory) {
         // Use case 1: "Single" story run on a story with tests
         // -> run all tests of that story, as storyName is a describe block
-        /**
-         * The vitest transformation keeps the export name as is, e.g. "PrimaryButton", while the
-         * storybook sidebar changes the name to "Primary Button". That's why we need to remove
-         * spaces from the story name, to match the test name. If we were to also beautify the test
-         * name, doing a regex wouldn't be precise because there could be two describes, for
-         * instance: "Primary Button" and "Primary Button Mobile" and both would match. The fact
-         * that there are no spaces in the test name is what makes "PrimaryButton" and
-         * "PrimaryButtonMobile" work well in the regex. As it turns out, this limitation is also
-         * present in the Vitest VSCode extension and the issue would occur with normal vitest tests
-         * as well.
-         */
-        const parentName = getExportName(selectedStory.name);
-        regex = new RegExp(`^${parentName} `); // the extra space is intentional!
+        const parentName = getTestName(selectedStory.name);
+        regex = new RegExp(`^${parentName}`);
       } else if (hasParentStory) {
         // Use case 2: Single story run on a specific story test
-        // in this case the regex pattern should be the story parentName + story.name
+        // in this case the regex pattern should be the story parentName + space + story.name
         const parentStory = allStories.find((story) => story.id === selectedStory.parent);
         if (!parentStory) {
           throw new Error(`Parent story not found for story ${selectedStory.id}`);
         }
 
-        const parentName = getExportName(parentStory.name);
+        const parentName = getTestName(parentStory.name);
         regex = new RegExp(`^${parentName} ${storyName}$`);
       } else {
-        // Use case 3: Single story run on a story without tests
-        regex = new RegExp(`^${storyName}$`);
+        // Use case 3: Single story run on a story without tests, should be exact match of story name
+        regex = new RegExp(`^${getTestName(storyName)}$`);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
diff --git a/code/addons/vitest/src/vitest-plugin/test-utils.ts b/code/addons/vitest/src/vitest-plugin/test-utils.ts
index 0501548275f1..b712eb48eb9a 100644
--- a/code/addons/vitest/src/vitest-plugin/test-utils.ts
+++ b/code/addons/vitest/src/vitest-plugin/test-utils.ts
@@ -36,6 +36,7 @@ export const testStory = (
   story: ComposedStoryFn | Story<Renderer>,
   meta: ComponentAnnotations | Meta<Renderer>,
   skipTags: string[],
+  storyId: string,
   testName?: string
 ) => {
   return async (context: TestContext & { story: ComposedStoryFn }) => {
@@ -66,12 +67,9 @@ export const testStory = (
       meta: TaskMeta & { storyId: string; reports: Report[] };
     };
 
-    if (testName) {
-      // TODO: [test-syntax] isn't this done by the csf plugin somehow?
-      _task.meta.storyId = toTestId(composedStory.id, testName);
-    } else {
-      _task.meta.storyId = composedStory.id;
-    }
+    // The id will always be present, calculated by CsfFile
+    // and is needed so that we can add the test to the story in Storybook's UI for the status
+    _task.meta.storyId = storyId;
 
     await setViewport(composedStory.parameters, composedStory.globals);
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 7b66e5ad8f4b..0fcb646c2b38 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -7,7 +7,7 @@ import type { StoriesEntry, Tag } from 'storybook/internal/types';
 
 import { dedent } from 'ts-dedent';
 
-import { formatCsf, loadCsf } from '../CsfFile';
+import { type StoryTest, formatCsf, loadCsf } from '../CsfFile';
 
 type TagsFilter = {
   include: string[];
@@ -31,6 +31,18 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
  * bundles.
  */
 
+/**
+ * We add a special zero width space so that it's possible to do a regex for all test run use cases.
+ * Otherwise, if there were two unrelated stories like "Primary Button" and "Primary Button Mobile",
+ * once you run tests for "Primary Button" and its children it would also match "Primary Button
+ * Mobile". As it turns out, this limitation is also present in the Vitest VSCode extension and the
+ * issue would occur with normal vitest tests as well, but because we use the zero width space, we
+ * circumvent the issue.
+ */
+const ZERO_WIDTH_SPACE = '​';
+const getLiteralWithZeroWidthSpace = (testTitle: string) =>
+  t.stringLiteral(`${testTitle}${ZERO_WIDTH_SPACE}`);
+
 export async function vitestTransform({
   code,
   fileName,
@@ -206,22 +218,25 @@ export async function vitestTransform({
     testTitle,
     node,
     overrideSourcemap = true,
+    storyId,
   }: {
     localName: string;
     exportName: string;
     testTitle: string;
     node: t.Node;
     overrideSourcemap?: boolean;
+    storyId: string;
   }): t.ExpressionStatement => {
     // Create the _test expression directly using the exportName identifier
     const testStoryCall = t.expressionStatement(
       t.callExpression(vitestTestId, [
-        t.stringLiteral(testTitle),
+        getLiteralWithZeroWidthSpace(testTitle),
         t.callExpression(testStoryId, [
           t.stringLiteral(exportName),
           t.identifier(localName),
           t.identifier(metaExportName),
           skipTagsId,
+          t.stringLiteral(storyId),
         ]),
       ])
     );
@@ -237,13 +252,15 @@ export async function vitestTransform({
 
   const getDescribeStatementForStory = (options: {
     localName: string;
+    describeTitle: string;
     exportName: string;
-    tests: Array<{ name: string; node: t.Node }>;
+    tests: StoryTest[];
     node: t.Node;
+    parentStoryId: string;
   }): t.ExpressionStatement => {
-    const { localName, exportName, tests, node } = options;
+    const { localName, describeTitle, exportName, tests, node, parentStoryId } = options;
     const describeBlock = t.callExpression(vitestDescribeId, [
-      t.stringLiteral(exportName),
+      getLiteralWithZeroWidthSpace(describeTitle),
       t.arrowFunctionExpression(
         [],
         t.blockStatement([
@@ -251,8 +268,9 @@ export async function vitestTransform({
             ...options,
             testTitle: 'base story',
             overrideSourcemap: false,
+            storyId: parentStoryId,
           }),
-          ...tests.map(({ name: testName, node: testNode }) => {
+          ...tests.map(({ name: testName, node: testNode, id: storyId }) => {
             const testStatement = t.expressionStatement(
               t.callExpression(vitestTestId, [
                 t.stringLiteral(testName),
@@ -261,6 +279,7 @@ export async function vitestTransform({
                   t.identifier(localName),
                   t.identifier(metaExportName),
                   t.arrayExpression([]),
+                  t.stringLiteral(storyId),
                   t.stringLiteral(testName),
                 ]),
               ])
@@ -288,16 +307,31 @@ export async function vitestTransform({
         return;
       }
 
+      console.log({ parsed: parsed._stories[exportName] });
       const localName = parsed._stories[exportName].localName ?? exportName;
       // use the story's name as the test title for vitest, and fallback to exportName
       const testTitle = parsed._stories[exportName].name ?? exportName;
+      const storyId = parsed._stories[exportName].id;
       const tests = parsed.getStoryTests(exportName);
 
       if (tests?.length > 0) {
-        return getDescribeStatementForStory({ localName, exportName, tests, node });
+        return getDescribeStatementForStory({
+          localName,
+          describeTitle: testTitle,
+          exportName,
+          tests,
+          node,
+          parentStoryId: storyId,
+        });
       }
 
-      return getTestStatementForStory({ testTitle, localName, exportName, node });
+      return getTestStatementForStory({
+        testTitle,
+        localName,
+        exportName,
+        node,
+        storyId,
+      });
     })
     .filter((st) => !!st) as t.ExpressionStatement[];
 

From 07beaea097d003f00abd25ed1b03016705365877 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 10:35:49 +0200
Subject: [PATCH 117/130] remove log

---
 code/core/src/csf-tools/vitest-plugin/transformer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 0fcb646c2b38..4b21b5f49fef 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -307,7 +307,6 @@ export async function vitestTransform({
         return;
       }
 
-      console.log({ parsed: parsed._stories[exportName] });
       const localName = parsed._stories[exportName].localName ?? exportName;
       // use the story's name as the test title for vitest, and fallback to exportName
       const testTitle = parsed._stories[exportName].name ?? exportName;

From c22aa612f6d30daca289246242877d864fa6cbd4 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 12:04:06 +0200
Subject: [PATCH 118/130] use double spaces instead

---
 code/addons/vitest/src/node/test-manager.test.ts | 10 +++++-----
 code/addons/vitest/src/node/vitest-manager.ts    | 16 ++++++++--------
 .../src/csf-tools/vitest-plugin/transformer.ts   |  8 ++++----
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index ba60ccade44e..4823a787e865 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -15,7 +15,7 @@ import path from 'pathe';
 import { STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, storeOptions } from '../constants';
 import type { StoreEvent, StoreState } from '../types';
 import { TestManager, type TestManagerOptions } from './test-manager';
-import { ZERO_WIDTH_SPACE } from './vitest-manager';
+import { DOUBLE_SPACES } from './vitest-manager';
 
 const setTestNamePattern = vi.hoisted(() => vi.fn());
 const vitest = vi.hoisted(() => ({
@@ -205,7 +205,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${DOUBLE_SPACES}$`));
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
@@ -221,7 +221,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be exact match of the story name
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${ZERO_WIDTH_SPACE}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${DOUBLE_SPACES}$`));
   });
 
   it('should trigger a single story test', async () => {
@@ -237,7 +237,7 @@ describe('TestManager', () => {
     });
     // regex should be Parent Story Name + Test Name
     expect(setTestNamePattern).toHaveBeenCalledWith(
-      new RegExp(`^Parent story${ZERO_WIDTH_SPACE} Test name$`)
+      new RegExp(`^Parent story${DOUBLE_SPACES} Test name$`)
     );
   });
 
@@ -252,7 +252,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^Parent story${ZERO_WIDTH_SPACE}`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^Parent story${DOUBLE_SPACES}`));
   });
 
   it('should restart Vitest before a test run if coverage is enabled', async () => {
diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index d4ddcf5e7c33..2beffef5e8b8 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -32,15 +32,15 @@ const packageDir = dirname(require.resolve('@storybook/addon-vitest/package.json
 process.env.VITEST_STORYBOOK = 'true';
 
 /**
- * The Storybook vitest plugin adds a special zero width space so that it's possible to do a regex
- * for all test run use cases. Otherwise, if there were two unrelated stories like "Primary Button"
- * and "Primary Button Mobile", once you run tests for "Primary Button" and its children it would
- * also match "Primary Button Mobile". As it turns out, this limitation is also present in the
- * Vitest VSCode extension and the issue would occur with normal vitest tests as well, but because
- * we use the zero width space, we circumvent the issue.
+ * The Storybook vitest plugin adds double space characters so that it's possible to do a regex for
+ * all test run use cases. Otherwise, if there were two unrelated stories like "Primary Button" and
+ * "Primary Button Mobile", once you run tests for "Primary Button" and its children it would also
+ * match "Primary Button Mobile". As it turns out, this limitation is also present in the Vitest
+ * VSCode extension and the issue would occur with normal vitest tests as well, but because we use
+ * double spaces, we circumvent the issue.
  */
-export const ZERO_WIDTH_SPACE = '​';
-const getTestName = (name: string) => `${name}${ZERO_WIDTH_SPACE}`;
+export const DOUBLE_SPACES = '  ';
+const getTestName = (name: string) => `${name}${DOUBLE_SPACES}`;
 
 export class VitestManager {
   vitest: Vitest | null = null;
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 4b21b5f49fef..bf6b32d2d782 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -32,16 +32,16 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
  */
 
 /**
- * We add a special zero width space so that it's possible to do a regex for all test run use cases.
+ * We add double space characters so that it's possible to do a regex for all test run use cases.
  * Otherwise, if there were two unrelated stories like "Primary Button" and "Primary Button Mobile",
  * once you run tests for "Primary Button" and its children it would also match "Primary Button
  * Mobile". As it turns out, this limitation is also present in the Vitest VSCode extension and the
- * issue would occur with normal vitest tests as well, but because we use the zero width space, we
+ * issue would occur with normal vitest tests as well, but because we use double spaces, we
  * circumvent the issue.
  */
-const ZERO_WIDTH_SPACE = '​';
+const DOUBLE_SPACES = '  ';
 const getLiteralWithZeroWidthSpace = (testTitle: string) =>
-  t.stringLiteral(`${testTitle}${ZERO_WIDTH_SPACE}`);
+  t.stringLiteral(`${testTitle}${DOUBLE_SPACES}`);
 
 export async function vitestTransform({
   code,

From f0cfe33fc7231f98f700c0d29b3f068ef972e703 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 14:47:19 +0200
Subject: [PATCH 119/130] only use double space in parent stories

---
 code/addons/vitest/src/node/vitest-manager.ts |   2 +-
 .../vitest-plugin/transformer.test.ts         | 101 ++++++++++++------
 .../csf-tools/vitest-plugin/transformer.ts    |   2 +-
 3 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/code/addons/vitest/src/node/vitest-manager.ts b/code/addons/vitest/src/node/vitest-manager.ts
index 2beffef5e8b8..8460c83ea2f9 100644
--- a/code/addons/vitest/src/node/vitest-manager.ts
+++ b/code/addons/vitest/src/node/vitest-manager.ts
@@ -312,7 +312,7 @@ export class VitestManager {
         regex = new RegExp(`^${parentName} ${storyName}$`);
       } else {
         // Use case 3: Single story run on a story without tests, should be exact match of story name
-        regex = new RegExp(`^${getTestName(storyName)}$`);
+        regex = new RegExp(`^${storyName}$`);
       }
       this.vitest!.setGlobalTestNamePattern(regex);
     }
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index e5007c247730..840d16f57499 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -73,7 +73,7 @@ describe('transformer', () => {
           export const Story = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, _meta, []));
+            _test("Story", _testStory("Story", Story, _meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -102,7 +102,7 @@ describe('transformer', () => {
           export const Story = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, _meta, []));
+            _test("Story", _testStory("Story", Story, _meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -132,7 +132,7 @@ describe('transformer', () => {
           export const Story = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, meta, []));
+            _test("Story", _testStory("Story", Story, meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -163,7 +163,7 @@ describe('transformer', () => {
           export const Story = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, meta, []));
+            _test("Story", _testStory("Story", Story, meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -199,7 +199,7 @@ describe('transformer', () => {
           };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory("Primary", Primary, _meta, []));
+            _test("Primary", _testStory("Primary", Primary, _meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -224,7 +224,7 @@ describe('transformer', () => {
             };
             const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
             if (_isRunningFromThisFile) {
-              _test("custom name", _testStory("Primary", Primary, _meta, []));
+              _test("custom name", _testStory("Primary", Primary, _meta, [], "automatic-calculated-title--primary"));
             }
           `);
         });
@@ -247,7 +247,7 @@ describe('transformer', () => {
             Story.storyName = 'custom name';
             const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
             if (_isRunningFromThisFile) {
-              _test("custom name", _testStory("Story", Story, _meta, []));
+              _test("custom name", _testStory("Story", Story, _meta, [], "automatic-calculated-title--story"));
             }
           `);
         });
@@ -282,7 +282,7 @@ describe('transformer', () => {
           export { Primary };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory("Primary", Primary, _meta, []));
+            _test("Primary", _testStory("Primary", Primary, _meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -316,7 +316,7 @@ describe('transformer', () => {
           export { Primary as PrimaryStory };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, []));
+            _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, [], "automatic-calculated-title--primary-story"));
           }
         `);
       });
@@ -352,8 +352,8 @@ describe('transformer', () => {
           export { Primary };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Secondary", _testStory("Secondary", Secondary, _meta, []));
-            _test("Primary", _testStory("Primary", Primary, _meta, []));
+            _test("Secondary", _testStory("Secondary", Secondary, _meta, [], "automatic-calculated-title--secondary"));
+            _test("Primary", _testStory("Primary", Primary, _meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -384,7 +384,7 @@ describe('transformer', () => {
           export const nonStory = 123;
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, _meta, []));
+            _test("Story", _testStory("Story", Story, _meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -441,7 +441,7 @@ describe('transformer', () => {
           export const NotIncluded = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory("Included", Included, _meta, []));
+            _test("Included", _testStory("Included", Included, _meta, [], "automatic-calculated-title--included"));
           }
         `);
       });
@@ -472,7 +472,7 @@ describe('transformer', () => {
           };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory("Included", Included, _meta, []));
+            _test("Included", _testStory("Included", Included, _meta, [], "automatic-calculated-title--included"));
           }
         `);
       });
@@ -500,7 +500,7 @@ describe('transformer', () => {
           };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Skipped", _testStory("Skipped", Skipped, _meta, ["skip-me"]));
+            _test("Skipped", _testStory("Skipped", Skipped, _meta, ["skip-me"], "automatic-calculated-title--skipped"));
           }
         `);
       });
@@ -532,7 +532,7 @@ describe('transformer', () => {
           export const Primary = {};
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory("Primary", Primary, meta, []));
+            _test("Primary", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary"));
           }
         `);
 
@@ -589,7 +589,7 @@ describe('transformer', () => {
           export const Story = meta.story({});
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, meta, []));
+            _test("Story", _testStory("Story", Story, meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -616,7 +616,7 @@ describe('transformer', () => {
           });
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("custom name", _testStory("Primary", Primary, meta, []));
+            _test("custom name", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -652,7 +652,7 @@ describe('transformer', () => {
           export { Primary };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory("Primary", Primary, meta, []));
+            _test("Primary", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -688,7 +688,7 @@ describe('transformer', () => {
           export { Primary as PrimaryStory };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("PrimaryStory", _testStory("PrimaryStory", Primary, meta, []));
+            _test("PrimaryStory", _testStory("PrimaryStory", Primary, meta, [], "automatic-calculated-title--primary-story"));
           }
         `);
       });
@@ -724,8 +724,8 @@ describe('transformer', () => {
           export { Primary };
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Secondary", _testStory("Secondary", Secondary, _meta, []));
-            _test("Primary", _testStory("Primary", Primary, _meta, []));
+            _test("Secondary", _testStory("Secondary", Secondary, _meta, [], "automatic-calculated-title--secondary"));
+            _test("Primary", _testStory("Primary", Primary, _meta, [], "automatic-calculated-title--primary"));
           }
         `);
       });
@@ -756,7 +756,7 @@ describe('transformer', () => {
           export const nonStory = 123;
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Story", _testStory("Story", Story, _meta, []));
+            _test("Story", _testStory("Story", Story, _meta, [], "automatic-calculated-title--story"));
           }
         `);
       });
@@ -812,10 +812,40 @@ describe('transformer', () => {
           A.test("bar", () => {});
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _describe("A", () => {
-              _test("base story", _testStory("A", A, meta, []));
-              _test("foo", _testStory("A", A, meta, [], "foo"));
-              _test("bar", _testStory("A", A, meta, [], "bar"));
+            _describe("A  ", () => {
+              _test("base story", _testStory("A", A, meta, [], "automatic-calculated-title--a"));
+              _test("foo", _testStory("A", A, meta, [], "automatic-calculated-title--a:foo", "foo"));
+              _test("bar", _testStory("A", A, meta, [], "automatic-calculated-title--a:bar", "bar"));
+            });
+          }
+        `);
+      });
+    });
+
+    describe('test syntax', () => {
+      it('should add test statement to story tests', async () => {
+        const code = `
+          import { config } from '#.storybook/preview';
+          const meta = config.meta({});
+          export const Primary = meta.story({});
+          Primary.test("foo", () => {});
+        `;
+        const result = await transform({ code });
+
+        expect(result.code).toMatchInlineSnapshot(`
+          import { test as _test, expect as _expect, describe as _describe } from "vitest";
+          import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
+          import { config } from '#.storybook/preview';
+          const meta = config.meta({
+            title: "automatic/calculated/title"
+          });
+          export const Primary = meta.story({});
+          Primary.test("foo", () => {});
+          const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _describe("Primary  ", () => {
+              _test("base story", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary"));
+              _test("foo", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary:foo", "foo"));
             });
           }
         `);
@@ -850,7 +880,7 @@ describe('transformer', () => {
           export const NotIncluded = meta.story({});
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory("Included", Included, meta, []));
+            _test("Included", _testStory("Included", Included, meta, [], "automatic-calculated-title--included"));
           }
         `);
       });
@@ -882,7 +912,7 @@ describe('transformer', () => {
           });
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Included", _testStory("Included", Included, meta, []));
+            _test("Included", _testStory("Included", Included, meta, [], "automatic-calculated-title--included"));
           }
         `);
       });
@@ -911,18 +941,19 @@ describe('transformer', () => {
           });
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Skipped", _testStory("Skipped", Skipped, meta, ["skip-me"]));
+            _test("Skipped", _testStory("Skipped", Skipped, meta, ["skip-me"], "automatic-calculated-title--skipped"));
           }
         `);
       });
     });
 
     describe('source map calculation', () => {
-      it.skip('should remap the location of an inline named export to its relative testStory function', async () => {
+      it('should remap the location of an inline named export to its relative testStory function', async () => {
         const originalCode = `
         import { config } from '#.storybook/preview';
         const meta = config.meta({});
         export const Primary = meta.story({});
+        Primary.test("foo", () => {});
       `;
 
         const { code: transformedCode, map } = await transform({
@@ -930,16 +961,20 @@ describe('transformer', () => {
         });
 
         expect(transformedCode).toMatchInlineSnapshot(`
-          import { test as _test, expect as _expect } from "vitest";
+          import { test as _test, expect as _expect, describe as _describe } from "vitest";
           import { testStory as _testStory, convertToFilePath } from "@storybook/addon-vitest/internal/test-utils";
           import { config } from '#.storybook/preview';
           const meta = config.meta({
             title: "automatic/calculated/title"
           });
           export const Primary = meta.story({});
+          Primary.test("foo", () => {});
           const _isRunningFromThisFile = convertToFilePath(import.meta.url).includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
           if (_isRunningFromThisFile) {
-            _test("Primary", _testStory("Primary", Primary, meta, []));
+            _describe("Primary  ", () => {
+              _test("base story", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary"));
+              _test("foo", _testStory("Primary", Primary, meta, [], "automatic-calculated-title--primary:foo", "foo"));
+            });
           }
         `);
 
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index bf6b32d2d782..cf43a9d3806b 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -230,7 +230,7 @@ export async function vitestTransform({
     // Create the _test expression directly using the exportName identifier
     const testStoryCall = t.expressionStatement(
       t.callExpression(vitestTestId, [
-        getLiteralWithZeroWidthSpace(testTitle),
+        t.stringLiteral(testTitle),
         t.callExpression(testStoryId, [
           t.stringLiteral(exportName),
           t.identifier(localName),

From 31137620b978d6d4e3340dc261683fe312efce6e Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 16:45:31 +0200
Subject: [PATCH 120/130] fix tests

---
 code/addons/vitest/src/node/test-manager.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/node/test-manager.test.ts b/code/addons/vitest/src/node/test-manager.test.ts
index 4823a787e865..28426414943c 100644
--- a/code/addons/vitest/src/node/test-manager.test.ts
+++ b/code/addons/vitest/src/node/test-manager.test.ts
@@ -205,7 +205,7 @@ describe('TestManager', () => {
         triggeredBy: 'global',
       },
     });
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${DOUBLE_SPACES}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One$`));
     expect(vitest.runTestSpecifications).toHaveBeenCalledWith(tests.slice(0, 1), true);
   });
 
@@ -221,7 +221,7 @@ describe('TestManager', () => {
       },
     });
     // regex should be exact match of the story name
-    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One${DOUBLE_SPACES}$`));
+    expect(setTestNamePattern).toHaveBeenCalledWith(new RegExp(`^One$`));
   });
 
   it('should trigger a single story test', async () => {

From d98408fa70507dbcc5a3da3c68a75c783d2e9fe2 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 4 Sep 2025 17:22:25 +0200
Subject: [PATCH 121/130] Implement include/exclude toggle for each tag to
 replace global invert toggle

---
 .../manager/components/sidebar/TagsFilter.tsx | 114 +++++++++--------
 .../sidebar/TagsFilterPanel.stories.tsx       |  57 ++++-----
 .../components/sidebar/TagsFilterPanel.tsx    | 121 +++++++++---------
 3 files changed, 148 insertions(+), 144 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 368ed1bc4c25..9d332d5e6313 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Badge, IconButton, WithTooltip } from 'storybook/internal/components';
 import type { StoryIndex, Tag, TagsOptions } from 'storybook/internal/types';
@@ -52,72 +52,85 @@ export interface TagsFilterProps {
 }
 
 export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFilterProps) => {
-  const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
-  const [indeterminateTags, setIndeterminateTags] = useState<Tag[]>([]);
+  const allTags = useMemo(() => {
+    return Object.values(indexJson.entries).reduce((acc, entry) => {
+      entry.tags?.forEach((tag: Tag) => {
+        if (!BUILT_IN_TAGS_HIDE.has(tag)) {
+          acc.set(tag, (acc.get(tag) || 0) + 1);
+        }
+      });
+      return acc;
+    }, new Map<Tag, number>());
+  }, [indexJson.entries]);
+
+  const { defaultIncluded, defaultExcluded } = useMemo(() => {
+    return Object.entries(tagPresets).reduce(
+      (acc, [tag, { defaultSelection }]) => {
+        if (defaultSelection === 'include') {
+          acc.defaultIncluded.add(tag);
+        } else if (defaultSelection === 'exclude') {
+          acc.defaultExcluded.add(tag);
+        }
+        return acc;
+      },
+      { defaultIncluded: new Set<Tag>(), defaultExcluded: new Set<Tag>() }
+    );
+  }, [tagPresets]);
+
+  const [includedTags, setIncludedTags] = useState<Set<Tag>>(defaultIncluded);
+  const [excludedTags, setExcludedTags] = useState<Set<Tag>>(defaultExcluded);
   const [expanded, setExpanded] = useState(false);
-  const [inverted, setInverted] = useState(false);
-  const [initial, setInitial] = useState(false);
-  const tagsActive = selectedTags.length > 0;
+  const tagsActive = includedTags.size > 0 || excludedTags.size > 0;
 
   const resetTags = useCallback(() => {
-    const tags = Object.keys(tagPresets);
-    const presets = Object.values(tagPresets);
-    const invert =
-      presets.some((p) => 'defaultSelection' in p && p.defaultSelection === 'exclude') &&
-      !presets.some((p) => 'defaultSelection' in p && p.defaultSelection === 'include');
-    setSelectedTags(
-      tags.filter((tag) => tagPresets[tag].defaultSelection === (invert ? 'exclude' : 'include'))
-    );
-    setIndeterminateTags(
-      invert ? [] : tags.filter((tag) => tagPresets[tag].defaultSelection === 'exclude')
-    );
-    setInverted(invert);
-    setInitial(true);
-  }, [tagPresets]);
+    setIncludedTags(defaultIncluded);
+    setExcludedTags(defaultExcluded);
+  }, [defaultIncluded, defaultExcluded]);
 
   useEffect(resetTags, [resetTags]);
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (selectedTags.length === 0) {
+      if (includedTags.size + excludedTags.size === 0) {
         return true;
       }
-      const match = selectedTags.some((tag) => item.tags?.includes(tag));
-      return inverted ? !match : match;
+      return (
+        includedTags.values().some((tag) => item.tags?.includes(tag)) &&
+        excludedTags.values().every((tag) => !item.tags?.includes(tag))
+      );
     });
-  }, [api, selectedTags, inverted]);
-
-  const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
-    entry.tags?.forEach((tag: Tag) => {
-      if (!BUILT_IN_TAGS_HIDE.has(tag)) {
-        acc.set(tag, (acc.get(tag) || 0) + 1);
-      }
-    });
-    return acc;
-  }, new Map<Tag, number>());
+  }, [api, includedTags, excludedTags]);
 
   const toggleTag = useCallback(
-    (tag: string) => {
-      if (selectedTags.includes(tag)) {
-        setSelectedTags(selectedTags.filter((t) => t !== tag));
+    (tag: string, excluded?: boolean) => {
+      const set = new Set([tag]);
+      if (excluded === true) {
+        setExcludedTags(excludedTags.union(set));
+        setIncludedTags(includedTags.difference(set));
+      } else if (excluded === false) {
+        setIncludedTags(includedTags.union(set));
+        setExcludedTags(excludedTags.difference(set));
+      } else if (includedTags.has(tag)) {
+        setIncludedTags(includedTags.difference(set));
+      } else if (excludedTags.has(tag)) {
+        setExcludedTags(excludedTags.difference(set));
       } else {
-        setSelectedTags([...selectedTags, tag]);
+        setIncludedTags(includedTags.union(set));
       }
-      setInitial(false);
     },
-    [selectedTags, setSelectedTags]
+    [includedTags, excludedTags]
   );
+
   const setAllTags = useCallback(
     (selected: boolean) => {
       if (selected) {
-        setSelectedTags(Array.from(allTags.keys()));
+        setIncludedTags(new Set(allTags.keys()));
       } else {
-        setSelectedTags([]);
-        setInverted(false);
+        setIncludedTags(new Set());
       }
-      setInitial(false);
+      setExcludedTags(new Set());
     },
-    [allTags, setSelectedTags]
+    [allTags]
   );
 
   const handleToggleExpand = useCallback(
@@ -144,15 +157,16 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
         <TagsFilterPanel
           api={api}
           allTags={allTags}
-          selectedTags={selectedTags}
-          indeterminateTags={indeterminateTags}
+          includedTags={includedTags}
+          excludedTags={excludedTags}
           toggleTag={toggleTag}
           setAllTags={setAllTags}
           resetTags={resetTags}
-          inverted={inverted}
-          setInverted={setInverted}
           isDevelopment={isDevelopment}
-          isInitialSelection={initial}
+          isInitialSelection={
+            includedTags.symmetricDifference(defaultIncluded).size === 0 &&
+            excludedTags.symmetricDifference(defaultExcluded).size === 0
+          }
         />
       )}
       closeOnOutsideClick
@@ -161,7 +175,7 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
         <IconButton key="tags" title="Tag filters" active={tagsActive} onClick={handleToggleExpand}>
           <FilterIcon />
         </IconButton>
-        {selectedTags.length > 0 && <TagSelected />}
+        {includedTags.size + excludedTags.size > 0 && <TagSelected />}
       </Wrapper>
     </WithTooltip>
   );
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index a990f5cff04e..a33246531a7d 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -10,9 +10,15 @@ const meta = {
   args: {
     toggleTag: fn(),
     setAllTags: fn(),
-    inverted: false,
-    setInverted: fn(),
-    indeterminateTags: [],
+    allTags: new Map([
+      ['play-fn', 1],
+      ['test-fn', 1],
+      ['tag1', 1],
+      ['tag2', 1],
+      ['tag3', 1],
+    ]),
+    includedTags: new Set(),
+    excludedTags: new Set(),
     resetTags: fn(),
     isInitialSelection: true,
     api: {
@@ -27,17 +33,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {};
+
 export const Empty: Story = {
   args: {
     allTags: new Map(),
-    selectedTags: [],
   },
 };
 
 export const BuiltInTagsOnly: Story = {
   args: {
-    allTags: new Map([['play-fn', 1]]),
-    selectedTags: [],
+    allTags: new Map([
+      ['play-fn', 1],
+      ['test-fn', 1],
+    ]),
   },
 };
 
@@ -48,48 +57,28 @@ export const BuiltInTagsOnlyProduction: Story = {
   },
 };
 
-export const Default: Story = {
+export const Included: Story = {
   args: {
-    allTags: new Map([
-      ['tag1', 1],
-      ['tag2', 1],
-      ['tag3', 1],
-    ]),
-    selectedTags: ['tag1', 'tag3'],
+    includedTags: new Set(['tag1', 'play-fn']),
   },
 };
 
-export const Inverted: Story = {
+export const Excluded: Story = {
   args: {
-    ...Default.args,
-    inverted: true,
+    excludedTags: new Set(['tag1', 'play-fn']),
   },
 };
 
-export const Indeterminate: Story = {
+export const Mixed: Story = {
   args: {
-    ...Default.args,
-    indeterminateTags: ['tag1', 'tag3'],
+    includedTags: new Set(['tag1', 'play-fn']),
+    excludedTags: new Set(['tag2', 'test-fn']),
   },
 };
 
 export const Modified: Story = {
   args: {
-    ...Default.args,
+    ...Mixed.args,
     isInitialSelection: false,
   },
 };
-
-export const BuiltInTags: Story = {
-  args: {
-    allTags: new Map([...Default.args.allTags, ['play-fn', 1]]),
-    selectedTags: ['tag1', 'tag3'],
-  },
-};
-
-export const ExtraBuiltInTagsSelected: Story = {
-  args: {
-    ...BuiltInTags.args,
-    selectedTags: ['tag1', 'tag3', 'autodocs', 'play-fn'],
-  },
-};
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index ae88066cdd27..94d7923e1f05 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -1,14 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
-import { Form, IconButton, TooltipLinkList } from 'storybook/internal/components';
+import { Button, Form, IconButton, ListItem, TooltipLinkList } from 'storybook/internal/components';
 import type { Tag } from 'storybook/internal/types';
 
 import {
   BatchAcceptIcon,
   CloseIcon,
+  DeleteIcon,
   DocumentIcon,
-  EyeCloseIcon,
-  EyeIcon,
   ShareAltIcon,
 } from '@storybook/icons';
 
@@ -47,16 +46,37 @@ const Actions = styled.div(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
 }));
 
+const TagRow = styled.div({
+  display: 'flex',
+
+  '& > button': {
+    width: 64,
+    maxWidth: 64,
+    marginLeft: 4,
+    paddingLeft: 0,
+    paddingRight: 0,
+    fontWeight: 'normal',
+    transition: 'all 150ms',
+  },
+  '&:not(:has(:hover, :focus-visible, *:focus-visible))': {
+    '& > button': {
+      maxWidth: 0,
+      opacity: 0,
+    },
+    '& svg + input': {
+      display: 'none',
+    },
+  },
+});
+
 interface TagsFilterPanelProps {
   api: API;
   allTags: Map<Tag, number>;
-  selectedTags: Tag[];
-  indeterminateTags: Tag[];
-  toggleTag: (tag: Tag) => void;
+  includedTags: Set<Tag>;
+  excludedTags: Set<Tag>;
+  toggleTag: (tag: Tag, excluded?: boolean) => void;
   setAllTags: (selected: boolean) => void;
   resetTags: () => void;
-  inverted: boolean;
-  setInverted: (inverted: boolean) => void;
   isDevelopment: boolean;
   isInitialSelection: boolean;
 }
@@ -64,32 +84,17 @@ interface TagsFilterPanelProps {
 export const TagsFilterPanel = ({
   api,
   allTags,
-  selectedTags,
-  indeterminateTags,
+  includedTags,
+  excludedTags,
   toggleTag,
   setAllTags,
   resetTags,
-  inverted,
-  setInverted,
   isDevelopment,
   isInitialSelection,
 }: TagsFilterPanelProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const checkboxes = ref.current?.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
-    if (!checkboxes) {
-      return;
-    }
-    for (const checkbox of checkboxes) {
-      const tag = checkbox.getAttribute('data-tag');
-      if (tag && indeterminateTags.includes(tag)) {
-        checkbox.indeterminate = true;
-      }
-    }
-  }, [indeterminateTags]);
-
-  const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
+  const [builtInEntries, userEntries] = allTags.entries().reduce(
     (acc, [tag, count]) => {
       acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
       return acc;
@@ -105,32 +110,37 @@ export const TagsFilterPanel = ({
     isIndented: false,
   };
 
+  const renderTag = ([tag, count]: [Tag, number]) => {
+    const excluded = excludedTags.has(tag);
+    const checked = excluded || includedTags.has(tag);
+    const id = `tag-${tag}`;
+    return {
+      id,
+      content: (
+        <TagRow>
+          <ListItem
+            as="label"
+            icon={
+              <>
+                {excluded && <DeleteIcon />}
+                <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />
+              </>
+            }
+            title={tag}
+            right={count}
+          />
+          <Button variant="ghost" size="medium" onClick={() => toggleTag(tag, !excluded)}>
+            {excluded ? 'Include' : 'Exclude'}
+          </Button>
+        </TagRow>
+      ),
+    };
+  };
+
   const groups = [
     allTags.size === 0 ? [noTags] : [],
-    userEntries
-      .sort((a, b) => a[0].localeCompare(b[0]))
-      .map(([tag, count]) => {
-        const checked = selectedTags.includes(tag);
-        const id = `tag-${tag}`;
-        return {
-          id,
-          title: tag,
-          right: count,
-          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />,
-        };
-      }),
-    builtInEntries
-      .sort((a, b) => a[0].localeCompare(b[0]))
-      .map(([tag, count]) => {
-        const checked = selectedTags.includes(tag);
-        const id = `tag-${tag}`;
-        return {
-          id,
-          title: tag,
-          right: count,
-          input: <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />,
-        };
-      }),
+    userEntries.sort((a, b) => a[0].localeCompare(b[0])).map(renderTag),
+    builtInEntries.sort((a, b) => a[0].localeCompare(b[0])).map(renderTag),
   ] as Link[][];
 
   if (userEntries.length === 0 && isDevelopment) {
@@ -160,15 +170,6 @@ export const TagsFilterPanel = ({
               Reset filters
             </IconButton>
           )}
-          <IconButton
-            id="invert-selection"
-            disabled={selectedTags.length === 0}
-            onClick={() => setInverted(!inverted)}
-            active={inverted}
-          >
-            {inverted ? <EyeCloseIcon /> : <EyeIcon />}
-            Invert
-          </IconButton>
         </Actions>
       )}
       <TooltipLinkList links={groups} />

From 54ecd3a23cb0e6391b970e2c6176da28eb8c2861 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Sep 2025 18:35:15 +0200
Subject: [PATCH 122/130] Enhance codemod tests and support for
 non-conventional story formats in Storybook.

---
 .../helpers/config-to-csf-factory.test.ts     | 25 ++++--
 .../codemod/helpers/config-to-csf-factory.ts  | 48 ++++++++++-
 .../helpers/story-to-csf-factory.test.ts      | 84 ++++++++++++++++++-
 .../codemod/helpers/story-to-csf-factory.ts   | 30 ++++++-
 4 files changed, 176 insertions(+), 11 deletions(-)

diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
index e19a8b4475c6..f0405236345a 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.test.ts
@@ -73,15 +73,13 @@ describe('main/preview codemod: general parsing functionality', () => {
     ).resolves.toMatchInlineSnapshot(`
       import { defineMain } from '@storybook/react-vite/node';
 
-      const config = {
-        framework: '@storybook/react-vite',
+      export default defineMain({
         tags: [],
         viteFinal: () => {
           return config;
         },
-      };
-
-      export default config;
+        framework: '@storybook/react-vite',
+      });
     `);
   });
   it('should wrap defineMain call from named exports format', async () => {
@@ -244,4 +242,21 @@ describe('preview specific functionality', () => {
       });
     `);
   });
+  it('should work', async () => {
+    await expect(
+      transform(dedent`
+        export const decorators = [1]
+        export default {
+          parameters: {},
+        }
+      `)
+    ).resolves.toMatchInlineSnapshot(`
+      import { definePreview } from '@storybook/react-vite';
+
+      export default definePreview({
+        decorators: [1],
+        parameters: {},
+      });
+    `);
+  });
 });
diff --git a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
index faeebeb77666..1db0859b31a9 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/config-to-csf-factory.ts
@@ -45,8 +45,54 @@ export async function configToCsfFactory(
    * Transform into: `export default defineMain({ tags: [], parameters: {} })`
    */
   if (config._exportsObject && hasNamedExports) {
-    config._exportsObject.properties.push(...defineConfigProps);
+    // when merging named exports with default exports, add the named exports first in the list
+    config._exportsObject.properties = [...defineConfigProps, ...config._exportsObject.properties];
     programNode.body = removeExportDeclarations(programNode, exportDecls);
+
+    // After merging, ensure the default export is wrapped with defineMain/definePreview
+    const defineConfigCall = t.callExpression(t.identifier(methodName), [config._exportsObject]);
+
+    let exportDefaultNode = null as unknown as t.ExportDefaultDeclaration;
+    let declarationNodeIndex = -1;
+
+    programNode.body.forEach((node) => {
+      // Detect Syntax 1: export default <identifier>
+      if (t.isExportDefaultDeclaration(node) && t.isIdentifier(node.declaration)) {
+        const declarationName = node.declaration.name;
+
+        declarationNodeIndex = programNode.body.findIndex(
+          (n) =>
+            t.isVariableDeclaration(n) &&
+            n.declarations.some(
+              (d) =>
+                t.isIdentifier(d.id) &&
+                d.id.name === declarationName &&
+                t.isObjectExpression(d.init)
+            )
+        );
+
+        if (declarationNodeIndex !== -1) {
+          exportDefaultNode = node;
+          // remove the original declaration as it will become a default export
+          const declarationNode = programNode.body[declarationNodeIndex];
+          if (t.isVariableDeclaration(declarationNode)) {
+            const id = declarationNode.declarations[0].id;
+            const variableName = t.isIdentifier(id) && id.name;
+
+            if (variableName) {
+              programNode.body.splice(declarationNodeIndex, 1);
+            }
+          }
+        }
+      } else if (t.isExportDefaultDeclaration(node) && t.isObjectExpression(node.declaration)) {
+        // Detect Syntax 2: export default { ... }
+        exportDefaultNode = node;
+      }
+    });
+
+    if (exportDefaultNode !== null) {
+      exportDefaultNode.declaration = defineConfigCall;
+    }
   } else if (config._exportsObject) {
     /**
      * Scenario 2: Default exports
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
index c7e35818d15a..5aac346705e9 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts
@@ -303,16 +303,39 @@ describe('stories codemod', () => {
         };
         const data = {};
         export const A = () => {};
-        // not supported yet (story as function)
         export function B() { };
         // not supported yet (story redeclared)
         const C = { ...A, args: data, };
-        export { C };
+        const D = { args: data };
+        export { C, D as E };
         `);
 
+      expect(transformed).toMatchInlineSnapshot(`
+        import preview from '#.storybook/preview';
+
+        import { A as Component } from './Button';
+        import * as Stories from './Other.stories';
+        import someData from './fixtures';
+
+        const meta = preview.meta({
+          component: Component,
+
+          // not supported yet (story coming from another file)
+          args: Stories.A.args,
+        });
+
+        const data = {};
+        export const A = meta.story(() => {});
+        export const B = meta.story(() => {});
+        // not supported yet (story redeclared)
+        const C = { ...A.input, args: data };
+        const D = { args: data };
+        export { C, D as E };
+      `);
+
       expect(transformed).toContain('A = meta.story');
-      // @TODO: when we support these, uncomment these lines
-      // expect(transformed).toContain('B = meta.story');
+      expect(transformed).toContain('B = meta.story');
+      // @TODO: when we support these, uncomment this line
       // expect(transformed).toContain('C = meta.story');
     });
 
@@ -589,5 +612,58 @@ describe('stories codemod', () => {
         export const A = meta.story();
       `);
     });
+
+    it('should support non-conventional formats', async () => {
+      const transformed = await transform(dedent`
+        import { Meta, StoryObj as CSF3 } from '@storybook/react';
+        import { ComponentProps } from './Component';
+        import { A as Component } from './Button';
+        import * as Stories from './Other.stories';
+        import someData from './fixtures'
+        export default {
+          title: 'Component',
+          component: Component, 
+          // not supported yet (story coming from another file)
+          args: Stories.A.args
+        };
+        const data = {};
+        export const A: StoryObj = () => {};
+        export function B() { };
+        // not supported yet (story redeclared)
+        const C = { ...A, args: data, } satisfies CSF3<ComponentProps>;
+        const D = { args: data };
+        export { C, D as E };
+        `);
+
+      expect(transformed).toMatchInlineSnapshot(`
+        import preview from '#.storybook/preview';
+
+        import { A as Component } from './Button';
+        import { ComponentProps } from './Component';
+        import * as Stories from './Other.stories';
+        import someData from './fixtures';
+
+        const meta = preview.meta({
+          title: 'Component',
+          component: Component,
+
+          // not supported yet (story coming from another file)
+          args: Stories.A.args,
+        });
+
+        const data = {};
+        export const A = meta.story(() => {});
+        export const B = meta.story(() => {});
+        // not supported yet (story redeclared)
+        const C = { ...A.input, args: data } satisfies CSF3<ComponentProps>;
+        const D = { args: data };
+        export { C, D as E };
+      `);
+
+      expect(transformed).toContain('A = meta.story');
+      expect(transformed).toContain('B = meta.story');
+      // @TODO: when we support these, uncomment this line
+      // expect(transformed).toContain('C = meta.story');
+    });
   });
 });
diff --git a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
index e2492d26463e..df69fec71113 100644
--- a/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
+++ b/code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts
@@ -95,7 +95,7 @@ export async function storyToCsfFactory(
   // @TODO: Support unconventional formats:
   // `export function Story() { };` and `export { Story };
   // These are not part of csf._storyExports but rather csf._storyStatements and are tricky to support.
-  Object.entries(csf._storyExports).forEach(([_key, decl]) => {
+  Object.entries(csf._storyExports).forEach(([, decl]) => {
     const id = decl.id;
     const declarator = decl as t.VariableDeclarator;
     let init = t.isVariableDeclarator(declarator) ? declarator.init : undefined;
@@ -128,6 +128,34 @@ export async function storyToCsfFactory(
     }
   });
 
+  // Support function-declared stories
+  Object.entries(csf._storyExports).forEach(([exportName, decl]) => {
+    if (t.isFunctionDeclaration(decl) && decl.id) {
+      const arrowFn = t.arrowFunctionExpression(decl.params, decl.body);
+      arrowFn.async = !!decl.async;
+
+      const wrappedCall = t.callExpression(
+        t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
+        [arrowFn]
+      );
+
+      const replacement = t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(t.identifier(exportName), wrappedCall),
+        ])
+      );
+
+      const pathForExport = (
+        csf as unknown as {
+          _storyPaths?: Record<string, { replaceWith?: (node: t.Node) => void }>;
+        }
+      )._storyPaths?.[exportName];
+      if (pathForExport && pathForExport.replaceWith) {
+        pathForExport.replaceWith(replacement);
+      }
+    }
+  });
+
   const storyExportDecls = new Map(
     Object.entries(csf._storyExports).filter(
       (

From c652477e0dea26325ff23b5bc73b4b40fca2c397 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 00:47:13 +0200
Subject: [PATCH 123/130] Update tags filter UI and fix filter function logic

---
 .../components/tooltip/ListItem.tsx           |   2 +
 .../components/sidebar/TagsFilter.stories.tsx |   4 +-
 .../manager/components/sidebar/TagsFilter.tsx |   9 +-
 .../sidebar/TagsFilterPanel.stories.tsx       |  23 +++-
 .../components/sidebar/TagsFilterPanel.tsx    | 108 ++++++++++++++----
 5 files changed, 110 insertions(+), 36 deletions(-)

diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
index 421d4e27e5bf..63e13f8b1d05 100644
--- a/code/core/src/components/components/tooltip/ListItem.tsx
+++ b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -62,6 +62,7 @@ const Center = styled.span<{ isIndented: boolean }>(
     textAlign: 'left',
     display: 'flex',
     flexDirection: 'column',
+    minWidth: 0, // required for overflow
   },
   ({ isIndented }) => (isIndented ? { marginLeft: 24 } : {})
 );
@@ -116,6 +117,7 @@ export interface ItemProps {
 const Item = styled.div<ItemProps>(
   ({ theme }) => ({
     width: '100%',
+    minWidth: 0, // required for overflow
     border: 'none',
     borderRadius: theme.appBorderRadius,
     background: 'none',
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index f42af0d8dc33..ea7ed8b49eb1 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { findByRole, fn, screen } from 'storybook/test';
+import { findByRole, fn } from 'storybook/test';
 
 import { TagsFilter } from './TagsFilter';
 
 const meta = {
   component: TagsFilter,
   title: 'Sidebar/TagsFilter',
-  tags: ['haha'],
+  tags: ['haha', 'this-is-a-very-long-tag-that-will-be-truncated-after-a-while'],
   args: {
     api: {
       experimental_setFilter: fn(),
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 9d332d5e6313..cdd156b65e19 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -91,12 +91,12 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
 
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
-      if (includedTags.size + excludedTags.size === 0) {
+      if (!includedTags.size && !excludedTags.size) {
         return true;
       }
       return (
-        includedTags.values().some((tag) => item.tags?.includes(tag)) &&
-        excludedTags.values().every((tag) => !item.tags?.includes(tag))
+        (!includedTags.size || includedTags.values().some((tag) => item.tags?.includes(tag))) &&
+        (!excludedTags.size || excludedTags.values().every((tag) => !item.tags?.includes(tag)))
       );
     });
   }, [api, includedTags, excludedTags]);
@@ -163,10 +163,11 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
           setAllTags={setAllTags}
           resetTags={resetTags}
           isDevelopment={isDevelopment}
-          isInitialSelection={
+          isDefaultSelection={
             includedTags.symmetricDifference(defaultIncluded).size === 0 &&
             excludedTags.symmetricDifference(defaultExcluded).size === 0
           }
+          hasDefaultSelection={defaultIncluded.size > 0 || defaultExcluded.size > 0}
         />
       )}
       closeOnOutsideClick
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
index a33246531a7d..fc7d7481bb64 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -15,12 +15,13 @@ const meta = {
       ['test-fn', 1],
       ['tag1', 1],
       ['tag2', 1],
-      ['tag3', 1],
+      ['tag3-which-is-very-long-and-will-be-truncated-after-a-while', 1],
     ]),
     includedTags: new Set(),
     excludedTags: new Set(),
     resetTags: fn(),
-    isInitialSelection: true,
+    isDefaultSelection: true,
+    hasDefaultSelection: false,
     api: {
       getDocsUrl: () => 'https://storybook.js.org/docs/',
     } as any,
@@ -33,7 +34,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Basic: Story = {};
 
 export const Empty: Story = {
   args: {
@@ -60,12 +61,14 @@ export const BuiltInTagsOnlyProduction: Story = {
 export const Included: Story = {
   args: {
     includedTags: new Set(['tag1', 'play-fn']),
+    isDefaultSelection: false,
   },
 };
 
 export const Excluded: Story = {
   args: {
     excludedTags: new Set(['tag1', 'play-fn']),
+    isDefaultSelection: false,
   },
 };
 
@@ -73,12 +76,22 @@ export const Mixed: Story = {
   args: {
     includedTags: new Set(['tag1', 'play-fn']),
     excludedTags: new Set(['tag2', 'test-fn']),
+    isDefaultSelection: false,
   },
 };
 
-export const Modified: Story = {
+export const DefaultSelection: Story = {
   args: {
     ...Mixed.args,
-    isInitialSelection: false,
+    isDefaultSelection: true,
+    hasDefaultSelection: true,
+  },
+};
+
+export const DefaultSelectionModified: Story = {
+  args: {
+    ...Mixed.args,
+    isDefaultSelection: false,
+    hasDefaultSelection: true,
   },
 };
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index 94d7923e1f05..d5f3381c7841 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -1,14 +1,24 @@
 import React, { useRef } from 'react';
 
-import { Button, Form, IconButton, ListItem, TooltipLinkList } from 'storybook/internal/components';
+import {
+  Button,
+  Form,
+  IconButton,
+  ListItem,
+  TooltipLinkList,
+  TooltipNote,
+  WithTooltip,
+} from 'storybook/internal/components';
 import type { Tag } from 'storybook/internal/types';
 
 import {
   BatchAcceptIcon,
-  CloseIcon,
+  CheckIcon,
   DeleteIcon,
   DocumentIcon,
   ShareAltIcon,
+  SweepIcon,
+  UndoIcon,
 } from '@storybook/icons';
 
 import type { API } from 'storybook/manager-api';
@@ -49,7 +59,7 @@ const Actions = styled.div(({ theme }) => ({
 const TagRow = styled.div({
   display: 'flex',
 
-  '& > button': {
+  '& button': {
     width: 64,
     maxWidth: 64,
     marginLeft: 4,
@@ -58,8 +68,9 @@ const TagRow = styled.div({
     fontWeight: 'normal',
     transition: 'all 150ms',
   },
-  '&:not(:has(:hover, :focus-visible, *:focus-visible))': {
-    '& > button': {
+  '&:not(:hover)': {
+    '& button': {
+      marginLeft: 0,
       maxWidth: 0,
       opacity: 0,
     },
@@ -69,6 +80,16 @@ const TagRow = styled.div({
   },
 });
 
+const Label = styled.div({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+const MutedText = styled.span(({ theme }) => ({
+  color: theme.textMutedColor,
+}));
+
 interface TagsFilterPanelProps {
   api: API;
   allTags: Map<Tag, number>;
@@ -78,7 +99,8 @@ interface TagsFilterPanelProps {
   setAllTags: (selected: boolean) => void;
   resetTags: () => void;
   isDevelopment: boolean;
-  isInitialSelection: boolean;
+  isDefaultSelection: boolean;
+  hasDefaultSelection: boolean;
 }
 
 export const TagsFilterPanel = ({
@@ -90,7 +112,8 @@ export const TagsFilterPanel = ({
   setAllTags,
   resetTags,
   isDevelopment,
-  isInitialSelection,
+  isDefaultSelection,
+  hasDefaultSelection,
 }: TagsFilterPanelProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -118,20 +141,38 @@ export const TagsFilterPanel = ({
       id,
       content: (
         <TagRow>
-          <ListItem
-            as="label"
-            icon={
-              <>
-                {excluded && <DeleteIcon />}
-                <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />
-              </>
-            }
-            title={tag}
-            right={count}
-          />
-          <Button variant="ghost" size="medium" onClick={() => toggleTag(tag, !excluded)}>
-            {excluded ? 'Include' : 'Exclude'}
-          </Button>
+          <WithTooltip
+            hasChrome={false}
+            style={{ minWidth: 0, flex: 1 }}
+            tooltip={<TooltipNote note={`${checked ? 'Remove' : 'Add'} tag filter: ${tag}`} />}
+            trigger="hover"
+          >
+            <ListItem
+              as="label"
+              icon={
+                <>
+                  {checked && (excluded ? <DeleteIcon /> : <CheckIcon />)}
+                  <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />
+                </>
+              }
+              title={
+                <Label>
+                  {tag}
+                  {excluded && <MutedText> (excluded)</MutedText>}
+                </Label>
+              }
+              right={excluded ? <s>{count}</s> : <span>{count}</span>}
+            />
+          </WithTooltip>
+          <WithTooltip
+            hasChrome={false}
+            tooltip={<TooltipNote note={`${excluded ? 'Include' : 'Exclude'} tag: ${tag}`} />}
+            trigger="hover"
+          >
+            <Button variant="ghost" size="medium" onClick={() => toggleTag(tag, !excluded)}>
+              {excluded ? 'Include' : 'Exclude'}
+            </Button>
+          </WithTooltip>
         </TagRow>
       ),
     };
@@ -159,17 +200,34 @@ export const TagsFilterPanel = ({
     <Wrapper ref={ref}>
       {allTags.size > 0 && (
         <Actions>
-          {isInitialSelection ? (
+          {includedTags.size === 0 && excludedTags.size === 0 ? (
             <IconButton id="select-all" key="select-all" onClick={() => setAllTags(true)}>
               <BatchAcceptIcon />
               Select all
             </IconButton>
           ) : (
-            <IconButton id="reset-filters" key="reset-filters" onClick={resetTags}>
-              <CloseIcon />
-              Reset filters
+            <IconButton id="deselect-all" key="deselect-all" onClick={() => setAllTags(false)}>
+              <SweepIcon />
+              Clear filters
             </IconButton>
           )}
+          {hasDefaultSelection && (
+            <WithTooltip
+              hasChrome={false}
+              tooltip={<TooltipNote note="Reset to default selection" />}
+              trigger="hover"
+            >
+              <IconButton
+                id="reset-filters"
+                key="reset-filters"
+                onClick={resetTags}
+                aria-label="Reset filters"
+                disabled={isDefaultSelection}
+              >
+                <UndoIcon />
+              </IconButton>
+            </WithTooltip>
+          )}
         </Actions>
       )}
       <TooltipLinkList links={groups} />

From 4c348d3de9bf98e3ee2c750385a5eff484b898a8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 09:34:30 +0200
Subject: [PATCH 124/130] Copy the default included/excluded sets to avoid
 accidental mutation

---
 code/core/src/manager/components/sidebar/TagsFilter.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index cdd156b65e19..d45757e1c527 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -77,14 +77,14 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
     );
   }, [tagPresets]);
 
-  const [includedTags, setIncludedTags] = useState<Set<Tag>>(defaultIncluded);
-  const [excludedTags, setExcludedTags] = useState<Set<Tag>>(defaultExcluded);
+  const [includedTags, setIncludedTags] = useState<Set<Tag>>(new Set(defaultIncluded));
+  const [excludedTags, setExcludedTags] = useState<Set<Tag>>(new Set(defaultExcluded));
   const [expanded, setExpanded] = useState(false);
   const tagsActive = includedTags.size > 0 || excludedTags.size > 0;
 
   const resetTags = useCallback(() => {
-    setIncludedTags(defaultIncluded);
-    setExcludedTags(defaultExcluded);
+    setIncludedTags(new Set(defaultIncluded));
+    setExcludedTags(new Set(defaultExcluded));
   }, [defaultIncluded, defaultExcluded]);
 
   useEffect(resetTags, [resetTags]);

From d28127c40d525d0fcf298e57c2ca46bd88b51995 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 09:36:54 +0200
Subject: [PATCH 125/130] Rename defaultSelection to defaultFilterSelection for
 clarity

---
 .../components/sidebar/TagsFilter.stories.tsx        | 12 ++++++------
 .../src/manager/components/sidebar/TagsFilter.tsx    |  6 +++---
 code/core/src/types/modules/core-common.ts           |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
index ea7ed8b49eb1..8bc48ded4f45 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -44,8 +44,8 @@ export const ClosedWithSelection: Story = {
   args: {
     ...Closed.args,
     tagPresets: {
-      A: { defaultSelection: 'include' },
-      B: { defaultSelection: 'include' },
+      A: { defaultFilterSelection: 'include' },
+      B: { defaultFilterSelection: 'include' },
     },
   },
 };
@@ -68,8 +68,8 @@ export const OpenWithSelectionInverted = {
   args: {
     ...Open.args,
     tagPresets: {
-      A: { defaultSelection: 'exclude' },
-      B: { defaultSelection: 'exclude' },
+      A: { defaultFilterSelection: 'exclude' },
+      B: { defaultFilterSelection: 'exclude' },
     },
   },
 } satisfies Story;
@@ -79,8 +79,8 @@ export const OpenWithSelectionMixed = {
   args: {
     ...Open.args,
     tagPresets: {
-      A: { defaultSelection: 'include' },
-      B: { defaultSelection: 'exclude' },
+      A: { defaultFilterSelection: 'include' },
+      B: { defaultFilterSelection: 'exclude' },
     },
   },
 } satisfies Story;
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index d45757e1c527..104e365f868a 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -65,10 +65,10 @@ export const TagsFilter = ({ api, indexJson, isDevelopment, tagPresets }: TagsFi
 
   const { defaultIncluded, defaultExcluded } = useMemo(() => {
     return Object.entries(tagPresets).reduce(
-      (acc, [tag, { defaultSelection }]) => {
-        if (defaultSelection === 'include') {
+      (acc, [tag, { defaultFilterSelection }]) => {
+        if (defaultFilterSelection === 'include') {
           acc.defaultIncluded.add(tag);
-        } else if (defaultSelection === 'exclude') {
+        } else if (defaultFilterSelection === 'exclude') {
           acc.defaultExcluded.add(tag);
         }
         return acc;
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index 4387752fb206..37fab0b93b54 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -331,7 +331,7 @@ type Tag = string;
 
 export interface TagOptions {
   /** Visually include or exclude stories with this tag in the sidebar by default */
-  defaultSelection?: 'include' | 'exclude';
+  defaultFilterSelection?: 'include' | 'exclude';
   excludeFromSidebar: boolean;
   excludeFromDocsStories: boolean;
 }

From 8a6589521bafd44b69abafce3a78c53fd70e1ffa Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 10:15:57 +0200
Subject: [PATCH 126/130] Remove some built-in tags that will no longer exist

---
 .../core/src/manager/components/sidebar/TagsFilter.tsx | 10 +---------
 .../src/manager/components/sidebar/TagsFilterPanel.tsx |  4 ----
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 104e365f868a..e93f854f10b6 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -12,15 +12,7 @@ import { TagsFilterPanel } from './TagsFilterPanel';
 
 const TAGS_FILTER = 'tags-filter';
 
-const BUILT_IN_TAGS_HIDE = new Set([
-  'dev',
-  'docs-only',
-  'test-only',
-  'autodocs',
-  'test',
-  'attached-mdx',
-  'unattached-mdx',
-]);
+const BUILT_IN_TAGS_HIDE = new Set(['dev', 'autodocs', 'test', 'attached-mdx', 'unattached-mdx']);
 
 const Wrapper = styled.div({
   position: 'relative',
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index d5f3381c7841..5d326b612a38 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -29,15 +29,11 @@ import type { Link } from '../../../components/components/tooltip/TooltipLinkLis
 const BUILT_IN_TAGS = new Set([
   'dev',
   'test',
-  'dev-only',
-  'test-only',
-  'docs-only',
   'autodocs',
   'attached-mdx',
   'unattached-mdx',
   'play-fn',
   'test-fn',
-  'vitest',
   'svelte-csf',
   'svelte-csf-v4',
   'svelte-csf-v5',

From 7985f43792ddeb98d668b1e334f784279a35b116 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 10:16:50 +0200
Subject: [PATCH 127/130] Revert check icon when not hovering

---
 code/core/src/manager/components/sidebar/TagsFilterPanel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index 5d326b612a38..c728f74e6598 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -13,7 +13,6 @@ import type { Tag } from 'storybook/internal/types';
 
 import {
   BatchAcceptIcon,
-  CheckIcon,
   DeleteIcon,
   DocumentIcon,
   ShareAltIcon,
@@ -147,7 +146,7 @@ export const TagsFilterPanel = ({
               as="label"
               icon={
                 <>
-                  {checked && (excluded ? <DeleteIcon /> : <CheckIcon />)}
+                  {excluded && <DeleteIcon />}
                   <Form.Checkbox checked={checked} onChange={() => toggleTag(tag)} data-tag={tag} />
                 </>
               }

From 67dfbfbf968c1893c01390e4666232b76aa4d040 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 5 Sep 2025 11:23:47 +0200
Subject: [PATCH 128/130] Delay tooltips

---
 code/core/src/manager/components/sidebar/TagsFilterPanel.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index c728f74e6598..a11e91f298ed 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -137,6 +137,7 @@ export const TagsFilterPanel = ({
       content: (
         <TagRow>
           <WithTooltip
+            delayShow={1000}
             hasChrome={false}
             style={{ minWidth: 0, flex: 1 }}
             tooltip={<TooltipNote note={`${checked ? 'Remove' : 'Add'} tag filter: ${tag}`} />}
@@ -160,6 +161,7 @@ export const TagsFilterPanel = ({
             />
           </WithTooltip>
           <WithTooltip
+            delayShow={1000}
             hasChrome={false}
             tooltip={<TooltipNote note={`${excluded ? 'Include' : 'Exclude'} tag: ${tag}`} />}
             trigger="hover"
@@ -208,6 +210,7 @@ export const TagsFilterPanel = ({
           )}
           {hasDefaultSelection && (
             <WithTooltip
+              delayShow={1000}
               hasChrome={false}
               tooltip={<TooltipNote note="Reset to default selection" />}
               trigger="hover"

From 8b9cc2491f647be0ee5955153447a1cbb03a76e5 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Sep 2025 12:09:49 +0200
Subject: [PATCH 129/130] fix children calculation

---
 code/core/src/manager-api/modules/stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 37b1475bfb31..d0d583ce6cd8 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -494,10 +494,10 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         if (!node) {
           return results;
         }
-        if (node.type === 'story') {
+        if ('children' in node) {
+          node.children?.forEach((childId) => findChildEntriesRecursively(childId, results));
+        } else if (node.type === 'story') {
           results.push(node.id);
-        } else if ('children' in node) {
-          node.children.forEach((childId) => findChildEntriesRecursively(childId, results));
         }
         return results;
       };

From 87ddc71ab12425d5f767afbe058c4f27b83b21a0 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 5 Sep 2025 12:56:13 +0200
Subject: [PATCH 130/130] fix children calculation pt. 2

---
 code/core/src/manager-api/lib/stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 47ea02e0b525..fd5543b8ce53 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -342,7 +342,7 @@ export const transformStoryIndexToStoriesHash = (
   // Update stories to include tests as children, and increase depth for those tests
   storiesHash = Object.values(storiesHash).reduce((acc, item) => {
     if (item.type === 'story' && item.subtype === 'test') {
-      const parentStory = storiesHash[item.parent] as API_StoryEntry;
+      const parentStory = acc[item.parent] as API_StoryEntry;
       acc[item.parent] = {
         ...parentStory,
         children: (parentStory.children || []).concat(item.id).filter((id) => storiesHash[id]),