Merge pull request #28924 from storybookjs/docs-addon-vitest

Docs: Vitest plugin

docs/_snippets/addon-test-install.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npx"
+npx storybook add @storybook/experimental-addon-test
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm exec storybook add @storybook/experimental-addon-test
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn exec storybook add @storybook/experimental-addon-test
+```

docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md

@@ -0,0 +1,35 @@
+```tsx filename="setupTest.ts" renderer="react" language="ts"
+import { beforeAll } from 'vitest';
+// 👇 If you're using Next.js, import from @storybook/nextjs
+//   If you're using Next.js with Vite, import from @storybook/experimental-nextjs-vite
+import { setProjectAnnotations } from '@storybook/react';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="setupTest.ts" renderer="svelte" language="ts"
+import { beforeAll } from 'vitest';
+// 👇 If you're using Sveltekit, import from @storybook/sveltekit
+import { setProjectAnnotations } from '@storybook/svelte';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="setupTest.ts" renderer="vue" language="ts"
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);
+```

docs/_snippets/portable-stories-vitest-set-project-annotations.md

@@ -1,30 +1,27 @@
 ```tsx filename="setupTest.ts" renderer="react" language="ts"
 import { beforeAll } from 'vitest';
+// 👇 If you're using Next.js, import from @storybook/nextjs
+//   If you're using Next.js with Vite, import from @storybook/experimental-nextjs-vite
 import { setProjectAnnotations } from '@storybook/react';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Run Storybook's beforeAll hook
 beforeAll(annotations.beforeAll);
 ```
 
 ```tsx filename="setupTest.ts" renderer="svelte" language="ts"
 import { beforeAll } from 'vitest';
+// 👇 If you're using Sveltekit, import from @storybook/sveltekit
 import { setProjectAnnotations } from '@storybook/svelte';
 // 👇 Import the exported annotations, if any, from the addons you're using; otherwise remove this
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Run Storybook's beforeAll hook
 beforeAll(annotations.beforeAll);
@@ -37,10 +34,7 @@ import { setProjectAnnotations } from '@storybook/vue3';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Run Storybook's beforeAll hook
 beforeAll(annotations.beforeAll);

docs/_snippets/vitest-plugin-run-tests.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm run test
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm run test
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn test
+```

docs/_snippets/vitest-plugin-vitest-config-alias.md

@@ -0,0 +1,29 @@
+```js filename=".storybook/main.js" renderer="common" tabTitle="Before"
+import { mergeConfig } from 'vite';
+
+export default {
+  // ...
+  viteFinal: async (viteConfig) => {
+    return mergeConfig(viteConfig, {
+      resolve: {
+        alias: {
+          '@components': '/src/components',
+          // ...
+        },
+      },
+    });
+  },
+};
+```
+
+```js filename="vitest.config.ts" renderer="common" tabTitle="After"
+export default defineConfig({
+  // ...
+  resolve: {
+    alias: {
+      '@components': '/src/components',
+      // ...
+    },
+  },
+});
+```

docs/_snippets/vitest-plugin-vitest-config.md

@@ -0,0 +1,118 @@
+```ts filename="vitest.config.ts" renderer="react"
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+// 👇 If you're using Next.js, apply this framework plugin as well
+// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      // storybookNextjsPlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  })
+);
+```
+
+```ts filename="vitest.config.ts" renderer="vue"
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      storybookVuePlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  })
+);
+```
+
+```ts filename="vitest.config.ts" renderer="svelte"
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+// 👇 If you're using Sveltekit, apply this framework plugin as well
+// import { storybookNextjsPlugin } from '@storybook/sveltekit/vite-plugin';
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      // storybookSveltekitPlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  })
+);
+```

docs/_snippets/vitest-plugin-vitest-workspace.md

@@ -0,0 +1,128 @@
+```ts title="vitest.workspace.ts" renderer="react"
+import { defineWorkspace } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+// 👇 If you're using Next.js, apply this framework plugin as well
+// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+
+export default defineWorkspace([
+  // This is the path to your existing Vitest config file
+  './vitest.config.ts',
+  {
+    name: 'storybook',
+    // This is the path to your existing Vite config file
+    extends: './vite.config.ts',
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      // storybookNextjsPlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+]);
+```
+
+```ts filename="vitest.config.ts" renderer="vue"
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin';
+
+import viteConfig from './vite.config';
+
+export default defineWorkspace([
+  // This is the path to your existing Vitest config file
+  './vitest.config.ts',
+  {
+    name: 'storybook',
+    // This is the path to your existing Vite config file
+    extends: './vite.config.ts',
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      storybookVuePlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+]);
+```
+
+```ts filename="vitest.config.ts" renderer="svelte"
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+// 👇 If you're using Sveltekit, apply this framework plugin as well
+// import { storybookNextjsPlugin } from '@storybook/sveltekit/vite-plugin';
+
+import viteConfig from './vite.config';
+
+export default defineWorkspace([
+  // This is the path to your existing Vitest config file
+  './vitest.config.ts',
+  {
+    name: 'storybook',
+    // This is the path to your existing Vite config file
+    extends: './vite.config.ts',
+    plugins: [
+      storybookTest({
+        // This should match your package.json script to run Storybook
+        // The --ci flag will skip prompts and not open a browser
+        storybookScript: 'yarn storybook --ci',
+      }),
+      // storybookSveltekitPlugin(),
+    ],
+    test: {
+      // Glob pattern to find story files
+      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      // Enable browser mode
+      browser: {
+        enabled: true,
+        name: 'chromium',
+        // Make sure to install Playwright
+        provider: 'playwright',
+        headless: true,
+      },
+      // Speed up tests and better match how they run in Storybook itself
+      // https://vitest.dev/config/#isolate
+      // Consider removing this if you have flaky tests
+      isolate: false,
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+]);
+```

docs/api/portable-stories/portable-stories-jest.mdx

@@ -2,7 +2,7 @@
 title: 'Portable stories in Jest'
 sidebar:
   title: Jest
-  order: 1
+  order: 2
 ---
 
 <If notRenderer={['react', 'vue']}>