diff --git a/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx b/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx new file mode 100644 index 000000000000..0948f1e6132e --- /dev/null +++ b/docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx @@ -0,0 +1,20 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-coverage', + ], + build: { + test: { + disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'], + }, + }, +}; +``` diff --git a/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx b/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx new file mode 100644 index 000000000000..de1aa91b5071 --- /dev/null +++ b/docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx @@ -0,0 +1,24 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-coverage', + ], + build: { + test: { + disabledAddons: ['@storybook/addon-docs', '@storybook/addon-essentials/docs'], + }, + }, +}; + +export default config; +``` diff --git a/docs/writing-tests/test-coverage.md b/docs/writing-tests/test-coverage.md index b0df76cbf73a..13f5a82d6e38 100644 --- a/docs/writing-tests/test-coverage.md +++ b/docs/writing-tests/test-coverage.md @@ -145,6 +145,21 @@ If you intend on running coverage tests in frameworks with special files like Vu +### The coverage addon doesn't support optimized builds + +If you generated a production build optimized for performance with the [`--test`](../sharing/publish-storybook.md#customizing-the-build-for-performance) flag, and you're using the coverage addon to run tests against your Storybook, you may run into a situation where the coverage addon doesn't instrument your code. This is due to how the flag works, as it removes addons that have an impact on performance (e.g., [`Docs`](../writing-docs/index.md), [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage)). To resolve this issue, you'll need to adjust your Storybook configuration file (i.e., `.storybook/main.js|ts`) and include the [`disabledAddons`](../api/main-config-build.md#testdisabledaddons) option to allow the addon to run tests at the expense of a slower build. + + + + + + + ### The coverage addon doesn't support instrumented code As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Babel and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information.