Skip to content

Commit

Permalink
More updates
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Aug 26, 2024
1 parent 89be6a0 commit 877e4a3
Showing 1 changed file with 32 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'],
})
)
```
Expand Down Expand Up @@ -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'],
}
])
```
Expand Down

0 comments on commit 877e4a3

Please sign in to comment.