Prepare for SB10 by ndelangen · Pull Request #569 · storybookjs/test-runner

ndelangen · 2025-06-18T14:51:24Z

What I did

Storybook 10 wil be ESM-only.

In V9 storybook/internal/common exposes a utility-function called serverRequire. This function will either no longer exist or become async, in v10, due to the ESM-only project.

I've experimented with making this code accept the async nature of the util-function, but I couldn't get it to work.

I then experimented with having some glue-code that makes the async util-function sync again.
This mostly worked.

I then experimented (together with @shilman) on the solution where instead of actually loading/require-ing the main.ts file, to AST-read it.
This would have worked, it it wasn't for the fact that in this very repo, a main.ts exists that cannot be used for this purpose.

I finally decided that I'd essentially back-port the old serverRequire into the test-runner.

The test-runner now depends on esbuild and esbuild-register so it's able to load the main.ts file.

Checklist for Contributors

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes in this repository
Request documentation updates in the test-runner docs website

Checklist for Maintainers

Make sure this PR contains one of the labels below:
Available labels
- skip-release: Skip any releases, e.g., documentation only changes, CI config etc.
- patch: Upgrade patch version (e.g. 0.0.x)
- minor: Upgrade patch version (e.g. 0.x.0)
- major: Upgrade patch version (e.g. x.0.0)

… be async, which this package cannot deal with, it seems

…e esbuild-register dependency in package.json and yarn.lock

…Require module

shilman

This looks fine to me. I don't understand why we can't provide that functionality from Storybook in SB10, but I'll take your word for it!

…t external modules

src/util/serverRequire.ts

tsup.config.ts

…dules from external dependencies

codecov · 2025-06-19T09:00:20Z

Codecov Report

Attention: Patch coverage is 80.00000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 92.53%. Comparing base (6bff30e) to head (de6531a).
Report is 81 commits behind head on next.

Files with missing lines	Patch %	Lines
src/util/serverRequire.ts	80.00%	2 Missing ⚠️
src/util/getTestRunnerConfig.ts	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             next     #569      +/-   ##
==========================================
- Coverage   93.19%   92.53%   -0.67%     
==========================================
  Files          15       16       +1     
  Lines         294      308      +14     
  Branches       78       82       +4     
==========================================
+ Hits          274      285      +11     
- Misses         20       23       +3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…rything is becoming ESM-only

…mit for test runs

…flow to streamline test execution and coverage reporting

transform all to CJS in tests

ndelangen · 2025-06-24T10:14:21Z

jest.config.js

+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },


Is this "the recipe"? 🤔💭❗

…tion of playwright-core and @babel/plugin-transform-modules-commonjs, and upgrade several Babel packages to their latest versions for improved compatibility and performance.

… utility functions for story normalization, and updating Jest configuration for improved compatibility with Playwright. This includes the introduction of a project root utility and normalization logic for story entries, alongside various type imports for better type safety.

…ases in hooks.test.ts to cast page as 'any' for compatibility with Playwright. This enhances type safety and ensures proper function calls in the test suite.

…t to the latest ESM-only branch for improved compatibility with modern module systems.

…WC Jest transformer settings, enhancing compatibility with modern JavaScript features.

…ommit for improved compatibility with modern module systems.

…0.0-beta.0, and add new dependencies for improved compatibility and functionality.

…arn.lock to point to the latest ESM branch, and change TypeScript module resolution to 'esnext' for improved compatibility with modern JavaScript features.

IanVS · 2025-08-25T15:25:18Z

I tested out the canary in my project along with SB10, and it works well except that the type definitions file dist/index.d.ts is missing.

ndelangen · 2025-09-04T08:14:08Z

@IanVS thanks for trying this out ❤️

Seems you're correct, the type file(s) are completely missing in the canary.
https://www.npmjs.com/package/@storybook/test-runner/v/0.23.1--canary.d0c3175.0?activeTab=code

@shilman I'll let you be the judge if that should block the sb10 final release, but my guess is, it does.
If so, we'll have to spend more time on the test-runner.

A cheap way out would be to write the definition files manually.

jasikpark · 2025-09-11T15:18:28Z

tsup.config.ts

@@ -21,6 +50,7 @@ export default defineConfig([
    format: ['esm'],
    dts: false,


would setting this to true enable having a .d.ts for the package, or are these types normally generated otherwise? https://www.jsdocs.io/package/tsup#:~:text=dts?:%20boolean%20|%20string%20|%20DtsConfig;

❯ yarn build CLI Building entry: ./src/index.ts, ./src/test-storybook.ts CLI Using tsconfig: tsconfig.json CLI tsup v6.7.0 CLI Using tsup config: /Users/calebjasik/Git/test-runner/tsup.config.ts CLI Building entry: ./src/setup-page-script.ts CLI Using tsconfig: tsconfig.json CLI tsup v6.7.0 CLI Using tsup config: /Users/calebjasik/Git/test-runner/tsup.config.ts CLI Target: es2020 CJS Build start CLI Target: es2020 ESM Build start ESM dist/setup-page-script.mjs 15.96 KB ESM ⚡️ Build success in 12ms DTS Build start "default" is imported from external module "fs" but never used in "dist/index.js". "statSync" is imported from external module "fs" but never used in "dist/test-storybook.js". "copyFile" is imported from external module "fs/promises" but never used in "dist/chunk-RZYS5LNG.js". "stripVTControlCharacters" is imported from external module "util" but never used in "dist/chunk-RZYS5LNG.js". "execFileSync" is imported from external module "child_process" but never used in "dist/chunk-RZYS5LNG.js". DTS ⚡️ Build success in 1511ms DTS dist/setup-page-script.d.ts 567.00 B CJS dist/index.js 193.97 KB CJS dist/test-storybook.js 1.68 MB CJS dist/chunk-RZYS5LNG.js 5.93 MB CJS ⚡️ Build success in 5666ms

Eh, for some reason it only generates a type file for setup-page-script.d.ts 🤷

LOL nvm, I forgot to enable for all of the file entries. Looks like the build fails when enabling that though...

❯ yarn build CLI Building entry: ./src/index.ts, ./src/test-storybook.ts CLI Using tsconfig: tsconfig.json CLI tsup v6.7.0 CLI Using tsup config: /Users/calebjasik/Git/test-runner/tsup.config.ts CLI Building entry: ./src/setup-page-script.ts CLI Using tsconfig: tsconfig.json CLI tsup v6.7.0 CLI Using tsup config: /Users/calebjasik/Git/test-runner/tsup.config.ts CLI Target: es2020 CJS Build start CLI Target: es2020 ESM Build start ESM dist/setup-page-script.mjs 15.96 KB ESM ⚡️ Build success in 33ms DTS Build start DTS Build start "default" is imported from external module "fs" but never used in "dist/index.js". "statSync" is imported from external module "fs" but never used in "dist/test-storybook.js". "copyFile" is imported from external module "fs/promises" but never used in "dist/chunk-RZYS5LNG.js". "stripVTControlCharacters" is imported from external module "util" but never used in "dist/chunk-RZYS5LNG.js". "execFileSync" is imported from external module "child_process" but never used in "dist/chunk-RZYS5LNG.js". DTS ⚡️ Build success in 1759ms DTS dist/setup-page-script.d.ts 567.00 B src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Identifier' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'StringLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NumericLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NullLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BooleanLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'RegExpLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TemplateLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BigIntLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'DecimalLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ArrayExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'AssignmentExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BinaryExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'CallExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ConditionalExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'FunctionExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'LogicalExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'MemberExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NewExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ObjectExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'SequenceExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ParenthesizedExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ThisExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'UnaryExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'UpdateExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ArrowFunctionExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ClassExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ImportExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'MetaProperty' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Super' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TaggedTemplateExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'YieldExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'AwaitExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Import' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'OptionalMemberExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'OptionalCallExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TypeCastExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'JSXElement' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'JSXFragment' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BindExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'DoExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'RecordExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TupleExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ModuleExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TopicReference' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelineTopicExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelineBareFunction' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelinePrimaryTopicReference' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSInstantiationExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSAsExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSSatisfiesExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSTypeAssertion' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSNonNullExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. Error: error occured in dts build at Worker.<anonymous> (/Users/calebjasik/Git/test-runner/node_modules/tsup/dist/index.js:2281:26) at Worker.emit (node:events:519:28) at MessagePort.<anonymous> (node:internal/worker:263:53) at [nodejs.internal.kHybridDispatch] (node:internal/event_target:820:20) at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28) DTS Build error RollupError: Failed to compile. Check the logs above. at error (/Users/calebjasik/Git/test-runner/node_modules/rollup/dist/shared/rollup.js:353:30) at Object.error (/Users/calebjasik/Git/test-runner/node_modules/rollup/dist/shared/rollup.js:1721:20) at Object.error (/Users/calebjasik/Git/test-runner/node_modules/rollup/dist/shared/rollup.js:25627:42) at generateDtsFromTs (/Users/calebjasik/Git/test-runner/node_modules/tsup/dist/rollup.js:7498:22) at /Users/calebjasik/Git/test-runner/node_modules/tsup/dist/rollup.js:7505:59 at _nullishCoalesce (/Users/calebjasik/Git/test-runner/node_modules/tsup/dist/rollup.js:1:198) at Object.transform (/Users/calebjasik/Git/test-runner/node_modules/tsup/dist/rollup.js:7505:18) at /Users/calebjasik/Git/test-runner/node_modules/rollup/dist/shared/rollup.js:1914:40 src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Identifier' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'StringLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NumericLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NullLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BooleanLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'RegExpLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TemplateLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BigIntLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'DecimalLiteral' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ArrayExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'AssignmentExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BinaryExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'CallExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ConditionalExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'FunctionExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'LogicalExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'MemberExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'NewExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ObjectExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'SequenceExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ParenthesizedExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ThisExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'UnaryExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'UpdateExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ArrowFunctionExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ClassExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ImportExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'MetaProperty' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Super' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TaggedTemplateExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'YieldExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'AwaitExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'Import' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'OptionalMemberExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'OptionalCallExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TypeCastExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'JSXElement' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'JSXFragment' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'BindExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'DoExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'RecordExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TupleExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'ModuleExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TopicReference' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelineTopicExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelineBareFunction' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'PipelinePrimaryTopicReference' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSInstantiationExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSAsExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSSatisfiesExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSTypeAssertion' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. src/csf/transformCsf.ts(30,14): error TS4023: Exported variable 'prefixFunction' has or is using name 'TSNonNullExpression' from external module "/Users/calebjasik/Git/test-runner/node_modules/storybook/dist/babel/index" but cannot be named. CJS dist/index.js 193.97 KB CJS dist/test-storybook.js 1.68 MB CJS dist/chunk-RZYS5LNG.js 5.93 MB CJS ⚡️ Build success in 6133ms

I'll have a quick look, maybe fixing it is really easy.

Thanks @jasikpark that pushed me in the right direction.

The newest canary should have types
cc @IanVS

@storybook/test-runner@0.23.1--canary.2c9779a.0
see: https://github.com/storybookjs/test-runner/actions/runs/17668286147/job/50214128006

Works great! 🙌

…te import statements to use 'node:' prefix in src/test-storybook.ts, and refactor prefixFunction declaration in transformCsf.ts.

IanVS · 2025-09-18T13:04:31Z

package.json

    "@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",


This looks pretty annoying to keep up to date. Is the intention that each time esbuild releases a new version, this will be updated? Why not use >= 0.18.0?

You're right @IanVS

However the version range you mention promises to be compatible with "all future versions" of esbuild.

I think that's a promise that can't be kept.
And it locks libraries into a really bad spot.. if they release a new major version, they risk breaking the ecosystem.

That's fair. Though I think you can use 0.18 - 0.25 just to keep the list from becoming unmanageably long.

IanVS · 2025-09-18T13:06:40Z

package.json

+    "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",


There are a lot of devDependencies being added here, and they don't all seem to be used. For example, searching for strip-ansi in this PR returns no results.

Yes, I honestly never intentioned this to be the final way we do things.

So I performed no cleanup.

Though devDependencies should not impact users/usage, so the impact is neglectable.

Not users, but it will have an impact on contributors, since they'll have to download all of these. Not that it's a huge deal, but it's also somewhat confusing to see dependencies that aren't used in a package.json. But I wouldn't want a cleanup to block getting this released.

jasikpark · 2025-09-22T21:28:18Z

This has been working great for us @DefinedNet, has even reduced some timeout and flakey tests we've had in the past, possibly!

ndelangen · 2025-10-20T08:52:32Z

Replaced by #571

stop using serverRequire from storybook common, because it's about to…

a064053

… be async, which this package cannot deal with, it seems

ndelangen requested review from kasperpeulen and yannbf as code owners June 18, 2025 14:51

ndelangen self-assigned this Jun 18, 2025

ndelangen added 2 commits June 18, 2025 16:53

Update Node.js version to 20.16.0 in .nvmrc and workflows; reintroduc…

958c7be

…e esbuild-register dependency in package.json and yarn.lock

Refactor typecheck workflow and update test mocks to use local server…

fd3c654

…Require module

ndelangen requested review from JReinhold and shilman June 18, 2025 15:01

ndelangen added internal Changes only affect the internal API dependencies Update one or more dependencies version maintenance compatibility with other tools labels Jun 18, 2025

shilman approved these changes Jun 18, 2025

View reviewed changes

ndelangen added 5 commits June 19, 2025 00:12

Add error handling to getTestRunnerConfig function

b6bd5f6

Update tsup configuration to include Storybook dependencies and adjus…

2094e4b

…t external modules

Add semver dependency to package.json and update yarn.lock

7fd5891

Remove console error logging from getTestRunnerConfig function

f4b51e6

Enable treeshaking in tsup configuration for optimized builds

49024ff

ndelangen commented Jun 19, 2025

View reviewed changes

src/util/serverRequire.ts Outdated Show resolved Hide resolved

ndelangen commented Jun 19, 2025

View reviewed changes

tsup.config.ts Outdated Show resolved Hide resolved

Update tsup configuration to exclude additional Storybook internal mo…

de6531a

…dules from external dependencies

ndelangen added 5 commits June 24, 2025 10:19

bundle in the whole core of storybook into the test-runner, since eve…

d23885c

…rything is becoming ESM-only

Update GitHub Actions workflow to set NODE_ENV and increase memory li…

2a1e346

…mit for test runs

Refactor test commands in package.json and update GitHub Actions work…

8fcb31b

…flow to streamline test execution and coverage reporting

babel everything

4da85c2

Merge pull request #570 from storybookjs/norbert/bundle-in-storybook

52a3bda

transform all to CJS in tests

ndelangen commented Jun 24, 2025

View reviewed changes

ndelangen added 2 commits June 24, 2025 12:29

Update package.json to include multiple authors for better collaboration

9afc71c

Update dependencies in package.json and yarn.lock, including the addi…

6552af9

…tion of playwright-core and @babel/plugin-transform-modules-commonjs, and upgrade several Babel packages to their latest versions for improved compatibility and performance.

ndelangen added 12 commits June 24, 2025 19:44

Remove TypeScript error suppression in transformCsf and update test c…

020e626

…ases in hooks.test.ts to cast page as 'any' for compatibility with Playwright. This enhances type safety and ensures proper function calls in the test suite.

Update storybook-src dependency in package.json and yarn.lock to poin…

8609766

…t to the latest ESM-only branch for improved compatibility with modern module systems.

Update Jest configuration to support ES2022 syntax by modifying the S…

f3d1819

…WC Jest transformer settings, enhancing compatibility with modern JavaScript features.

bump to new non-version-bundled

9fa10a3

fix tests

7e6c71c

Update storybook-src dependency in yarn.lock to point to the latest c…

db60cb3

…ommit for improved compatibility with modern module systems.

Update storybook version in package.json and yarn.lock to support 10.…

f437d4a

…0.0-beta.0, and add new dependencies for improved compatibility and functionality.

Merge branch 'next' into norbert/asyng-serverRequire-alt

5cf9d6b

Update storybook and storybook-src dependencies in package.json and y…

dbc63e2

…arn.lock to point to the latest ESM branch, and change TypeScript module resolution to 'esnext' for improved compatibility with modern JavaScript features.

Discard changes to tsconfig.json

29f1ef4

Discard changes to src/playwright/transformPlaywrightJson.ts

d0c3175

jasikpark reviewed Sep 11, 2025

View reviewed changes

Enable TypeScript declaration file generation in tsup.config.ts, upda…

2c9779a

…te import statements to use 'node:' prefix in src/test-storybook.ts, and refactor prefixFunction declaration in transformCsf.ts.

IanVS reviewed Sep 18, 2025

View reviewed changes

ndelangen closed this Oct 20, 2025

		@@ -21,6 +50,7 @@ export default defineConfig([
		format: ['esm'],
		dts: false,

Conversation

ndelangen commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Manual testing

Documentation

Checklist for Maintainers

Uh oh!

shilman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Jun 19, 2025

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

IanVS commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndelangen commented Sep 4, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jasikpark Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jasikpark Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ndelangen Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jasikpark commented Sep 22, 2025

Uh oh!

ndelangen commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ndelangen commented Jun 18, 2025 •

edited

Loading

IanVS commented Aug 25, 2025 •

edited

Loading

jasikpark Sep 11, 2025 •

edited

Loading

jasikpark Sep 11, 2025 •

edited

Loading

ndelangen Sep 18, 2025 •

edited

Loading