Skip to content

Commit 230f1b8

Browse files
yannbfyannbf
committed
Merge pull request #32843 from storybookjs/docs_adjust_vitest_addon
Docs: Vitest plugin adjustments (cherry picked from commit ee7ce39)
1 parent 50f9a88 commit 230f1b8

File tree

8 files changed

+413
-53
lines changed

8 files changed

+413
-53
lines changed

‎docs/_snippets/addon-vitest-set-project-annotations-simple.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
1-
```tsx filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
1+
```ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
22
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
33
import { setProjectAnnotations } from '@storybook/your-framework';
44
import * as previewAnnotations from './preview';
55

66
const annotations = setProjectAnnotations([previewAnnotations]);
77
```
88

9-
```tsx filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
9+
```ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
1010
// Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
1111
import { setProjectAnnotations } from '@storybook/your-framework';
1212
import * as previewAnnotations from './preview';
1313

1414
const annotations = setProjectAnnotations([previewAnnotations]);
1515
```
1616

17-
```tsx filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
17+
```ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
1818
import { setProjectAnnotations } from '@storybook/vue3-vite';
1919
import * as previewAnnotations from './preview';
2020

2121
const annotations = setProjectAnnotations([previewAnnotations]);
2222
```
23+
24+
```ts filename=".storybook/vitest.setup.ts" renderer="web-components" language="ts"
25+
import { setProjectAnnotations } from '@storybook/web-components-vite';
26+
import * as previewAnnotations from './preview';
27+
28+
const annotations = setProjectAnnotations([previewAnnotations]);
29+
```

‎docs/_snippets/vitest-plugin-vitest-config.md‎

Lines changed: 261 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
```ts filename="vitest.config.ts" renderer="react"
1+
```ts filename="vitest.config.ts" renderer="react" tabTitle="Vitest 4"
22
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
3+
import { playwright } from '@vitest/browser-playwright';
4+
35
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
6+
47
import path from 'node:path';
58
import { fileURLToPath } from 'node:url';
69

@@ -22,8 +25,56 @@ export default mergeConfig(
2225
// The location of your Storybook config, main.js|ts
2326
configDir: path.join(dirname, '.storybook'),
2427
// This should match your package.json script to run Storybook
25-
// The --ci flag will skip prompts and not open a browser
26-
storybookScript: 'yarn storybook --ci',
28+
// The --no-open flag will skip the automatic opening of a browser
29+
storybookScript: 'yarn storybook --no-open',
30+
}),
31+
],
32+
test: {
33+
name: 'storybook',
34+
// Enable browser mode
35+
browser: {
36+
enabled: true,
37+
// Make sure to install Playwright
38+
provider: playwright({}),
39+
headless: true,
40+
instances: [{ browser: 'chromium' }],
41+
},
42+
setupFiles: ['./.storybook/vitest.setup.ts'],
43+
},
44+
}),
45+
],
46+
},
47+
}),
48+
);
49+
```
50+
51+
```ts filename="vitest.config.ts" renderer="react" tabTitle="Vitest 3"
52+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
53+
54+
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
55+
56+
import path from 'node:path';
57+
import { fileURLToPath } from 'node:url';
58+
59+
const dirname = path.dirname(fileURLToPath(import.meta.url));
60+
61+
import viteConfig from './vite.config';
62+
63+
export default mergeConfig(
64+
viteConfig,
65+
defineConfig({
66+
test: {
67+
// Use `workspace` field in Vitest < 3.2
68+
projects: [
69+
defineProject({
70+
extends: true,
71+
plugins: [
72+
storybookTest({
73+
// The location of your Storybook config, main.js|ts
74+
configDir: path.join(dirname, '.storybook'),
75+
// This should match your package.json script to run Storybook
76+
// The --no-open flag will skip the automatic opening of a browser
77+
storybookScript: 'yarn storybook --no-open',
2778
}),
2879
],
2980
test: {
@@ -45,9 +96,60 @@ export default mergeConfig(
4596
);
4697
```
4798

48-
```ts filename="vitest.config.ts" renderer="vue"
49-
import { defineConfig, mergeConfig, defineProject } from 'vitest/config';
99+
```ts filename="vitest.config.ts" renderer="vue" tabTitle="Vitest 4"
100+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
101+
import { playwright } from '@vitest/browser-playwright';
102+
103+
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
104+
105+
import path from 'node:path';
106+
import { fileURLToPath } from 'node:url';
107+
108+
const dirname = path.dirname(fileURLToPath(import.meta.url));
109+
110+
import viteConfig from './vite.config';
111+
112+
export default mergeConfig(
113+
viteConfig,
114+
defineConfig({
115+
test: {
116+
// Use `workspace` field in Vitest < 3.2
117+
projects: [
118+
defineProject({
119+
extends: true,
120+
plugins: [
121+
storybookTest({
122+
// The location of your Storybook config, main.js|ts
123+
configDir: path.join(dirname, '.storybook'),
124+
// This should match your package.json script to run Storybook
125+
// The --no-open flag will skip the automatic opening of a browser
126+
storybookScript: 'yarn storybook --no-open',
127+
}),
128+
],
129+
test: {
130+
name: 'storybook',
131+
// Enable browser mode
132+
browser: {
133+
enabled: true,
134+
// Make sure to install Playwright
135+
provider: playwright({}),
136+
headless: true,
137+
instances: [{ browser: 'chromium' }],
138+
},
139+
setupFiles: ['./.storybook/vitest.setup.ts'],
140+
},
141+
}),
142+
],
143+
},
144+
}),
145+
);
146+
```
147+
148+
```ts filename="vitest.config.ts" renderer="vue" tabTitle="Vitest 3"
149+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
150+
50151
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
152+
51153
import path from 'node:path';
52154
import { fileURLToPath } from 'node:url';
53155

@@ -69,8 +171,8 @@ export default mergeConfig(
69171
// The location of your Storybook config, main.js|ts
70172
configDir: path.join(dirname, '.storybook'),
71173
// This should match your package.json script to run Storybook
72-
// The --ci flag will skip prompts and not open a browser
73-
storybookScript: 'yarn storybook --ci',
174+
// The --no-open flag will skip the automatic opening of a browser
175+
storybookScript: 'yarn storybook --no-open',
74176
}),
75177
],
76178
test: {
@@ -92,9 +194,12 @@ export default mergeConfig(
92194
);
93195
```
94196

95-
```ts filename="vitest.config.ts" renderer="svelte"
96-
import { defineConfig, mergeConfig, defineProject } from 'vitest/config';
197+
```ts filename="vitest.config.ts" renderer="svelte" tabTitle="Vitest 4"
198+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
199+
import { playwright } from '@vitest/browser-playwright';
200+
97201
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
202+
98203
import path from 'node:path';
99204
import { fileURLToPath } from 'node:url';
100205

@@ -116,8 +221,153 @@ export default mergeConfig(
116221
// The location of your Storybook config, main.js|ts
117222
configDir: path.join(dirname, '.storybook'),
118223
// This should match your package.json script to run Storybook
119-
// The --ci flag will skip prompts and not open a browser
120-
storybookScript: 'yarn storybook --ci',
224+
// The --no-open flag will skip the automatic opening of a browser
225+
storybookScript: 'yarn storybook --no-open',
226+
}),
227+
],
228+
test: {
229+
name: 'storybook',
230+
// Enable browser mode
231+
browser: {
232+
enabled: true,
233+
// Make sure to install Playwright
234+
provider: playwright({}),
235+
headless: true,
236+
instances: [{ browser: 'chromium' }],
237+
},
238+
setupFiles: ['./.storybook/vitest.setup.ts'],
239+
},
240+
}),
241+
],
242+
},
243+
}),
244+
);
245+
```
246+
247+
```ts filename="vitest.config.ts" renderer="svelte" tabTitle="Vitest 3"
248+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
249+
250+
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
251+
252+
import path from 'node:path';
253+
import { fileURLToPath } from 'node:url';
254+
255+
const dirname = path.dirname(fileURLToPath(import.meta.url));
256+
257+
import viteConfig from './vite.config';
258+
259+
export default mergeConfig(
260+
viteConfig,
261+
defineConfig({
262+
test: {
263+
// Use `workspace` field in Vitest < 3.2
264+
projects: [
265+
defineProject({
266+
extends: true,
267+
plugins: [
268+
storybookTest({
269+
// The location of your Storybook config, main.js|ts
270+
configDir: path.join(dirname, '.storybook'),
271+
// This should match your package.json script to run Storybook
272+
// The --no-open flag will skip the automatic opening of a browser
273+
storybookScript: 'yarn storybook --no-open',
274+
}),
275+
],
276+
test: {
277+
name: 'storybook',
278+
// Enable browser mode
279+
browser: {
280+
enabled: true,
281+
// Make sure to install Playwright
282+
provider: 'playwright',
283+
headless: true,
284+
instances: [{ browser: 'chromium' }],
285+
},
286+
setupFiles: ['./.storybook/vitest.setup.ts'],
287+
},
288+
}),
289+
],
290+
},
291+
}),
292+
);
293+
```
294+
295+
```ts filename="vitest.config.ts" renderer="web-components" tabTitle="Vitest 4"
296+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
297+
import { playwright } from '@vitest/browser-playwright';
298+
299+
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
300+
301+
import path from 'node:path';
302+
import { fileURLToPath } from 'node:url';
303+
304+
const dirname = path.dirname(fileURLToPath(import.meta.url));
305+
306+
import viteConfig from './vite.config';
307+
308+
export default mergeConfig(
309+
viteConfig,
310+
defineConfig({
311+
test: {
312+
// Use `workspace` field in Vitest < 3.2
313+
projects: [
314+
defineProject({
315+
extends: true,
316+
plugins: [
317+
storybookTest({
318+
// The location of your Storybook config, main.js|ts
319+
configDir: path.join(dirname, '.storybook'),
320+
// This should match your package.json script to run Storybook
321+
// The --no-open flag will skip the automatic opening of a browser
322+
storybookScript: 'yarn storybook --no-open',
323+
}),
324+
],
325+
test: {
326+
name: 'storybook',
327+
// Enable browser mode
328+
browser: {
329+
enabled: true,
330+
// Make sure to install Playwright
331+
provider: playwright({}),
332+
headless: true,
333+
instances: [{ browser: 'chromium' }],
334+
},
335+
setupFiles: ['./.storybook/vitest.setup.ts'],
336+
},
337+
}),
338+
],
339+
},
340+
}),
341+
);
342+
```
343+
344+
```ts filename="vitest.config.ts" renderer="web-components" tabTitle="Vitest 3"
345+
import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
346+
347+
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
348+
349+
import path from 'node:path';
350+
import { fileURLToPath } from 'node:url';
351+
352+
const dirname = path.dirname(fileURLToPath(import.meta.url));
353+
354+
import viteConfig from './vite.config';
355+
356+
export default mergeConfig(
357+
viteConfig,
358+
defineConfig({
359+
test: {
360+
// Use `workspace` field in Vitest < 3.2
361+
projects: [
362+
defineProject({
363+
extends: true,
364+
plugins: [
365+
storybookTest({
366+
// The location of your Storybook config, main.js|ts
367+
configDir: path.join(dirname, '.storybook'),
368+
// This should match your package.json script to run Storybook
369+
// The --no-open flag will skip the automatic opening of a browser
370+
storybookScript: 'yarn storybook --no-open',
121371
}),
122372
],
123373
test: {

‎docs/_snippets/vitest-plugin-vitest-debug-option-ci.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
```ts filename="vitest.config.ts" renderer="common" tabTitle="Vitest 4"
2+
export default defineConfig({
3+
// ...
4+
test: {
5+
// ...
6+
projects: [
7+
{
8+
plugins: [
9+
storybookTest({
10+
// ...
11+
// 👇 Use the environment variable you passed
12+
storybookUrl: process.env.SB_URL,
13+
}),
14+
],
15+
},
16+
],
17+
},
18+
});
19+
```
20+
21+
```ts filename="vitest.workspace.ts" renderer="common" tabTitle="Vitest 3"
22+
export default defineWorkspace([
23+
// ...
24+
{
25+
// ...
26+
{
27+
plugins: [
28+
storybookTest({
29+
// ...
30+
// 👇 Use the environment variable you passed
31+
storybookUrl: process.env.SB_URL
32+
}),
33+
],
34+
},
35+
},
36+
]);
37+
```

0 commit comments

Comments
 (0)