From da1d221fee2d1a1cad980ee999d6796a29ee6904 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 19 Dec 2023 20:47:59 +0000
Subject: [PATCH] Docs: Test Coverage troubleshoot optimized builds

---
 ...ook-coverage-addon-optimized-config.js.mdx | 20 ++++++++++++++++
 ...ook-coverage-addon-optimized-config.ts.mdx | 24 +++++++++++++++++++
 docs/writing-tests/test-coverage.md           | 15 ++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 docs/snippets/common/storybook-coverage-addon-optimized-config.js.mdx
 create mode 100644 docs/snippets/common/storybook-coverage-addon-optimized-config.ts.mdx

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 79f5fe2ce8a4..cf635c22a4f4 100644
--- a/docs/writing-tests/test-coverage.md
+++ b/docs/writing-tests/test-coverage.md
@@ -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.