Merge pull request storybookjs#31457 from storybookjs/yann/ignore-mdx-in-vitest

Addon Vitest: Ignore mdx files as part of tests

Author: yannbf

code/addons/docs/src/preset.ts

@@ -157,6 +157,7 @@ export const addons: PresetProperty<'addons'> = [
 
 export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
+
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
@@ -186,7 +187,10 @@ export const viteFinal = async (config: any, options: Options) => {
   // mdx plugin needs to be before any react plugins
   plugins.unshift(mdxPlugin(options));
 
-  return config;
+  return {
+    ...config,
+    plugins,
+  };
 };
 
 /*

code/addons/vitest/src/vitest-plugin/index.ts

@@ -48,6 +48,7 @@ const defaultOptions: UserOptions = {
   storybookScript: undefined,
   configDir: resolve(join(WORKING_DIR, '.storybook')),
   storybookUrl: 'http://localhost:6006',
+  disableAddonDocs: true,
 };
 
 const extractTagsFromPreview = async (configDir: string) => {
@@ -79,6 +80,27 @@ const getStoryGlobsAndFiles = async (
   };
 };
 
+/**
+ * Plugin to stub MDX imports during testing This prevents the need to process MDX files in the test
+ * environment
+ */
+const mdxStubPlugin: Plugin = {
+  name: 'storybook:stub-mdx-plugin',
+  enforce: 'pre',
+  resolveId(id) {
+    if (id.endsWith('.mdx')) {
+      return id;
+    }
+    return null;
+  },
+  load(id) {
+    if (id.endsWith('.mdx')) {
+      return `export default {};`;
+    }
+    return null;
+  },
+};
+
 const PACKAGE_DIR = dirname(require.resolve('@storybook/addon-vitest/package.json'));
 
 export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> => {
@@ -129,16 +151,23 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
     extractTagsFromPreview(finalOptions.configDir),
   ]);
 
-  // filter out plugins that we know are unnecesary for tests, eg. docgen plugins
-  const plugins = (await withoutVitePlugins(viteConfigFromStorybook.plugins ?? [], [
-    'storybook:package-deduplication', // addon-docs
-    'storybook:mdx-plugin', // addon-docs
+  const pluginsToIgnore = [
     '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[];
+  ];
+
+  if (finalOptions.disableAddonDocs) {
+    pluginsToIgnore.push('storybook:package-deduplication', 'storybook:mdx-plugin');
+  }
+
+  // filter out plugins that we know are unnecesary for tests, eg. docgen plugins
+  const plugins = await withoutVitePlugins(viteConfigFromStorybook.plugins ?? [], pluginsToIgnore);
+
+  if (finalOptions.disableAddonDocs) {
+    plugins.push(mdxStubPlugin);
+  }
 
   const storybookTestPlugin: Plugin = {
     name: 'vite-plugin-storybook-test',

code/addons/vitest/src/vitest-plugin/types.ts

@@ -27,6 +27,16 @@ export type UserOptions = {
     exclude?: string[];
     skip?: string[];
   };
+
+  /**
+   * Whether to disable addon docs features while running tests.
+   *
+   * Most users don't need addon docs for tests, the only scenario where you might need it is if you
+   * need to read and parse MDX files as part of rendering your components.
+   *
+   * @default true
+   */
+  disableAddonDocs?: boolean;
 };
 
 export type InternalOptions = Required<UserOptions> & {

docs/writing-tests/vitest-addon.mdx

@@ -468,4 +468,14 @@ Default:
 - **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results
 - **`skip`**: Stories with these tags will not be tested, and will be counted in the test results
 
+#### `disableAddonDocs`
+
+Type: `boolean`
+
+Default: `true`
+
+Whether to disable addon docs MDX parsing while running tests.
+
+When either the preview config or stories import mdx files, they are mocked as normally they are not needed for tests.
+You might set `disableAddonDocs` to `false` only in case your stories actually need to read and parse MDX files as part of rendering your components.
 </If>