Addon Test: Refactor test addon to include stories automatically

code/.storybook/vitest.config.ts

@@ -34,20 +34,15 @@ export default mergeConfig(
     ],
     test: {
       name: 'storybook-ui',
-      include: [
-        '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        // '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-      ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
         '../**/__mockdata__/**',
         // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
         '**/Zoom.stories.tsx',
+        // @yannbf what's wrong with these stories, that they do not work
+        '**/lib/blocks/src/**',
       ],
       // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
       // @ts-expect-error this type does not exist but the property does!

code/addons/test/src/postinstall.ts

@@ -336,8 +336,6 @@ export default async function postInstall(options: PostinstallOptions) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
     const extension = extname(rootConfig);
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
-    // to be set in vitest config
-    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -355,6 +353,7 @@ export default async function postInstall(options: PostinstallOptions) {
           {
             extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
             plugins: [
+              // The plugin will run tests in the stories defined in your Storybook config 
               // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
               storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
             ],
@@ -366,9 +365,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 name: 'chromium',
                 provider: 'playwright',
               },
-              // Make sure to adjust this pattern to match your stories files.
-              include: ['**/*.stories.?(m)[jt]s?(x)'],
-              setupFiles: ['${vitestSetupFilePath}'],
+              setupFiles: ['./.storybook/vitest.setup.ts'],
             },
           },
         ]);
@@ -393,6 +390,7 @@ export default async function postInstall(options: PostinstallOptions) {
         // More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
         export default defineConfig({
           plugins: [
+            // The plugin will run tests in the stories defined in your Storybook config 
             // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
             storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
           ],
@@ -404,8 +402,6 @@ export default async function postInstall(options: PostinstallOptions) {
               name: 'chromium',
               provider: 'playwright',
             },
-            // Make sure to adjust this pattern to match your stories files.
-            include: ['**/*.stories.?(m)[jt]s?(x)'],
             setupFiles: ['${vitestSetupFilePath}'],
           },
         });

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

@@ -4,11 +4,13 @@ import type { Plugin } from 'vitest/config';
 import {
   getInterpretedFile,
   loadAllPresets,
+  normalizeStories,
   validateConfigurationFiles,
 } from 'storybook/internal/common';
+import { StoryIndexGenerator } from 'storybook/internal/core-server';
 import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
-import type { StoriesEntry } from 'storybook/internal/types';
+import type { DocsOptions, StoriesEntry } from 'storybook/internal/types';
 
 import { join, resolve } from 'pathe';
 
@@ -20,6 +22,39 @@ const defaultOptions: UserOptions = {
   storybookUrl: 'http://localhost:6006',
 };
 
+async function extractStorybookData(finalOptions: InternalOptions) {
+  const configDir = finalOptions.configDir;
+  try {
+    await validateConfigurationFiles(configDir);
+  } catch (err) {
+    throw new MainFileMissingError({
+      location: configDir,
+      source: 'vitest',
+    });
+  }
+  const previewLevelTags = await extractTagsFromPreview(configDir);
+
+  const presets = await loadAllPresets({
+    configDir,
+    corePresets: [],
+    overridePresets: [],
+    packageJson: {},
+  });
+  const stories = await presets.apply('stories', []);
+
+  const normalizedStories = normalizeStories(stories, {
+    configDir: finalOptions.configDir,
+    workingDir: process.cwd(),
+  });
+
+  const storiesGlobs = normalizedStories.map((entry) => `${entry.directory}/${entry.files}`);
+  // To discuss: Do we want to filter out mdx files?
+  // The vitest plugin ignores mdx files, but perhaps it might still give side effects based on user's config
+  // However if we do filter out mdx, how do we do it without affecting things like ./*.stories.@(js|jsx|ts|mdx|tsx)?
+  // .filter((entry) => !entry.includes('mdx'));
+  return { previewLevelTags, stories, storiesGlobs };
+}
+
 const extractTagsFromPreview = async (configDir: string) => {
   const previewConfigPath = getInterpretedFile(join(resolve(configDir), 'preview'));
 
@@ -51,15 +86,14 @@ export const storybookTest = (options?: UserOptions): Plugin => {
   process.env.__STORYBOOK_URL__ = storybookUrl;
   process.env.__STORYBOOK_SCRIPT__ = finalOptions.storybookScript;
 
-  let stories: StoriesEntry[];
-
   if (!finalOptions.configDir) {
     finalOptions.configDir = resolve(join(process.cwd(), '.storybook'));
   } else {
     finalOptions.configDir = resolve(process.cwd(), finalOptions.configDir);
   }
 
   let previewLevelTags: string[];
+  let storiesGlobs: StoriesEntry[];
 
   return {
     name: 'vite-plugin-storybook-test',
@@ -82,7 +116,29 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         packageJson: {},
       });
 
-      stories = await presets.apply('stories', []);
+      const workingDir = process.cwd();
+      const directories = {
+        configDir,
+        workingDir,
+      };
+      storiesGlobs = await presets.apply('stories');
+      const indexers = await presets.apply('experimental_indexers', []);
+      const docsOptions = await presets.apply<DocsOptions>('docs', {});
+      const normalizedStories = normalizeStories(await storiesGlobs, directories);
+
+      const generator = new StoryIndexGenerator(normalizedStories, {
+        ...directories,
+        indexers: indexers,
+        docs: docsOptions,
+        workingDir,
+      });
+
+      await generator.initialize();
+
+      const storyFiles = generator.storyFileNames();
+
+      // console.log({ storyFiles });
+
       previewLevelTags = await extractTagsFromPreview(configDir);
 
       const framework = await presets.apply('framework', undefined);
@@ -94,6 +150,14 @@ export const storybookTest = (options?: UserOptions): Plugin => {
       // )
       config.test ??= {};
 
+      config.test.include ??= [];
+      config.test.include.push(...storyFiles);
+
+      config.test.exclude ??= [];
+      config.test.exclude.push('**/*.mdx');
+
+      // console.log(config.test);
+
       config.test.env ??= {};
       config.test.env = {
         ...config.test.env,
@@ -169,7 +233,7 @@ export const storybookTest = (options?: UserOptions): Plugin => {
           fileName: id,
           configDir: finalOptions.configDir,
           tagsFilter: finalOptions.tags,
-          stories,
+          stories: storiesGlobs,
           previewLevelTags,
         });
       }

code/core/src/core-server/index.ts

@@ -6,3 +6,4 @@ export * from './build-static';
 export * from './build-dev';
 export * from './withTelemetry';
 export { default as build } from './standalone';
+export { StoryIndexGenerator } from './utils/StoryIndexGenerator';