Merge pull request #30035 from storybookjs/docs-sb-test-2

Docs: Updates for Storybook Test

MIGRATION.md

@@ -427,12 +427,14 @@
 
 ### Addon-a11y: Component test integration
 
-In Storybook 8.4, we introduced a new addon called [addon test](https://storybook.js.org/docs/writing-tests/test-addon). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
+In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
 
-In Storybook 8.5, we revamped the Accessibility addon (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the [addon test](https://storybook.js.org/docs/writing-tests/test-addon) installed, adjust your configuration as follows:
+In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.
+
+If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:
 
 ```diff
-// .storybook/vitest.config.ts
+// .storybook/vitest.setup.ts
 ...
 +import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
 

docs/_snippets/addon-a11y-meta-tag.md

@@ -0,0 +1,236 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular/';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="html" language="js"
+export default {
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="common" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```

docs/_snippets/vitest-plugin-install-coverage-support-packages.md

@@ -0,0 +1,23 @@
+```shell renderer="common" language="js" packageManager="npm"
+# For v8
+npm install --save-dev @vitest/coverage-v8
+
+# For istanbul
+npm install --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+# For v8
+pnpm add --save-dev @vitest/coverage-v8
+
+# For istanbul
+pnpm add --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+# For v8
+yarn add --dev @vitest/coverage-v8
+
+# For istanbul
+yarn add --dev @vitest/coverage-istanbul
+```

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

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

docs/_snippets/vitest-plugin-run-with-coverage.md

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

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

@@ -17,6 +17,8 @@ export default {
 ```
 
 ```js filename="vitest.config.ts" renderer="common" tabTitle="After"
+import { defineConfig } from 'vitest/config';
+
 export default defineConfig({
   // ...
   resolve: {

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

@@ -18,8 +18,6 @@ export default mergeConfig(
       // storybookNextJsPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -28,13 +26,9 @@ export default mergeConfig(
         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'],
     },
-  }),
+  })
 );
 ```
 
@@ -57,8 +51,6 @@ export default mergeConfig(
       storybookVuePlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -67,13 +59,9 @@ export default mergeConfig(
         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'],
     },
-  }),
+  })
 );
 ```
 
@@ -97,8 +85,6 @@ export default mergeConfig(
       // storybookSveltekitPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -107,12 +93,8 @@ export default mergeConfig(
         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'],
     },
-  }),
+  })
 );
 ```