Merge pull request #28920 from storybookjs/kasper/vitest-add

Vitest: Implement add command for vitest addon

code/addons/vitest/package.json

@@ -75,6 +75,9 @@
   },
   "devDependencies": {
     "@vitest/browser": "^2.0.0",
+    "find-up": "^7.0.0",
+    "tinyrainbow": "^1.2.0",
+    "ts-dedent": "^2.2.0",
     "vitest": "^2.0.0"
   },
   "peerDependencies": {

code/addons/vitest/src/postinstall.ts

@@ -1,3 +1,254 @@
-export default async function postinstall(context: any) {
-  console.log('[addon-vitest] postinstall with', context);
+import { existsSync } from 'node:fs';
+import * as fs from 'node:fs/promises';
+import { writeFile } from 'node:fs/promises';
+import { dirname, join, relative, resolve } from 'node:path';
+import * as path from 'node:path';
+
+import {
+  JsPackageManagerFactory,
+  extractProperFrameworkName,
+  loadAllPresets,
+  loadMainConfig,
+  validateFrameworkName,
+} from 'storybook/internal/common';
+import { logger } from 'storybook/internal/node-logger';
+
+import { findUp } from 'find-up';
+import c from 'tinyrainbow';
+import dedent from 'ts-dedent';
+
+import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
+
+const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];
+
+export default async function postInstall(options: PostinstallOptions) {
+  const packageManager = JsPackageManagerFactory.getPackageManager({
+    force: options.packageManager,
+  });
+
+  const info = await getFrameworkInfo(options);
+
+  if (
+    info.frameworkPackageName !== '@storybook/nextjs' &&
+    info.builderPackageName !== '@storybook/builder-vite'
+  ) {
+    logger.info(
+      'The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.'
+    );
+    return;
+  }
+
+  const annotationsImport = [
+    '@storybook/nextjs',
+    '@storybook/experimental-nextjs-vite',
+    '@storybook/sveltekit',
+  ].includes(info.frameworkPackageName)
+    ? info.frameworkPackageName
+    : info.rendererPackageName &&
+        ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
+          info.rendererPackageName
+        )
+      ? info.rendererPackageName
+      : null;
+
+  if (!annotationsImport) {
+    logger.info('The Vitest addon cannot yet be used with: ' + info.frameworkPackageName);
+    return;
+  }
+
+  const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
+
+  const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest'];
+
+  logger.info(
+    dedent`
+      We detected that you're using Next.js. 
+      We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+    `
+  );
+
+  if (info.frameworkPackageName === '@storybook/nextjs') {
+    packages.push('vite-plugin-storybook-nextjs@latest');
+  }
+  logger.info(c.bold('Installing packages...'));
+  logger.info(packages.join(', '));
+  await packageManager.addDependencies({ installAsDevDependencies: true }, packages);
+
+  logger.info(c.bold('Executing npx playwright install chromium --with-deps ...'));
+  await packageManager.executeCommand({
+    command: 'npx',
+    args: ['playwright', 'install', 'chromium', '--with-deps'],
+  });
+
+  logger.info(c.bold('Writing .storybook/vitest.setup.ts file...'));
+
+  const previewExists = extensions
+    .map((ext) => path.resolve(path.join(options.configDir, `preview${ext}`)))
+    .some((config) => existsSync(config));
+
+  await writeFile(
+    resolve(options.configDir, 'vitest.setup.ts'),
+    dedent`
+      import { beforeAll } from 'vitest'
+      import { setProjectAnnotations } from '${annotationsImport}'
+      ${previewExists ? `import * as projectAnnotations from './preview'` : ''}
+      
+      const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'})
+      
+      beforeAll(project.beforeAll)
+    `
+  );
+
+  const configFiles = extensions.map((ext) => 'vitest.config' + ext);
+
+  const rootConfig = await findUp(configFiles, {
+    cwd: process.cwd(),
+  });
+
+  if (rootConfig) {
+    const extname = rootConfig ? path.extname(rootConfig) : '.ts';
+    const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`);
+    if (existsSync(browserWorkspaceFile)) {
+      logger.info(
+        dedent`
+          We can not automatically setup the plugin when you use Vitest with workspaces.
+          Please refer to the documentation to complete the setup manually:
+          https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#manual
+        `
+      );
+    } else {
+      logger.info(c.bold('Writing vitest.workspace.ts file...'));
+      await writeFile(
+        browserWorkspaceFile,
+        dedent`
+        import { defineWorkspace } from 'vitest/config';
+        import { storybookTest } from '@storybook/experimental-addon-vitest/plugin';
+        ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
+        export default defineWorkspace([
+          '${relative(dirname(browserWorkspaceFile), rootConfig)}',
+          {
+            plugins: [
+              storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+            ],
+            test: {
+              include: ['**/*.stories.?(m)[jt]s?(x)'],
+              browser: {
+                enabled: true,
+                name: 'chromium',
+                provider: 'playwright',
+                headless: true,
+              },
+              // Disabling isolation is faster and is similar to how tests are isolated in storybook itself.
+              // Consider removing this if you are seeing problems with your tests.
+              isolate: false,
+              setupFiles: ['./.storybook/vitest.setup.ts'],
+            },
+          },
+        ]);
+      `
+      );
+    }
+  } else {
+    logger.info(c.bold('Writing vitest.config.ts file...'));
+    await writeFile(
+      resolve('vitest.config.ts'),
+      dedent`
+      import { defineConfig } from "vitest/config";
+      import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+      ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
+      export default defineConfig({
+        plugins: [
+          storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+        ],
+        test: {
+          include: ['**/*.stories.?(m)[jt]s?(x)'],
+          browser: {
+            enabled: true,
+            name: 'chromium',
+            provider: 'playwright',
+            headless: true,
+          },
+          // Disabling isolation is faster and is similar to how tests are isolated in storybook itself.
+          // Consider removing this, if you have flaky tests.
+          isolate: false,
+          setupFiles: ['./.storybook/vitest.setup.ts'],
+        },
+      });
+    `
+    );
+  }
+
+  logger.info(
+    dedent`
+      The Vitest addon is now configured and you're ready to run your tests! 
+      Check the documentation for more information about its features and options at:
+      https://storybook.js.org/docs/writing-tests/test-runner-with-vitest
+    `
+  );
+}
+
+const getVitestPluginInfo = (framework: string) => {
+  let frameworkPluginImport = '';
+  let frameworkPluginCall = '';
+
+  if (framework === '@storybook/nextjs') {
+    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
+    frameworkPluginCall = 'vitePluginNext()';
+  }
+
+  if (framework === '@storybook/sveltekit') {
+    frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'";
+    frameworkPluginCall = 'storybookSveltekitPlugin()';
+  }
+
+  return { frameworkPluginImport, frameworkPluginCall };
+};
+
+async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
+  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
+  const packageJson = await packageManager.retrievePackageJson();
+
+  const config = await loadMainConfig({ configDir, noCache: true });
+  const { framework } = config;
+
+  const frameworkName = typeof framework === 'string' ? framework : framework?.name;
+  validateFrameworkName(frameworkName);
+  const frameworkPackageName = extractProperFrameworkName(frameworkName);
+
+  console.log(configDir);
+  const presets = await loadAllPresets({
+    corePresets: [join(frameworkName, 'preset')],
+    overridePresets: [
+      require.resolve('@storybook/core/core-server/presets/common-override-preset'),
+    ],
+    configDir,
+    packageJson,
+    isCritical: true,
+  });
+
+  const core = await presets.apply('core', {});
+
+  const { builder, renderer } = core;
+
+  if (!builder) {
+    throw new Error('Could not detect your Storybook builder.');
+  }
+
+  const builderPackageJson = await fs.readFile(
+    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    'utf8'
+  );
+  const builderPackageName = JSON.parse(builderPackageJson).name;
+
+  let rendererPackageName: string | undefined;
+  if (renderer) {
+    const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
+    rendererPackageName = JSON.parse(rendererPackageJson).name;
+  }
+
+  return {
+    frameworkPackageName,
+    builderPackageName,
+    rendererPackageName,
+  };
 }

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

@@ -165,8 +165,12 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
             name: story.name,
             tags: story.tags,
             showMain: () => {},
-            showError: (error) => {},
-            showException: (error) => {},
+            showError: (error): void => {
+              throw new Error(`${error.title}\n${error.description}`);
+            },
+            showException: (error): void => {
+              throw error;
+            },
             forceRemount: true,
             storyContext: context,
             storyFn: () => story.unboundStoryFn(context),

code/lib/cli-storybook/src/add.test.ts

@@ -144,6 +144,7 @@ describe('add (extra)', () => {
 
     expect(MockedPostInstall.postinstallAddon).toHaveBeenCalledWith('@storybook/addon-docs', {
       packageManager: 'npm',
+      configDir: '.storybook',
     });
   });
 });

code/lib/cli-storybook/src/add.ts

@@ -17,6 +17,7 @@ import { postinstallAddon } from './postinstallAddon';
 
 export interface PostinstallOptions {
   packageManager: PackageManagerName;
+  configDir: string;
 }
 
 /**
@@ -139,7 +140,7 @@ export async function add(
   await writeConfig(main);
 
   if (!skipPostinstall && isCoreAddon(addonName)) {
-    await postinstallAddon(addonName, { packageManager: packageManager.type });
+    await postinstallAddon(addonName, { packageManager: packageManager.type, configDir });
   }
 }
 function isValidVersion(version: string) {

code/yarn.lock

@@ -6132,6 +6132,9 @@ __metadata:
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@vitest/browser": "npm:^2.0.0"
+    find-up: "npm:^7.0.0"
+    tinyrainbow: "npm:^1.2.0"
+    ts-dedent: "npm:^2.2.0"
     vitest: "npm:^2.0.0"
   peerDependencies:
     "@vitest/browser": ^2.0.0