More updates

docs/writing-tests/addon-vitest.mdx → docs/writing-tests/test-runner-with-vitest.mdx

@@ -61,10 +61,31 @@ For some project setups, the `add` command may be unable to automate the plugin
 1. Make sure Vitest is configured to use [browser mode](https://vitest.dev/guide/browser/).
 1. If you're using Next.js, make sure you're using [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs).
 1. If you're using SvelteKit, make sure you're using `@storybook/sveltekit/vite`.
-1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `storybook.setup.ts`, in the root of your project.
-1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. Here's an example:
+1. Create a [test setup file](../api/portable-stories/portable-stories-vitest.mdx#setprojectannotations), `.storybook/vitest.setup.ts`.
+1. Adjust your Vitest configuration to include the plugin(s) and reference the setup file. You can reference examples, below.
+
+### Example configuration files
+
+Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
+
+<details>
+  <summary>Example Vitest setup file</summary>
+
+```ts title=".storybook/vitest.setup.ts"
+import { beforeAll } from 'vitest';
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, svelte, etc.)
+import { setProjectAnnotations } from '@storybook/your-renderer';
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations(projectAnnotations);
+
+beforeAll(project.beforeAll);
+```
+</details>
+
+<details>
+  <summary>Example Vitest config file</summary>
 
-{/* TODO: Nextjs & SvelteKit examples */}
 ```ts title="vitest.config.ts"
 import { defineConfig, mergeConfig } from 'vitest/config'
 import viteConfig from '../vite.config'
@@ -88,35 +109,10 @@ export default mergeConfig(
       provider: 'playwright',
       headless: true,
     },
-    setupFiles: ['./storybook.setup.ts'],
-  })
-)
-```
-
-### Example configuration files
-
-Here are configuration files generated by the `add` command. You can use these as a reference when setting up your project.
-
-<details>
-  <summary>Example Vitest setup file</summary>
-
-```ts title="storybook.setup.ts"
-TK
-```
-</details>
-
-<details>
-  <summary>Example Vitest config file</summary>
-
-```ts title="vitest.config.ts"
-import { defineConfig, mergeConfig } from 'vitest/config'
-import viteConfig from '../vite.config'
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
-
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    // ... TK
+    // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
+    // Consider removing this, if you have flaky tests.
+    isolate: false,
+    setupFiles: ['./.storybook/vitest.setup.ts'],
   })
 )
 ```
@@ -150,7 +146,10 @@ export default defineWorkspace([
       provider: 'playwright',
       headless: true,
     },
-    setupFiles: ['./storybook.setup.ts'],
+    // Disabling isolation is faster and similar to how tests are isolated in Storybook itself.
+    // Consider removing this, if you have flaky tests.
+    isolate: false,
+    setupFiles: ['./.storybook/vitest.setup.ts'],
   }
 ])
 ```