Docs: Vitest plugin

docs/_snippets/addon-vitest-install.md

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

docs/_snippets/addon-vitest-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/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']}>

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

@@ -2,7 +2,7 @@
 title: 'Portable stories in Playwright CT'
 sidebar:
  title: Playwright
- order: 2
+ order: 3
 ---
 
 (⚠️ **Experimental**)

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

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

docs/writing-tests/accessibility-testing.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Accessibility tests'
 sidebar:
- order: 3
+ order: 4
  title: Accessibility tests
 ---
 

docs/writing-tests/import-stories-in-tests/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Import stories in tests
 sidebar:
- order: 7
+ order: 8
  title: Import stories in tests
 ---

docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx

@@ -2,7 +2,7 @@
 title: 'Stories in end-to-end tests'
 sidebar:
  title: End-to-end tests
- order: 1
+ order: 2
 ---
 
 Storybook seamlessly integrates with additional testing frameworks like [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/) to provide a comprehensive testing solution. By leveraging the Component Story Format (CSF), developers can write test cases that simulate user interactions and verify the behavior of individual components within the Storybook environment. This approach enables developers to thoroughly test their components' functionality, responsiveness, and visual appearance across different scenarios, resulting in more robust and reliable applications.

docs/writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx

@@ -2,7 +2,7 @@
 title: 'Stories in unit tests'
 sidebar:
  title: Unit tests
- order: 0
+ order: 1
 ---
 
 Teams test a variety of UI characteristics using different tools. Each tool requires you to replicate the same component state over and over. That’s a maintenance headache. Ideally, you’d set up your tests similarly and reuse that across tools.

docs/writing-tests/interaction-testing.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Interaction tests'
 sidebar:
- order: 4
+ order: 5
  title: Interaction tests
 ---
 

docs/writing-tests/snapshot-testing/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Snapshot testing
 sidebar:
- order: 6
+ order: 7
  title: Snapshot testing
 ---

docs/writing-tests/snapshot-testing/snapshot-testing.mdx

@@ -1,5 +1,7 @@
 ---
 title: 'Write snapshot tests'
+sidebar:
+ order: 1
 ---
 
 Snapshot tests compare the rendered markup of every story against known baselines. It’s a way to identify markup changes that trigger rendering errors and warnings.

docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx

@@ -1,5 +1,7 @@
 ---
 title: 'Storyshots migration guide'
+sidebar:
+ order: 2
 ---
 
 <Callout variant="info" style={{ marginBottom: "2rem" }}>

docs/writing-tests/test-coverage.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Test coverage'
 sidebar:
- order: 5
+ order: 6
  title: Test coverage
 ---