storybookjs · ndelangen · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025 · Jun 18, 2025
@@ -1,20 +1,9 @@
 module.exports = {
-  presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }],
-    '@babel/preset-typescript',
-    '@babel/preset-react',
-  ],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
   env: {
-    esm: {
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            modules: false,
-            targets: { node: 'current' },
-          },
-        ],
-      ],
+    test: {
+      presets: ['@babel/preset-typescript'],
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
     },
   },
 };
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.16.0, 22.x]
     steps:
       - uses: actions/checkout@v4
 

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [20.16.0]
     steps:
       - uses: actions/checkout@v4
 
@@ -19,17 +19,19 @@ jobs:
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
 
-      - name: Run unit tests
+      - name: Build
         run: |
           yarn build
+
+      - name: Run unit tests
+        run: |
           yarn test --coverage
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 
       - name: Run test runner
         run: |
-          yarn build
           yarn test-storybook:ci-coverage
 
       - name: Generate code coverage

@@ -3,19 +3,18 @@ name: Typecheck
 on: [push, pull_request]
 
 jobs:
-    typecheck:
-        runs-on: ubuntu-latest
-        steps:
-        - uses: actions/checkout@v2
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
 
-        - name: Use Node.js 20.x
-          uses: actions/setup-node@v1
-          with:
-            node-version: '20.x'
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
 
-        - name: Install dependencies
-          uses: bahmutov/npm-install@v1
-
-        - name: Type check
-          run: yarn tsc
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
 
+      - name: Type check
+        run: yarn tsc
@@ -1 +1 @@
-v18
+v20.16.0
@@ -1,5 +1,9 @@
 module.exports = {
   testMatch: ['**/*.test.ts'],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },
+  transformIgnorePatterns: ['node_modules/(?!(storybook-src)/)'],
   moduleNameMapper: {
     '@storybook/test-runner/playwright/global-setup': '<rootDir>/playwright/global-setup',
     '@storybook/test-runner/playwright/global-teardown': '<rootDir>/playwright/global-teardown',

@@ -15,7 +15,11 @@
     "url": "https://github.com/storybookjs/test-runner"
   },
   "license": "MIT",
-  "author": "shilman",
+  "author": [
+    "shilman",
+    "ndelangen",
+    "yannbf"
+  ],
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -29,7 +33,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "NODE_ENV=production NODE_OPTIONS='--max-old-space-size=8192' tsup",
     "build-storybook": "storybook build",
     "build:watch": "tsup --watch",
     "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
@@ -51,13 +55,22 @@
     "*.{ts,js,tsx,jsx,css,md}": "prettier --write"
   },
   "dependencies": {
+    "@babel/cli": "^7.12.1",
     "@babel/core": "^7.22.5",
     "@babel/generator": "^7.22.5",
+    "@babel/parser": "^7.26.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@babel/template": "^7.22.5",
+    "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.22.5",
     "@jest/types": "^29.6.3",
     "@swc/core": "^1.5.22",
     "@swc/jest": "^0.2.23",
+    "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",
+    "esbuild-register": "^3.6.0",
     "expect-playwright": "^0.8.0",
     "jest": "^29.6.4",
     "jest-circus": "^29.6.4",
@@ -68,50 +81,106 @@
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.0.0",
     "nyc": "^15.1.0",
-    "playwright": "^1.14.0"
+    "playwright": "^1.14.0",
+    "playwright-core": "^1.14.0",
+    "semver": "^7.6.2"
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.6",
+    "@aw-web-design/x-default-browser": "1.4.126",
     "@babel/cli": "^7.12.1",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@storybook/addon-a11y": "next",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-docs": "next",
+    "@storybook/docs-mdx": "4.0.0-next.1",
+    "@storybook/icons": "^1.4.0",
     "@storybook/react-vite": "next",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/cross-spawn": "^6.0.6",
+    "@types/detect-port": "^1.3.0",
+    "@types/diff": "^5.0.9",
+    "@types/ejs": "^3.1.1",
+    "@types/find-cache-dir": "^5.0.0",
     "@types/jest": "^29.0.0",
+    "@types/js-yaml": "^4.0.5",
     "@types/node": "^16.4.1",
     "@types/node-fetch": "^2.6.11",
+    "@types/npmlog": "^7.0.0",
+    "@types/picomatch": "^2.3.0",
+    "@types/prettier": "^3.0.0",
+    "@types/pretty-hrtime": "^1.0.0",
+    "@types/semver": "^7.5.8",
     "@vitejs/plugin-react": "^4.0.3",
+    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
+    "@yarnpkg/fslib": "2.10.3",
+    "@yarnpkg/libzip": "2.3.0",
     "auto": "^11.1.6",
     "babel-jest": "^29.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
+    "browser-dtector": "^3.4.0",
+    "bundle-require": "^5.1.0",
+    "camelcase": "^8.0.0",
     "can-bind-to-host": "^1.1.1",
+    "chai": "^5.1.1",
     "commander": "^9.0.0",
+    "comment-parser": "^1.4.1",
     "concurrently": "^7.0.0",
+    "cross-spawn": "^7.0.6",
+    "diff": "^5.2.0",
+    "es-toolkit": "^1.36.0",
+    "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",
+    "find-up": "^5.0.0",
     "glob": "^10.2.2",
+    "globby": "^14.0.1",
     "husky": "^8.0.0",
     "jest-image-snapshot": "^6.2.0",
+    "js-yaml": "^4.1.0",
+    "leven": "^4.0.0",
     "lint-staged": "^13.0.3",
+    "mlly": "^1.7.4",
+    "nanoid": "^4.0.2",
     "node-fetch": "^2",
+    "npmlog": "^7.0.0",
+    "open": "^8.4.0",
+    "p-limit": "^6.2.0",
+    "package-manager-detector": "^1.1.0",
+    "picocolors": "^1.1.0",
+    "picomatch": "^2.3.0",
+    "picoquery": "^1.4.0",
     "pkg-up": "^5.0.0",
     "prettier": "^2.8.1",
+    "pretty-hrtime": "^1.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "read-pkg-up": "^7.0.1",
-    "storybook": "next",
+    "sirv": "^2.0.4",
+    "slash": "^3.0.0",
+    "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0",
+    "storybook-src": "git+https://github.com/storybookjs/storybook.git#next",
+    "strip-ansi": "^7.1.0",
+    "strip-json-comments": "^5.0.1",
+    "telejson": "8.0.0",
     "tempy": "^1.0.1",
+    "tiny-invariant": "^1.3.1",
+    "tinyspy": "^3.0.2",
     "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",
+    "tsconfig-paths": "^4.2.0",
     "tsup": "^6.5.0",
+    "type-fest": "^4.18.1",
     "typescript": "~4.9.4",
+    "unique-string": "^3.0.0",
     "vite": "^6.3.2",
-    "wait-on": "^7.2.0"
+    "wait-on": "^7.2.0",
+    "watchpack": "^2.2.0"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0"
+    "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0"
   },
   "engines": {
     "node": ">=20.0.0"

@@ -13,7 +13,9 @@ describe('getJestConfig', () => {
         '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
           require.resolve('@storybook/test-runner/playwright/transform')
         )}/transform.js`,
-        '^.+\\.[jt]sx?$': path.resolve('../test-runner/node_modules/@swc/jest'),
+        '^.+\\.[jt]sx?$': expect.arrayContaining([
+          path.resolve('../test-runner/node_modules/@swc/jest'),
+        ]),
       },
       snapshotSerializers: [path.resolve('../test-runner/node_modules/jest-serializer-html')],
       testEnvironmentOptions: {
@@ -83,7 +85,7 @@ describe('getJestConfig', () => {
         '^.+\\.(story|stories)\\.[jt]sx?$': `${path.dirname(
           require.resolve('@storybook/test-runner/playwright/transform')
         )}/transform.js`,
-        '^.+\\.[jt]sx?$': path.dirname(require.resolve('@swc/jest')),
+        '^.+\\.[jt]sx?$': expect.arrayContaining([path.dirname(require.resolve('@swc/jest'))]),
       },
       snapshotSerializers: [path.dirname(require.resolve('jest-serializer-html'))],
       testEnvironmentOptions: {

@@ -1,7 +1,8 @@
-import path from 'path';
-import { getProjectRoot } from 'storybook/internal/common';
+import path from 'node:path';
 import type { Config } from '@jest/types';
 
+import { getProjectRoot } from '../util/projectRoot';
+
 const getTestRunnerPath = () => process.env.STORYBOOK_TEST_RUNNER_PATH ?? '@storybook/test-runner';
 
 /**
@@ -83,7 +84,7 @@ export const getJestConfig = (): Config.InitialOptions => {
       '^.+\\.(story|stories)\\.[jt]sx?$': require.resolve(
         `${TEST_RUNNER_PATH}/playwright/transform`
       ),
-      '^.+\\.[jt]sx?$': swcJestPath,
+      '^.+\\.[jt]sx?$': [swcJestPath, { jsc: { target: 'es2022' } }],
     },
     snapshotSerializers: [jestSerializerHtmlPath],
     testEnvironmentOptions: {

@@ -1,7 +1,15 @@
-import { TestPrefixer, TransformOptions, transformCsf } from './transformCsf';
+import { type TestPrefixer, type TransformOptions, transformCsf } from './transformCsf';
 import { testPrefixer } from '../playwright/transformPlaywright';
 import template from '@babel/template';
 
+jest.mock('storybook/internal/common', () => ({}));
+jest.mock('esbuild-register/dist/node', () => ({
+  register: jest.fn(),
+}));
+jest.mock('../util/serverRequire', () => ({
+  serverRequire: jest.fn(),
+}));
+
 describe('transformCsf', () => {
   it('inserts a no-op test if there are no stories', () => {
     const csfCode = `

@@ -1,9 +1,8 @@
 /* eslint-disable no-underscore-dangle */
 import { toId, storyNameFromExport, combineTags } from 'storybook/internal/csf';
-import { loadCsf } from 'storybook/internal/csf-tools';
-import * as t from '@babel/types';
-import generate from '@babel/generator';
-import dedent from 'ts-dedent';
+import { CsfFile, loadCsf } from 'storybook/internal/csf-tools';
+import { generate, types as t } from 'storybook/internal/babel';
+import { dedent } from 'ts-dedent';
 
 import { getTagOptions } from '../util/getTagOptions';
 
@@ -28,7 +27,7 @@ export interface TransformOptions {
   skipTags?: string[];
 }
 
-export const prefixFunction = ({
+const prefixFunction = ({
   key,
   testPrefixer,
   title,
@@ -113,7 +112,10 @@ export const transformCsf = (
 ) => {
   const { includeTags, excludeTags, skipTags } = getTagOptions();
 
-  const csf = loadCsf(code, { makeTitle: makeTitle ?? ((userTitle: string) => userTitle) });
+  const csf: CsfFile = loadCsf(code, {
+    fileName: 'test.js',
+    makeTitle: makeTitle ?? ((userTitle: string) => userTitle),
+  });
   csf.parse();
 
   const storyExports = Object.keys(csf._stories);
@@ -124,7 +126,6 @@ export const transformCsf = (
       const annotations = csf._storyAnnotations[key];
       acc[key] = {};
       if (annotations?.play) {
-        // @ts-expect-error type mismatch – check later
         acc[key].play = annotations.play;
       }