Skip to content

Commit

Permalink
Docs: Test Coverage troubleshoot optimized builds
Browse files Browse the repository at this point in the history
  • Loading branch information
jonniebigodes committed Dec 19, 2023
1 parent 4169cd5 commit da1d221
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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'],
},
},
};
```
Original file line number Diff line number Diff line change
@@ -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;
```
15 changes: 15 additions & 0 deletions docs/writing-tests/test-coverage.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,21 @@ If you intend on running coverage tests in frameworks with special files like Vu

<!-- prettier-ignore-end -->

### 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.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/storybook-coverage-addon-optimized-config.js.mdx',
'common/storybook-coverage-addon-optimized-config.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### 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.
Expand Down

0 comments on commit da1d221

Please sign in to comment.