From f8ef44d512453b34543f53ec658f907fd1dd772a Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 19 Dec 2023 21:17:36 +0000
Subject: [PATCH] Merge pull request #25278 from
 storybookjs/docs_add_test_troubleshooting

Docs: Test Coverage troubleshoot optimized builds
(cherry picked from commit 4495fa9cd53a59b3d0f58c3b12acbbbaeef9dd3b)
---
 ...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 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
 
 <!-- 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.