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']}>