diff --git a/docs/_snippets/addon-vitest-set-project-annotations-simple.md b/docs/_snippets/addon-vitest-set-project-annotations-simple.md deleted file mode 100644 index 8691dc558d0e..000000000000 --- a/docs/_snippets/addon-vitest-set-project-annotations-simple.md +++ /dev/null @@ -1,29 +0,0 @@ -```ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts" -// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc. -import { setProjectAnnotations } from '@storybook/your-framework'; -import * as previewAnnotations from './preview'; - -const annotations = setProjectAnnotations([previewAnnotations]); -``` - -```ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts" -// Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite -import { setProjectAnnotations } from '@storybook/your-framework'; -import * as previewAnnotations from './preview'; - -const annotations = setProjectAnnotations([previewAnnotations]); -``` - -```ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts" -import { setProjectAnnotations } from '@storybook/vue3-vite'; -import * as previewAnnotations from './preview'; - -const annotations = setProjectAnnotations([previewAnnotations]); -``` - -```ts filename=".storybook/vitest.setup.ts" renderer="web-components" language="ts" -import { setProjectAnnotations } from '@storybook/web-components-vite'; -import * as previewAnnotations from './preview'; - -const annotations = setProjectAnnotations([previewAnnotations]); -``` diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx index cb9ff5eff162..acc4852c1a0d 100644 --- a/docs/writing-tests/accessibility-testing.mdx +++ b/docs/writing-tests/accessibility-testing.mdx @@ -36,7 +36,12 @@ Your Storybook will now include some features to check the accessibility of your ### Integration with Vitest addon The accessibility addon is designed to integrate with the [Vitest addon](./integrations/vitest-addon/index.mdx), so that you can [run accessibility tests](#run-accessibility-tests) alongside your component tests. -No additional configuration is needed. + +To get started, run this command, which will install and configure the Vitest addon and Vitest: + + + +The full installation instructions, including project requirements, are available in the [Vitest addon documentation](./integrations/vitest-addon/index.mdx#install-and-set-up). ## Check for violations diff --git a/docs/writing-tests/integrations/vitest-addon/index.mdx b/docs/writing-tests/integrations/vitest-addon/index.mdx index c829540edfb8..5f76c68ac4fa 100644 --- a/docs/writing-tests/integrations/vitest-addon/index.mdx +++ b/docs/writing-tests/integrations/vitest-addon/index.mdx @@ -84,8 +84,7 @@ For some project setups, the `add` command may be unable to automate the addon a 1. Make sure Vite and Vitest are configured in your project. 1. Configure Vitest to use [browser mode](https://vitest.dev/guide/browser/). 1. Install the addon, `@storybook/addon-vitest`, in your project and [register it in your Storybook configuration](../../../addons/install-addons.mdx#manual-installation). -1. Create a test setup file, `.storybook/vitest.setup.ts`. You can use the [example setup file](#example-vitest-setup) as a guide. -1. Adjust your Vitest configuration to include the plugin and reference the setup file. You can use the [example configuration files](#example-configuration-files) as a guide. +1. Adjust your Vitest configuration to include the plugin. You can use the [example configuration files](#example-configuration-files) as a guide. - For projects with existing Vitest tests, we recommend using a separate [test project](https://vitest.dev/guide/projects) if you're using Vitest ≥ 4.0 and a [workspace file](https://v3.vitest.dev/config/#workspace) if you're using Vitest 3.x to define separate configurations for your Storybook tests and other tests. You can run them in isolation or together, depending on your needs. @@ -94,18 +93,6 @@ For some project setups, the `add` command may be unable to automate the addon a When the addon is set up automatically, it will create or adjust your Vitest configuration files for you. If you're setting up manually, you can use the following examples as a reference when configuring your project. -
- Example Vitest setup file - - Storybook stories contain configuration defined in `.storybook/preview.js|ts`. To ensure that configuration is available to your tests, you can apply it in a Vitest setup file. Here's an example of how to do that: - - {/* prettier-ignore-start */} - - - - {/* prettier-ignore-end */} -
-
Example Vitest config file