BREAKING: ESM only, Support for Storybook 10 and Jest 30

[yannbf]

Closes #

What I did

This PR refactors the test-runner so it doesn't use jest-playwright-preset directly, allowing it to support Jest 30.
Additionally it adds support for Storybook 10, and as a requirement it becomes ESM only, therefore having breaking changes. It will only support Storybook 10 and higher

Checklist for Contributors

Manual testing

• Set up or choose a project using Jest 30
• Add Storybook 10: npx storybook@next init
• Add the test-runner npm install --save-dev @storybook/test-runner@0.23.1--canary.af6bf62.0
• Test things out, see whether npm run test-storybook works as intended
  • normal run
  • watch mode
  • pass some Jest 30 flags
• More info about Jest 30 at https://jestjs.io/blog/2025/06/04/jest-30#breaking-changes

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)

[Sidnioulz]

Had to monkey patch a few things, but then got tests to pass on a fresh Nextjs x Turbopack repo.

Watch mode works, tests pass and fail when expected.

I'll give more feedback later as I'm battling with Istambul to test coverage.

[Sidnioulz]

Not sure if these are known issues or SB10 regressions, but the follow test-runner features don't work:

• DOM snapshot

    toMatchSnapshot() must be called during the test

      14 |     const elementHandler = await page.$('#storybook-root');
      15 |     const innerHTML = await elementHandler!.innerHTML();
    > 16 |     expect(innerHTML).toMatchSnapshot();
         |                       ^
      17 |   },
      18 | };
      19 | export default config;

This seems to be something Jest is responsible for rather than Playwright. Has anything changed within Jest that could be relevant here?

• Image snapshot

TypeError: Cannot read properties of undefined (reading '_counters')

      15 |
      16 |     const image = await page.screenshot();
    > 17 |     expect(image).toMatchImageSnapshot();
         |                   ^
      18 |
      19 |     const elementHandler = await page.$('#storybook-root');
      20 |     const innerHTML = await elementHandler!.innerHTML();

jest-image-snapshot should support Jest 30. I'm not sure if this has to do with when postVisit is called.

[Sidnioulz]

Ejecting does not work (import path to fix).

Once the path is fixed, config overrides work. I can change the list of files to treat as ESM or the transform functions.

[ndelangen]

@jasikpark @IanVS This is the PR we're going to go for for SB10, can you assist testing this?
We've tested this on the storybook repo already.

This is the canary version of this PR:
@storybook/test-runner@0.23.1--canary.e482a2f.0

🙏

[IanVS]

Nice! Updating from the canary of the other PR to this one seems to have cut down on our dependencies quite a lot:

It seems to be working well in our "degenerate" codebase. 😆

[gregberge]

I see you are working on v10 support here, if it helps, tests are failing on v10: https://github.com/argos-ci/argos-javascript/actions/runs/18688211014/job/53286617759?pr=240

[IanVS]

@gregberge it would probably be good to open an issue to report this problem, and share any relevant config there.

[Sidnioulz]

I see you are working on v10 support here, if it helps, tests are failing on v10: https://github.com/argos-ci/argos-javascript/actions/runs/18688211014/job/53286617759?pr=240

@gregberge it would probably be good to open an issue to report this problem, and share any relevant config there.

I think it's very much relevant to this PR. @yannbf has removed the process endpoint. The Jest 30 doc says:

Asynchronous transpilation can fall back to the synchronous process call if processAsync is unimplemented, but synchronous transpilation cannot use the asynchronous processAsync call. If your codebase is ESM only, implementing the async variants are sufficient. Otherwise, if any code is loaded through require (including createRequire from within ESM), then you need to implement the synchronous process variant.

As we're moving to ESM only, do we still support our callees writing CJS code and importing us in CJS codebases? If so, we might need to preserve the sync process endpoint.

[gregberge]

@yannbf can we add back the synchronous process?

Nevermind, it was because the source code was in JS and not TS. I migrated on TS and it's fixed.