From fcd2b24b89777e26c26575dfe78dd3482017dbed Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 18 Dec 2024 11:25:13 -0700 Subject: [PATCH 1/2] Docs fixes found during 8.5 QA - Add `configDir` option to example configs - Move coverage exclusion config under Set up heading - Add `**/.storybook/**` --- docs/_snippets/vitest-plugin-vitest-config.md | 6 +++ .../vitest-plugin-vitest-workspace.md | 6 +++ docs/writing-tests/test-addon.mdx | 13 +++-- docs/writing-tests/test-coverage.mdx | 49 +++++++++---------- 4 files changed, 45 insertions(+), 29 deletions(-) diff --git a/docs/_snippets/vitest-plugin-vitest-config.md b/docs/_snippets/vitest-plugin-vitest-config.md index b3f271a6e636..6ce11fcef545 100644 --- a/docs/_snippets/vitest-plugin-vitest-config.md +++ b/docs/_snippets/vitest-plugin-vitest-config.md @@ -11,6 +11,8 @@ export default mergeConfig( defineConfig({ plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -44,6 +46,8 @@ export default mergeConfig( defineConfig({ plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -78,6 +82,8 @@ export default mergeConfig( defineConfig({ plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', diff --git a/docs/_snippets/vitest-plugin-vitest-workspace.md b/docs/_snippets/vitest-plugin-vitest-workspace.md index 46b5a3e22edd..bce2c89ce97a 100644 --- a/docs/_snippets/vitest-plugin-vitest-workspace.md +++ b/docs/_snippets/vitest-plugin-vitest-workspace.md @@ -12,6 +12,8 @@ export default defineWorkspace([ extends: './vite.config.ts', plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -49,6 +51,8 @@ export default defineWorkspace([ extends: './vite.config.ts', plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', @@ -87,6 +91,8 @@ export default defineWorkspace([ extends: './vite.config.ts', plugins: [ storybookTest({ + // The location of your Storybook config, main.js|ts + configDir: './.storybook', // This should match your package.json script to run Storybook // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', diff --git a/docs/writing-tests/test-addon.mdx b/docs/writing-tests/test-addon.mdx index 351aa557428a..2fe39d7b8b83 100644 --- a/docs/writing-tests/test-addon.mdx +++ b/docs/writing-tests/test-addon.mdx @@ -96,7 +96,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea viteConfig, defineConfig({ plugins: [ - storybookTest(), + storybookTest({ + // ... + }), storybookNextJsPlugin(), // 👈 Apply the framework plugin here ], // ... @@ -119,7 +121,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea viteConfig, defineConfig({ plugins: [ - storybookTest(), + storybookTest({ + // ... + }), storybookVuePlugin(), // 👈 Apply the framework plugin here ], // ... @@ -142,7 +146,9 @@ Some Storybook frameworks require additional setup to enable the framework's fea viteConfig, defineConfig({ plugins: [ - storybookTest(), + storybookTest({ + // ... + }), storybookSveltekitPlugin(), // 👈 Apply the framework plugin here ], // ... @@ -313,6 +319,7 @@ export default defineWorkspace([ { plugins: [ storybookTest({ + // ... storybookScript: 'yarn storybook --ci', storybookUrl: process.env.SB_URL }), diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx index 1b62f752dfbd..857d70dcae5e 100644 --- a/docs/writing-tests/test-coverage.mdx +++ b/docs/writing-tests/test-coverage.mdx @@ -34,6 +34,29 @@ Before coverage can be calculated, you may need to install a support package cor {/* prettier-ignore-end */} +Additionally (until Vitest 3.0.0 is released), the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config: + +```ts title="vitest.config.ts" +import { coverageConfigDefaults, defineConfig } from 'vitest/config'; + +export default defineConfig({ + // ... + test: { + coverage: { + // 👇 Add this + exclude: [ + ...coverageConfigDefaults.exclude, + '**/.storybook/**', + // 👇 This pattern must align with the `stories` property of your `.storybook/main.ts` config + '**/*.stories.*', + // 👇 This pattern must align with the output directory of `storybook build` + '**/storybook-static/**', + ], + } + } +}) +``` + ### Usage Because coverage is built into the Test addon, you can use it everywhere you run your tests. @@ -188,32 +211,6 @@ When calculating coverage in the Storybook UI, the following options are always - `reporter` - `reportsDirectory` -### Troubleshooting - -#### Excluding stories from the coverage report - -Until Vitest 3.0.0 is released, the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config: - -```ts title="vitest.config.ts" -import { coverageConfigDefaults, defineConfig } from 'vitest/config'; - -export default defineConfig({ - // ... - test: { - coverage: { - // 👇 Add this - exclude: [ - ...coverageConfigDefaults.exclude, - // This pattern must align with the `stories` property of your `.storybook/main.ts` config - '**/*.stories.*', - // This pattern must align with the output directory of `storybook build` - 'storybook-static/**', - ], - } - } -}) -``` - ## With the coverage addon From 8cbd0caaab3eeb1a7403d516a31eb457710f59ad Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 18 Dec 2024 20:58:26 -0700 Subject: [PATCH 2/2] Correct `viteFinal` guidance --- .../vitest-plugin-vitest-config-alias.md | 31 ------------------- docs/writing-tests/test-addon.mdx | 12 ++----- 2 files changed, 2 insertions(+), 41 deletions(-) delete mode 100644 docs/_snippets/vitest-plugin-vitest-config-alias.md diff --git a/docs/_snippets/vitest-plugin-vitest-config-alias.md b/docs/_snippets/vitest-plugin-vitest-config-alias.md deleted file mode 100644 index ac1f59857c72..000000000000 --- a/docs/_snippets/vitest-plugin-vitest-config-alias.md +++ /dev/null @@ -1,31 +0,0 @@ -```js filename=".storybook/main.js" renderer="common" tabTitle="Before" -import { mergeConfig } from 'vite'; - -export default { - // ... - viteFinal: async (viteConfig) => { - return mergeConfig(viteConfig, { - resolve: { - alias: { - '@components': '/src/components', - // ... - }, - }, - }); - }, -}; -``` - -```js filename="vitest.config.ts" renderer="common" tabTitle="After" -import { defineConfig } from 'vitest/config'; - -export default defineConfig({ - // ... - resolve: { - alias: { - '@components': '/src/components', - // ... - }, - }, -}); -``` diff --git a/docs/writing-tests/test-addon.mdx b/docs/writing-tests/test-addon.mdx index 2fe39d7b8b83..4b340203f378 100644 --- a/docs/writing-tests/test-addon.mdx +++ b/docs/writing-tests/test-addon.mdx @@ -434,17 +434,9 @@ If your stories use assets in the public directory and you're not using the defa ### How do I apply custom Vite configuration? -If you have custom operations defined in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file, you will need to translate those into the Vitest configuration. This is because the plugin does not use the Storybook Vite configuration. +Your Storybook project's Vite configuration (in [`viteFinal`](../api/main-config/main-config-vite-final.mdx) in your `.storybook/main.js|ts` file) is automatically applied to your Vitest configuration, with one exception: the plugins. -For example, to recreate an alias in Storybook's Vite configuration, you would need to apply that alias in the Vitest configuration: - -{/* prettier-ignore-start */} - - - -{/* prettier-ignore-end */} - -The above example places the Vite configuration in a Vitest configuration file. You can also place it in a Vitest workspace file, if that is how your project is configured. +If you are running any plugins in `viteFinal`, you will likely also need to run those in the Vitest configuration. ### How do I isolate Storybook tests from others?