Merge pull request #33061 from storybookjs/docs-test-runner-migration

Docs: Add migration guide for test-runner -> Vitest addon

Author: kylegach

docs/api/csf/csf-next.mdx

@@ -404,7 +404,7 @@ All of the story properties are now contained within a new property called `comp
 
 **4. Update your Vitest setup file**
 
-If you're using [Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon.mdx), you can remove your Vitest setup file (`.storybook/vitest.setup.ts`).
+If you're using [Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon/index.mdx), you can remove your Vitest setup file (`.storybook/vitest.setup.ts`).
 
 If you are using [portable stories in Vitest](../portable-stories/portable-stories-vitest.mdx), you may use a Vitest setup file to configure your stories. This file must be updated to use the new CSF Next format.
 
@@ -431,7 +431,7 @@ import { setProjectAnnotations } from '@storybook/your-framework';
 
 **5. Reusing stories in test files**
 
-[Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon.mdx) allows you to test your components directly inside Storybook. All the stories are automatically turned into Vitest tests, making integration seamless in your testing suite.
+[Storybook's Vitest addon](../../writing-tests/integrations/vitest-addon/index.mdx) allows you to test your components directly inside Storybook. All the stories are automatically turned into Vitest tests, making integration seamless in your testing suite.
 
 If you cannot use Storybook Test, you can still reuse the stories in your test files using [portable stories](../portable-stories/portable-stories-vitest.mdx). In prior story formats, you had to compose the stories before rendering them in your test files. With CSF Next, you can now reuse the stories directly.
 

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

@@ -27,7 +27,7 @@ sidebar:
 
 <If renderer={['react', 'vue', 'svelte']}>
   <Callout variant="warning">
-    Storybook now recommends testing your stories in Vitest with the [Vitest addon](../../writing-tests/integrations/vitest-addon.mdx), which automatically transforms stories into real Vitest tests (using this API under the hood).
+    Storybook now recommends testing your stories in Vitest with the [Vitest addon](../../writing-tests/integrations/vitest-addon/index.mdx), which automatically transforms stories into real Vitest tests (using this API under the hood).
 
     This API is still available for those who prefer to use portable stories directly, but we recommend using the Vitest addon for a more streamlined testing experience.
   </Callout>

docs/configure/telemetry.mdx

@@ -42,7 +42,7 @@ Specifically, we track the following information in our telemetry events:
   * Testing tools (e.g. [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Playwright](https://playwright.dev/)).
 * Package manager information (e.g., `npm`, `yarn`).
 * Monorepo information (e.g., [NX](https://nx.dev/), [Turborepo](https://turborepo.org/)).
-* In-app events (e.g., [Storybook guided tour](https://github.com/storybookjs/addon-onboarding), [UI test run](../writing-tests/integrations/vitest-addon.mdx#storybook-ui)).
+* In-app events (e.g., [Storybook guided tour](https://github.com/storybookjs/addon-onboarding), [UI test run](../writing-tests/integrations/vitest-addon/index.mdx#storybook-ui)).
 
 Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
 

docs/get-started/frameworks/nextjs-vite.mdx

@@ -19,7 +19,7 @@ This Vite-based framework offers several advantages over the Webpack-based [`@st
 
 * ⚡ **Faster builds** - Vite's build system is significantly faster than Webpack
 * 🔧 **Modern tooling** - Uses the latest build tools and optimizations
-* 🧪 **Better test support** - Full support for the [Vitest addon](../../writing-tests/integrations/vitest-addon.mdx) and other testing features
+* 🧪 **Better test support** - Full support for the [Vitest addon](../../writing-tests/integrations/vitest-addon/index.mdx) and other testing features
 * 📦 **Simpler configuration** - No need for Babel or complex Webpack configurations
 * 🎯 **Better development experience** - Faster HMR (Hot Module Replacement) and dev server startup
 
@@ -792,7 +792,7 @@ You can refer to the [Install `sharp` to Use Built-In Image Optimization](https:
 We recommend using `@storybook/nextjs-vite` (this framework) for most projects because it offers:
 
 * Faster builds and development server startup
-* Better support for modern testing features like the [Vitest addon](../../writing-tests/integrations/vitest-addon.mdx)
+* Better support for modern testing features like the [Vitest addon](../../writing-tests/integrations/vitest-addon/index.mdx)
 * Simpler configuration without Babel
 * Better developer experience with faster HMR
 

docs/get-started/install.mdx

@@ -103,7 +103,7 @@ If you're experienced with Storybook, you can skip the onboarding to get a minim
 
 Storybook will ask what type of configuration you want to install:
 
-* **Recommended**: Includes component development, [documentation](../writing-docs/autodocs.mdx), [testing](../writing-tests/integrations/vitest-addon.mdx), and [accessibility](../writing-tests/accessibility-testing.mdx) features
+* **Recommended**: Includes component development, [documentation](../writing-docs/autodocs.mdx), [testing](../writing-tests/integrations/vitest-addon/index.mdx), and [accessibility](../writing-tests/accessibility-testing.mdx) features
 * **Minimal**: Just the essentials for component development
 
 You can also manually select these features using the `--features` flag. For example:

docs/releases/migration-guide-from-older-version.mdx

@@ -157,7 +157,7 @@ In addition to the automigrations and manual migrations above, there are also op
 
 ### `test-runner` to `addon-vitest`
 
-`addon-vitest` and the rest of the [Storybook Test experience](https://storybook.js.org/blog/storybook-test-sneak-peek/) is designed to supercede the `test-runner`. It's faster and provides a better experience for writing and running tests. If your project uses React, Vue, or Svelte and is built with Vite, you should consider migrating to `addon-vitest`, by following the [installation instructions](../writing-tests/integrations/vitest-addon.mdx#automatic-setup).
+`addon-vitest` and the rest of the [Storybook Test experience](https://storybook.js.org/blog/storybook-test-sneak-peek/) is designed to supercede the `test-runner`. It's faster and provides a better experience for writing and running tests. If your project uses React, Vue, or Svelte and is built with Vite, you should consider migrating to `addon-vitest`, by following the [installation instructions](../writing-tests/integrations/vitest-addon/index.mdx#automatic-setup).
 
 ### CSF 2 to CSF 3
 

docs/releases/migration-guide.mdx

@@ -97,4 +97,4 @@ In addition to the automigrations and manual migrations above, there are also op
 
 ### `test-runner` to `addon-vitest`
 
-`addon-vitest` and the rest of the [Storybook Test experience](https://storybook.js.org/blog/storybook-test-sneak-peek/) is designed to supercede the `test-runner`. It's faster and provides a better experience for writing and running tests. If your project uses React, Vue, or Svelte and is built with Vite, you should consider migrating to `addon-vitest`, by following the [installation instructions](../writing-tests/integrations/vitest-addon.mdx#automatic-setup).
+`addon-vitest` and the rest of the [Storybook Test experience](https://storybook.js.org/blog/storybook-test-sneak-peek/) is designed to supercede the `test-runner`. It's faster and provides a better experience for writing and running tests. If your project uses React, Vue, or Svelte and is built with Vite, you should consider migrating to `addon-vitest`, by following the [installation instructions](../writing-tests/integrations/vitest-addon/index.mdx#automatic-setup).

docs/writing-stories/tags.mdx

@@ -14,7 +14,7 @@ The following tags are available in every Storybook project:
 | Tag        | Applied by default? | Description                                                                                                                                                                                                                                             |
 | ---------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `dev`      | Yes                 | Stories tagged with `dev` are rendered in Storybook's sidebar.                                                                                                                                                                                          |
-| `test`     | Yes                 | Stories tagged with `test` are included in [test runner](../writing-tests/integrations/test-runner.mdx#run-tests-for-a-subset-of-stories) or [Vitest addon](../writing-tests/integrations/vitest-addon.mdx#including-excluding-or-skipping-tests) runs. |
+| `test`     | Yes                 | Stories tagged with `test` are included in [test runner](../writing-tests/integrations/test-runner.mdx#run-tests-for-a-subset-of-stories) or [Vitest addon](../writing-tests/integrations/vitest-addon/index.mdx#including-excluding-or-skipping-tests) runs. |
 | `autodocs` | No                  | Stories tagged with `autodocs` are included in the [docs page](../writing-docs/autodocs.mdx). If a CSF file does not contain at least one story tagged with `autodocs`, that component will not generate a docs page.                                   |
 | `play-fn`  | No                  | Applied automatically to stories with a [play function](./play-function.mdx) defined.                                                                                                                                                                   |
 | `test-fn`  | No                  | Applied automatically to tests defined using the [experimental `.test` method on CSF Factories](https://github.com/storybookjs/storybook/discussions/30119).                                                                                            |

docs/writing-tests/accessibility-testing.mdx

@@ -35,7 +35,7 @@ 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.mdx), so that you can [run accessibility tests](#run-accessibility-tests) alongside your component tests.
+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.
 
 **Automatic configuration:**
 
@@ -147,7 +147,7 @@ You can also enable, disable, or configure individual rules. This can be done in
 
 ### Test behavior
 
-You can configure accessibility tests with the `parameters.a11y.test` [parameter](../writing-stories/parameters.mdx), which determines the behavior of accessibility tests for a story when run with either the [Vitest addon](./integrations/vitest-addon.mdx) or the [test-runner](./integrations/test-runner.mdx). The parameter accepts three values:
+You can configure accessibility tests with the `parameters.a11y.test` [parameter](../writing-stories/parameters.mdx), which determines the behavior of accessibility tests for a story when run with either the [Vitest addon](./integrations/vitest-addon/index.mdx) or the [test-runner](./integrations/test-runner.mdx). The parameter accepts three values:
 
 | Value     | Description                                                                              |
 | --------- | ---------------------------------------------------------------------------------------- |
@@ -197,10 +197,10 @@ When you disable automated accessibility checks, the addon will not run any test
 
 ### With the Vitest addon
 
-If you're using the [Vitest addon](./integrations/vitest-addon.mdx), you can run your accessibility tests, as part of component tests, in these ways:
+If you're using the [Vitest addon](./integrations/vitest-addon/index.mdx), you can run your accessibility tests, as part of component tests, in these ways:
 
-- [In the Storybook UI](./integrations/vitest-addon.mdx#storybook-ui)
-- [In CI environments](./integrations/vitest-addon.mdx#in-ci)
+- [In the Storybook UI](./integrations/vitest-addon/index.mdx#storybook-ui)
+- [In CI environments](./integrations/vitest-addon/index.mdx#in-ci)
 
 To run accessibility tests in the Storybook UI, first expand the testing widget in the sidebar and check the Accessibility checkbox. Now, when you press the Run component tests button, the accessibility tests will be run along with any other tests you have configured.
 
@@ -267,7 +267,7 @@ Browser-based accessibility tests, like those found in Storybook, evaluate the r
 
 ### Why are my tests failing in different environments?
 
-With the [Vitest addon](./integrations/vitest-addon.mdx), your tests run in Vitest using your project's configuration with Playwright's Chromium browser. This can lead to inconsistent test results reported in the Storybook UI or CLI. The inconsistency can be due to `axe-core` reporting different results in different environments, such as browser versions or configurations. If you encounter this issue, we recommend reaching out using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help), [Github issues](https://github.com/storybookjs/storybook/issues/new?template=bug_report.yml)).
+With the [Vitest addon](./integrations/vitest-addon/index.mdx), your tests run in Vitest using your project's configuration with Playwright's Chromium browser. This can lead to inconsistent test results reported in the Storybook UI or CLI. The inconsistency can be due to `axe-core` reporting different results in different environments, such as browser versions or configurations. If you encounter this issue, we recommend reaching out using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help), [Github issues](https://github.com/storybookjs/storybook/issues/new?template=bug_report.yml)).
 
 ### The addon panel does not show expected violations
 
@@ -281,7 +281,7 @@ To enable this feature flag, add the following configuration to your `.storybook
 
 **More testing resources**
 
-* [Vitest addon](./integrations/vitest-addon.mdx) for running tests in Storybook
+* [Vitest addon](./integrations/vitest-addon/index.mdx) for running tests in Storybook
 * [Interaction testing](./interaction-testing.mdx) for user behavior simulation
 * [Visual testing](./visual-testing.mdx) for appearance
 * [Snapshot testing](./snapshot-testing.mdx) for rendering errors and warnings

docs/writing-tests/in-ci.mdx

@@ -6,7 +6,7 @@ sidebar:
   title: In CI
 ---
 
-The [Vitest addon](./integrations/vitest-addon.mdx) is great for automating your UI tests within Storybook. To have full confidence in your work, backed by tests, you need to run those automated tests in your continuous integration (CI) environment.
+The [Vitest addon](./integrations/vitest-addon/index.mdx) is great for automating your UI tests within Storybook. To have full confidence in your work, backed by tests, you need to run those automated tests in your continuous integration (CI) environment.
 
 Thankfully, that’s quite easy!
 
@@ -329,7 +329,7 @@ jobs:
 +         SB_URL: '${{ github.event.deployment_status.environment_url }}'
 ```
 
-Finally, we update the plugin configuration to use that environment variable in the [`storybookUrl` plugin option](./integrations/vitest-addon.mdx#storybookurl).
+Finally, we update the plugin configuration to use that environment variable in the [`storybookUrl` plugin option](./integrations/vitest-addon/index.mdx#storybookurl).
 
 {/* prettier-ignore-start */}
 
@@ -447,7 +447,7 @@ The workflow would then look like:
 
 **More testing resources**
 
-* [Vitest addon](./integrations/vitest-addon.mdx) for running tests in Storybook
+* [Vitest addon](./integrations/vitest-addon/index.mdx) for running tests in Storybook
 * [Interaction testing](./interaction-testing.mdx) for user behavior simulation
 * [Accessibility testing](./accessibility-testing.mdx) for accessibility
 * [Visual testing](./visual-testing.mdx) for appearance