Test: Add mock capabilities

code/.storybook/preview.tsx

@@ -1,15 +1,16 @@
+/* eslint-disable depend/ban-dependencies */
 import React, { type FC, Fragment, useEffect } from 'react';
 
 import type { Channel } from 'storybook/internal/channels';
 
 import { global } from '@storybook/global';
 
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react-vite';
-// TODO add empty preview
-// import * as designs from '@storybook/addon-designs/preview';
 import { definePreview } from '@storybook/react-vite';
 
 import addonA11y from '@storybook/addon-a11y';
+// TODO add empty preview
+// import * as designs from '@storybook/addon-designs/preview';
 import addonDocs from '@storybook/addon-docs';
 import { DocsContext } from '@storybook/addon-docs/blocks';
 import addonThemes from '@storybook/addon-themes';
@@ -18,6 +19,7 @@ import addonTest from '@storybook/addon-vitest';
 import addonPseudoStates from 'storybook-addon-pseudo-states';
 import { DocsContext as DocsContextProps, useArgs } from 'storybook/preview-api';
 import type { PreviewWeb } from 'storybook/preview-api';
+import { sb } from 'storybook/test';
 import {
   Global,
   ThemeProvider,
@@ -33,6 +35,13 @@ import * as templatePreview from '../core/template/stories/preview';
 import '../renderers/react/template/components/index';
 import { isChromatic } from './isChromatic';
 
+sb.mock(import('../core/template/stories/test/ModuleMocking.utils'));
+sb.mock(import('../core/template/stories/test/ModuleSpyMocking.utils'), { spy: true });
+sb.mock(import('../core/template/stories/test/ModuleAutoMocking.utils'));
+sb.mock(import('lodash-es'));
+sb.mock(import('lodash-es/add'));
+sb.mock(import('lodash-es/sum'));
+
 const { document } = global;
 globalThis.CONFIG_TYPE = 'DEVELOPMENT';
 

code/.storybook/utils/todo.tsx

@@ -0,0 +1,3 @@
+export function getTodos() {
+  return ['some todo'];
+}

code/__mocks__/lodash-es.js

@@ -0,0 +1,3 @@
+export default {
+  VERSION: '1.0.0-mocked!',
+};

code/__mocks__/lodash-es/add.js

@@ -0,0 +1,5 @@
+function add(a, b) {
+  return 'mocked 3';
+}
+
+export default add;

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

@@ -29,7 +29,6 @@ import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
 // ! Relative import to prebundle it without needing to depend on the Vite builder
-import { INCLUDE_CANDIDATES } from '../../../../builders/builder-vite/src/constants';
 import { withoutVitePlugins } from '../../../../builders/builder-vite/src/utils/without-vite-plugins';
 import type { InternalOptions, UserOptions } from './types';
 

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -117,23 +117,24 @@ export async function generateModernIframeScriptCodeFromPreviews(options: {
    */
   const code = dedent`
   import { setup } from 'storybook/internal/preview/runtime';
-
+  
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
-
+  
   setup();
-
+  
   import { composeConfigs, PreviewWeb } from 'storybook/preview-api';
   import { isPreview } from 'storybook/internal/csf';
   import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
-
+  
   ${options.isCsf4 ? previewFileImport : imports.join('\n')}
   ${getPreviewAnnotationsFunction}
-
+  
   window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
-
+  
   window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
-
+  
   ${generateHMRHandler()};
+
   `.trim();
   return code;
 }

code/builders/builder-vite/src/vite-config.ts

@@ -85,7 +85,6 @@ export async function commonConfig(
 }
 
 export async function pluginConfig(options: Options) {
-  const frameworkName = await getFrameworkName(options);
   const build = await options.presets.apply('build');
 
   const externals: Record<string, string> = globalsNameReferenceMap;

code/builders/builder-webpack5/src/loaders/export-order-loader.ts

@@ -17,37 +17,40 @@ export default async function loader(
     const magicString = new MagicString(source);
 
     // Trying to parse as ES module
-    try {
-      // Do NOT remove await here. The types are wrong! It has to be awaited,
-      // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
-      const parseResult = await parseEs(source);
-      const namedExportsOrder = (parseResult[1] || [])
-        .map((e) => source.substring(e.s, e.e))
-        .filter((e) => e !== 'default');
-
-      assert(
-        namedExportsOrder.length > 0,
-        'No named exports found. Very likely that this is not a ES module.'
-      );
-
-      magicString.append(
-        `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
-      );
-      // Try to parse as CJS module
-    } catch {
-      await initCjsParser();
-      const namedExportsOrder = (parseCjs(source).exports || []).filter(
-        (e: string) => e !== 'default' && e !== '__esModule'
-      );
-
-      assert(
-        namedExportsOrder.length > 0,
-        'No named exports found. Very likely that this is not a CJS module.'
-      );
-
-      magicString.append(
-        `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
-      );
+    if (!source.includes('__namedExportsOrder')) {
+      try {
+        // Do NOT remove await here. The types are wrong! It has to be awaited,
+        // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
+        const parseResult = await parseEs(source);
+        const namedExportsOrder = (parseResult[1] || [])
+          .map((e) => source.substring(e.s, e.e))
+          .filter((e) => e !== 'default');
+
+        assert(
+          namedExportsOrder.length > 0,
+          'No named exports found. Very likely that this is not a ES module.'
+        );
+
+        magicString.append(
+          `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+        );
+
+        // Try to parse as CJS module
+      } catch {
+        await initCjsParser();
+        const namedExportsOrder = (parseCjs(source).exports || []).filter(
+          (e: string) => e !== 'default' && e !== '__esModule'
+        );
+
+        assert(
+          namedExportsOrder.length > 0,
+          'No named exports found. Very likely that this is not a CJS module.'
+        );
+
+        magicString.append(
+          `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+        );
+      }
     }
 
     return callback(null, magicString.toString(), map, meta);

code/core/package.json

@@ -83,6 +83,14 @@
       "import": "./dist/core-server/presets/common-override-preset.js",
       "require": "./dist/core-server/presets/common-override-preset.cjs"
     },
+    "./internal/core-server/presets/webpack/loaders/webpack-automock-loader": {
+      "import": "./dist/core-server/presets/webpack/loaders/webpack-automock-loader.js",
+      "require": "./dist/core-server/presets/webpack/loaders/webpack-automock-loader.cjs"
+    },
+    "./internal/core-server/presets/webpack/loaders/storybook-mock-transform-loader": {
+      "import": "./dist/core-server/presets/webpack/loaders/storybook-mock-transform-loader.js",
+      "require": "./dist/core-server/presets/webpack/loaders/storybook-mock-transform-loader.cjs"
+    },
     "./internal/highlight": {
       "types": "./dist/highlight/index.d.ts",
       "import": "./dist/highlight/index.js",
@@ -424,6 +432,7 @@
   "files": [
     "dist/**/*",
     "assets/**/*",
+    "templates/**/*",
     "README.md",
     "!src/**/*"
   ],
@@ -439,6 +448,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@vitest/expect": "3.2.4",
+    "@vitest/mocker": "3.2.4",
     "@vitest/spy": "3.2.4",
     "better-opn": "^3.0.2",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@@ -468,6 +478,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
     "@radix-ui/react-slot": "^1.0.2",
+    "@rolldown/pluginutils": "1.0.0-beta.18",
     "@storybook/docs-mdx": "4.0.0-next.1",
     "@storybook/icons": "^1.4.0",
     "@tanstack/react-virtual": "^3.3.0",
@@ -479,6 +490,7 @@
     "@types/ejs": "^3.1.1",
     "@types/find-cache-dir": "^5.0.0",
     "@types/js-yaml": "^4.0.5",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^22.0.0",
     "@types/npmlog": "^7.0.0",
     "@types/picomatch": "^2.3.0",
@@ -528,6 +540,7 @@
     "jsdoc-type-pratt-parser": "^4.0.0",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
+    "lodash": "^4.17.21",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
     "nanoid": "^4.0.2",

code/core/scripts/entries.ts

@@ -18,8 +18,16 @@ export const getEntries = (cwd: string) => {
       'react',
       '@storybook/icons',
     ]),
+
     define('src/core-server/presets/common-override-preset.ts', ['node'], false),
 
+    define('src/core-server/presets/webpack/loaders/webpack-automock-loader.ts', ['node'], false),
+    define(
+      'src/core-server/presets/webpack/loaders/storybook-mock-transform-loader.ts',
+      ['node'],
+      false
+    ),
+
     define('src/highlight/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
 
     define('src/actions/index.ts', ['browser', 'node'], true, ['react'], [], [], true),