Merge pull request #30105 from storybookjs/jeppe/support-svelte-csf-i…

…n-vitest Vitest: Add plugins from `viteFinal`
storybookjs · Jan 13, 2025 · 2759c5b · 2759c5b
2 parents f43a567 + f7285f0
commit 2759c5b
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 271 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -5,7 +5,8 @@
   - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
   - [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
-  - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
+  - [Addon-test: You should no longer copy the content of `viteFinal` to your configuration](#addon-test-you-should-no-longer-copy-the-content-of-vitefinal-to-your-configuration)
+  - [Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed](#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
@@ -484,7 +485,13 @@ beforeAll(annotations.beforeAll);
 
 We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead.
 
-### Indexing behavior of @storybook/experimental-addon-test is changed
+### Addon-test: You should no longer copy the content of `viteFinal` to your configuration 
+
+In version 8.4 of `@storybook/experimental-addon-test`, it was required to copy any custom configuration you had in `viteFinal` in `main.ts`, to the Vitest Storybook project. This is no longer necessary, as the Storybook Test plugin will automatically include your `viteFinal` configuration. You should remove any configurations you might already have in `viteFinal` to remove duplicates.
+
+This is especially the case for any plugins you might have, as they could now end up being loaded twice, which is likely to cause errors when running tests. In 8.4 we documented and automatically added some Vite plugins from Storybook frameworks like `@storybook/experimental-nextjs-vite` and `@storybook/sveltekit` - **these needs to be removed as well**.
+
+### Addon-test: Indexing behavior of @storybook/experimental-addon-test is changed
 
 The Storybook test addon used to index stories based on the `test.include` field in the Vitest config file. This caused indexing issues with Storybook, because stories could have been indexed by Storybook and not Vitest, and vice versa. Starting in Storybook 8.5.0-alpha.18, we changed the indexing behavior so that it always uses the globs defined in the `stories` field in `.storybook/main.js` for a more consistent experience. It is now discouraged to use `test.include`, please remove it.
 

diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
@@ -237,8 +237,6 @@ export default async function postInstall(options: PostinstallOptions) {
     }
   }
 
-  const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
-
   if (info.frameworkPackageName === '@storybook/nextjs') {
     printInfo(
       '🍿 Just so you know...',
@@ -418,7 +416,7 @@ export default async function postInstall(options: PostinstallOptions) {
       browserWorkspaceFile,
       dedent`
         import { defineWorkspace } from 'vitest/config';
-        import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
+        import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
         import path from 'node:path';
         import { fileURLToPath } from 'node:url';
 
@@ -434,7 +432,7 @@ export default async function postInstall(options: PostinstallOptions) {
             plugins: [
               // The plugin will run tests for the stories defined in your Storybook config
               // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
-              storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
+              storybookTest({ configDir: path.join(dirname, '${options.configDir}') })
             ],
             test: {
               name: 'storybook',
@@ -464,7 +462,7 @@ export default async function postInstall(options: PostinstallOptions) {
       newVitestConfigFile,
       dedent`
         import { defineConfig } from 'vitest/config';
-        import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
+        import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
         import path from 'node:path';
         import { fileURLToPath } from 'node:url';
 
@@ -477,7 +475,7 @@ export default async function postInstall(options: PostinstallOptions) {
           plugins: [
             // The plugin will run tests for the stories defined in your Storybook config
             // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
-            storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
+            storybookTest({ configDir: path.join(dirname, '${options.configDir}') })
           ],
           test: {
             name: 'storybook',
@@ -512,45 +510,6 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.line(1);
 }
 
-const getVitestPluginInfo = (framework: string) => {
-  let frameworkPluginImport = '';
-  let frameworkPluginCall = '';
-  let frameworkPluginDocs = '';
-
-  if (framework === '@storybook/nextjs' || framework === '@storybook/experimental-nextjs-vite') {
-    frameworkPluginImport =
-      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';";
-    frameworkPluginDocs =
-      '// More info at: https://github.com/storybookjs/vite-plugin-storybook-nextjs';
-    frameworkPluginCall = 'storybookNextJsPlugin()';
-  }
-
-  if (framework === '@storybook/sveltekit') {
-    frameworkPluginImport =
-      "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin';";
-    frameworkPluginCall = 'storybookSveltekitPlugin()';
-  }
-
-  if (framework === '@storybook/vue3-vite') {
-    frameworkPluginImport =
-      "import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin';";
-    frameworkPluginCall = 'storybookVuePlugin()';
-  }
-
-  if (framework === '@storybook/react-native-web-vite') {
-    frameworkPluginImport =
-      "import { storybookReactNativeWeb } from '@storybook/react-native-web-vite/vite-plugin';";
-    frameworkPluginCall = 'storybookReactNativeWeb()';
-  }
-
-  // spaces for file indentation
-  frameworkPluginImport = `\n${frameworkPluginImport}`;
-  frameworkPluginDocs = frameworkPluginDocs ? `\n    ${frameworkPluginDocs}` : '';
-  frameworkPluginCall = frameworkPluginCall ? `\n    ${frameworkPluginCall},` : '';
-
-  return { frameworkPluginImport, frameworkPluginCall, frameworkPluginDocs };
-};
-
 async function getStorybookInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const packageJson = await packageManager.retrievePackageJson();

diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts
@@ -24,7 +24,10 @@ import picocolors from 'picocolors';
 import sirv from 'sirv';
 import { convertPathToPattern } from 'tinyglobby';
 import { dedent } from 'ts-dedent';
+import type { PluginOption } from 'vite';
 
+// ! Relative import to prebundle it without needing to depend on the Vite builder
+import { withoutVitePlugins } from '../../../../builders/builder-vite/src/utils/without-vite-plugins';
 import type { InternalOptions, UserOptions } from './types';
 
 const WORKING_DIR = process.cwd();
@@ -64,9 +67,9 @@ const getStoryGlobsAndFiles = async (
   };
 };
 
-const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
+const PACKAGE_DIR = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
 
-export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
+export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> => {
   const finalOptions = {
     ...defaultOptions,
     ...options,
@@ -109,14 +112,27 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
     getStoryGlobsAndFiles(presets, directories),
     presets.apply('framework', undefined),
     presets.apply('env', {}),
-    presets.apply('viteFinal', {}),
+    presets.apply<{ plugins?: Plugin[] }>('viteFinal', {}),
     presets.apply('staticDirs', []),
     extractTagsFromPreview(finalOptions.configDir),
   ]);
 
-  return {
+  // filter out plugins that we know are unnecesary for tests, eg. docgen plugins
+  const plugins = (await withoutVitePlugins(
+    (viteConfigFromStorybook.plugins as unknown as PluginOption[]) ?? [],
+    [
+      'storybook:package-deduplication', // addon-docs
+      'storybook:mdx-plugin', // addon-docs
+      'storybook:react-docgen-plugin',
+      'vite:react-docgen-typescript', // aka @joshwooding/vite-plugin-react-docgen-typescript
+      'storybook:svelte-docgen-plugin',
+      'storybook:vue-component-meta-plugin',
+      'storybook:vue-docgen-plugin',
+    ]
+  )) as unknown as Plugin[];
+
+  const storybookTestPlugin: Plugin = {
     name: 'vite-plugin-storybook-test',
-    enforce: 'pre',
     async transformIndexHtml(html) {
       const [headHtmlSnippet, bodyHtmlSnippet] = await Promise.all([
         presets.apply('previewHead'),
@@ -153,7 +169,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
       const baseConfig: Omit<ViteUserConfig, 'plugins'> = {
         test: {
           setupFiles: [
-            join(packageDir, 'dist/vitest-plugin/setup-file.mjs'),
+            join(PACKAGE_DIR, 'dist/vitest-plugin/setup-file.mjs'),
             // if the existing setupFiles is a string, we have to include it otherwise we're overwriting it
             typeof inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test
               ?.setupFiles === 'string' &&
@@ -162,7 +178,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
 
           ...(finalOptions.storybookScript
             ? {
-                globalSetup: [join(packageDir, 'dist/vitest-plugin/global-setup.mjs')],
+                globalSetup: [join(PACKAGE_DIR, 'dist/vitest-plugin/global-setup.mjs')],
               }
             : {}),
 
@@ -245,7 +261,9 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
 
         optimizeDeps: {
           include: [
-            '@storybook/experimental-addon-test/**',
+            '@storybook/experimental-addon-test/internal/setup-file',
+            '@storybook/experimental-addon-test/internal/global-setup',
+            '@storybook/experimental-addon-test/internal/test-utils',
             ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
               ? ['react-dom/test-utils']
               : []),
@@ -323,6 +341,9 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
       }
     },
   };
+
+  plugins.push(storybookTestPlugin);
+  return plugins;
 };
 
 export default storybookTest;
diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -36,12 +36,13 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry =
 
 export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => {
   const reactConfig = await reactViteFinal(config, options);
-  const { plugins = [] } = reactConfig;
 
   const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
 
   const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined;
-  plugins.push(vitePluginStorybookNextjs({ dir: nextDir }));
 
-  return reactConfig;
+  return {
+    ...reactConfig,
+    plugins: [...(reactConfig?.plugins ?? []), vitePluginStorybookNextjs({ dir: nextDir })],
+  };
 };
diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts
@@ -70,69 +70,66 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
 
   const isDevelopment = options.configType !== 'PRODUCTION';
 
-  const reactConfig = await reactViteFinal(config, options);
+  const { plugins = [], ...reactConfigWithoutPlugins } = await reactViteFinal(config, options);
 
-  const { plugins = [] } = reactConfig;
+  return mergeConfig(reactConfigWithoutPlugins, {
+    plugins: [
+      tsconfigPaths(),
 
-  plugins.unshift(
-    tsconfigPaths(),
-
-    // fix for react native packages shipping with flow types untranspiled
-    flowPlugin({
-      exclude: [/node_modules\/(?!react-native|@react-native)/],
-    }),
-    react({
-      ...pluginReactOptions,
-      jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic',
-      babel: {
-        babelrc: false,
-        configFile: false,
-        ...pluginReactOptions.babel,
-      },
-    }),
+      // fix for react native packages shipping with flow types untranspiled
+      flowPlugin({
+        exclude: [/node_modules\/(?!react-native|@react-native)/],
+      }),
+      react({
+        ...pluginReactOptions,
+        jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic',
+        babel: {
+          babelrc: false,
+          configFile: false,
+          ...pluginReactOptions.babel,
+        },
+      }),
 
-    // we need to add this extra babel config because the react plugin doesn't allow
-    // for transpiling node_modules. We need this because many react native packages are un-transpiled.
-    // see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306
-    // However we keep the react plugin to get the fast refresh and the other stuff its doing
-    babel({
-      ...pluginBabelOptions,
-      include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/],
-      exclude: pluginBabelOptions.exclude,
-      babelConfig: {
-        ...pluginBabelOptions.babelConfig,
-        babelrc: false,
-        configFile: false,
-        presets: [
-          [
-            '@babel/preset-react',
-            {
-              development: isDevelopment,
-              runtime: 'automatic',
-              ...(pluginBabelOptions.presetReact || {}),
-            },
+      // we need to add this extra babel config because the react plugin doesn't allow
+      // for transpiling node_modules. We need this because many react native packages are un-transpiled.
+      // see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306
+      // However we keep the react plugin to get the fast refresh and the other stuff its doing
+      babel({
+        ...pluginBabelOptions,
+        include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/],
+        exclude: pluginBabelOptions.exclude,
+        babelConfig: {
+          ...pluginBabelOptions.babelConfig,
+          babelrc: false,
+          configFile: false,
+          presets: [
+            [
+              '@babel/preset-react',
+              {
+                development: isDevelopment,
+                runtime: 'automatic',
+                ...(pluginBabelOptions.presetReact || {}),
+              },
+            ],
+            ...(pluginBabelOptions.babelConfig?.presets || []),
           ],
-          ...(pluginBabelOptions.babelConfig?.presets || []),
-        ],
-        plugins: [
-          [
-            // this is a fix for reanimated not working in production
-            '@babel/plugin-transform-modules-commonjs',
-            {
-              strict: false,
-              strictMode: false, // prevent "use strict" injections
-              allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
-            },
+          plugins: [
+            [
+              // this is a fix for reanimated not working in production
+              '@babel/plugin-transform-modules-commonjs',
+              {
+                strict: false,
+                strictMode: false, // prevent "use strict" injections
+                allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
+              },
+            ],
+            ...(pluginBabelOptions.babelConfig?.plugins || []),
           ],
-          ...(pluginBabelOptions.babelConfig?.plugins || []),
-        ],
-      },
-    })
-  );
-
-  plugins.push(reactNativeWeb());
-
-  return mergeConfig(reactConfig, {
+        },
+      }),
+      ...plugins,
+      reactNativeWeb(),
+    ],
     optimizeDeps: {
       esbuildOptions: {
         // fix for react native packages shipping with flow types untranspiled

diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
@@ -13,7 +13,7 @@ export const core: PresetProperty<'core'> = {
 };
 
 export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, { presets }) => {
-  const { plugins = [] } = config;
+  const plugins = [...(config?.plugins ?? [])];
 
   // Add docgen plugin
   const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply<any>(
@@ -51,5 +51,5 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
     );
   }
 
-  return config;
+  return { ...config, plugins };
 };
diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
@@ -7,7 +7,7 @@ import type { Plugin } from 'vite';
 const filename = __filename ?? fileURLToPath(import.meta.url);
 const dir = dirname(filename);
 
-export async function mockSveltekitStores() {
+export function mockSveltekitStores() {
   return {
     name: 'storybook:sveltekit-mock-stores',
     config: () => ({