Addon Vitest: Fix incorrect file modifications during setup

code/addons/vitest/src/postinstall.ts

@@ -468,11 +468,14 @@ export default async function postInstall(options: PostinstallOptions) {
       logger.plain(`  ${rootConfig}`);
 
       const formattedContent = await formatFileContent(rootConfig, generate(target).code);
+      // Only add triple slash reference to vite.config files, not vitest.config files
+      // vitest.config files already have the vitest/config types available
+      const shouldAddReference = !configFileHasTypeReference && !vitestConfigFile;
       await writeFile(
         rootConfig,
-        configFileHasTypeReference
-          ? formattedContent
-          : '/// <reference types="vitest/config" />\n' + formattedContent
+        shouldAddReference
+          ? '/// <reference types="vitest/config" />\n' + formattedContent
+          : formattedContent
       );
     } else {
       logErrors(

code/addons/vitest/src/updateVitestFile.test.ts

@@ -611,6 +611,88 @@ describe('updateConfigFile', () => {
         }));"
     `);
   });
+  it('supports mergeConfig without defineConfig calls', async () => {
+    const source = babel.babelParse(
+      await loadTemplate('vitest.config.template.ts', {
+        CONFIG_DIR: '.storybook',
+        BROWSER_CONFIG: "{ provider: 'playwright' }",
+        SETUP_FILE: '../.storybook/vitest.setup.ts',
+      })
+    );
+    const target = babel.babelParse(`
+      import { mergeConfig } from 'vite'
+      import viteConfig from './vite.config'
+
+      export default mergeConfig(
+        viteConfig,
+        {
+          plugins: [react()],
+          test: {
+            environment: 'jsdom',
+          }
+        }
+      )
+    `);
+
+    const before = babel.generate(target).code;
+    const updated = updateConfigFile(source, target);
+    expect(updated).toBe(true);
+
+    const after = babel.generate(target).code;
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  import { mergeConfig } from 'vite';
+        import viteConfig from './vite.config';
+
+      + import path from 'node:path';
+      + import { fileURLToPath } from 'node:url';
+      + import { defineConfig } from 'vitest/config';
+      + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + 
+      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      + 
+        export default mergeConfig(viteConfig, {
+          plugins: [react()],
+          test: {
+
+      -     environment: 'jsdom'
+      - 
+      +     workspace: [{
+      +       extends: true,
+      +       test: {
+      +         environment: 'jsdom'
+      +       }
+      +     }, {
+      +       extends: true,
+      +       plugins: [
+      +       // The plugin will run tests for the stories defined in your Storybook config
+      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +       storybookTest({
+      +         configDir: path.join(dirname, '.storybook')
+      +       })],
+      +       test: {
+      +         name: 'storybook',
+      +         browser: {
+      +           enabled: true,
+      +           headless: true,
+      +           provider: 'playwright',
+      +           instances: [{
+      +             browser: 'chromium'
+      +           }]
+      +         },
+      +         setupFiles: ['../.storybook/vitest.setup.ts']
+      +       }
+      +     }]
+      + 
+          }
+        });"
+    `);
+  });
 
   it('supports mergeConfig without config containing test property', async () => {
     const source = babel.babelParse(
@@ -771,6 +853,204 @@ describe('updateConfigFile', () => {
         }));"
     `);
   });
+
+  it('extracts coverage config and keeps it at top level when using workspace', async () => {
+    const source = babel.babelParse(
+      await loadTemplate('vitest.config.template.ts', {
+        CONFIG_DIR: '.storybook',
+        BROWSER_CONFIG: "{ provider: 'playwright' }",
+        SETUP_FILE: '../.storybook/vitest.setup.ts',
+      })
+    );
+    const target = babel.babelParse(`
+      import { mergeConfig, defineConfig } from 'vitest/config'
+      import viteConfig from './vite.config'
+
+      export default mergeConfig(
+        viteConfig,
+        defineConfig({
+          test: {
+            name: 'node',
+            environment: 'happy-dom',
+            include: ['**/*.test.ts'],
+            coverage: {
+              exclude: [
+                'storybook.setup.ts',
+                '**/*.stories.*',
+              ],
+            },
+          },
+        })
+      )
+    `);
+
+    const before = babel.generate(target).code;
+    const updated = updateConfigFile(source, target);
+    expect(updated).toBe(true);
+
+    const after = babel.generate(target).code;
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    // Coverage should stay at the top level, not moved into the workspace
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  import { mergeConfig, defineConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+      + import path from 'node:path';
+      + import { fileURLToPath } from 'node:url';
+      + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + 
+      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      + 
+        export default mergeConfig(viteConfig, defineConfig({
+          test: {
+
+      -     name: 'node',
+      -     environment: 'happy-dom',
+      -     include: ['**/*.test.ts'],
+      - 
+            coverage: {
+              exclude: ['storybook.setup.ts', '**/*.stories.*']
+
+      -     }
+      - 
+      +     },
+      +     workspace: [{
+      +       extends: true,
+      +       test: {
+      +         name: 'node',
+      +         environment: 'happy-dom',
+      +         include: ['**/*.test.ts']
+      +       }
+      +     }, {
+      +       extends: true,
+      +       plugins: [
+      +       // The plugin will run tests for the stories defined in your Storybook config
+      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +       storybookTest({
+      +         configDir: path.join(dirname, '.storybook')
+      +       })],
+      +       test: {
+      +         name: 'storybook',
+      +         browser: {
+      +           enabled: true,
+      +           headless: true,
+      +           provider: 'playwright',
+      +           instances: [{
+      +             browser: 'chromium'
+      +           }]
+      +         },
+      +         setupFiles: ['../.storybook/vitest.setup.ts']
+      +       }
+      +     }]
+      + 
+          }
+        }));"
+    `);
+  });
+
+  it('extracts coverage config and keeps it at top level when using projects', async () => {
+    const source = babel.babelParse(
+      await loadTemplate('vitest.config.3.2.template.ts', {
+        CONFIG_DIR: '.storybook',
+        BROWSER_CONFIG: "{ provider: 'playwright' }",
+        SETUP_FILE: '../.storybook/vitest.setup.ts',
+      })
+    );
+    const target = babel.babelParse(`
+      import { mergeConfig, defineConfig } from 'vitest/config'
+      import viteConfig from './vite.config'
+
+      export default mergeConfig(
+        viteConfig,
+        defineConfig({
+          test: {
+            name: 'node',
+            environment: 'happy-dom',
+            include: ['**/*.test.ts'],
+            coverage: {
+              exclude: [
+                'storybook.setup.ts',
+                '**/*.stories.*',
+              ],
+            },
+          },
+        })
+      )
+    `);
+
+    const before = babel.generate(target).code;
+    const updated = updateConfigFile(source, target);
+    expect(updated).toBe(true);
+
+    const after = babel.generate(target).code;
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    // Coverage should stay at the top level, not moved into the projects
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  import { mergeConfig, defineConfig } from 'vitest/config';
+        import viteConfig from './vite.config';
+
+      + import path from 'node:path';
+      + import { fileURLToPath } from 'node:url';
+      + import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      + const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+      + 
+      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+      + 
+        export default mergeConfig(viteConfig, defineConfig({
+          test: {
+
+      -     name: 'node',
+      -     environment: 'happy-dom',
+      -     include: ['**/*.test.ts'],
+      - 
+            coverage: {
+              exclude: ['storybook.setup.ts', '**/*.stories.*']
+
+      -     }
+      - 
+      +     },
+      +     projects: [{
+      +       extends: true,
+      +       test: {
+      +         name: 'node',
+      +         environment: 'happy-dom',
+      +         include: ['**/*.test.ts']
+      +       }
+      +     }, {
+      +       extends: true,
+      +       plugins: [
+      +       // The plugin will run tests for the stories defined in your Storybook config
+      +       // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      +       storybookTest({
+      +         configDir: path.join(dirname, '.storybook')
+      +       })],
+      +       test: {
+      +         name: 'storybook',
+      +         browser: {
+      +           enabled: true,
+      +           headless: true,
+      +           provider: 'playwright',
+      +           instances: [{
+      +             browser: 'chromium'
+      +           }]
+      +         },
+      +         setupFiles: ['../.storybook/vitest.setup.ts']
+      +       }
+      +     }]
+      + 
+          }
+        }));"
+    `);
+  });
 });
 
 describe('updateWorkspaceFile', () => {