storybook: Switch from `@storybook/test-runner` to `@storybook/addon-vitest` by anomiex · Pull Request #47802 · Automattic/jetpack

anomiex · 2026-03-26T16:35:13Z

Proposed changes

@storybook/test-runner does not seem very well maintained upstream; the package's readme itself urges switching to @storybook/addon-vitest when possible.

This also require switching from building the storybook using webpack to using vite. Which turned out to be a somewhat big lift, several vite/esbuild issues needed working around.

Other information

Generate changelog entries for this PR (using AI).

Related product discussion/links

None

Does this pull request change what data or activity we track or use?

No

Testing instructions

CI storybook test run happy?
CI storybook build happy?
In projects/js-packages/storybook, try running pnpm storybook:build, pnpm storybook:test, and pnpm storybook:dev. Do they all work?

…vitest` `@storybook/test-runner` does not seem very well maintained upstream; the package's readme itself urges switching to `@storybook/addon-vitest` when possible. This also require switching from building the storybook using webpack to using vite. Which turned out to be a somewhat big lift, several vite/esbuild issues needed working around.

anomiex · 2026-03-26T16:36:11Z

pnpm-lock.yaml

-
-  expect-playwright@0.8.0:
-    resolution: {integrity: sha512-+kn8561vHAY+dt+0gMqqj1oY+g5xWrsuGMk4QGxotT2WS545nVqqjs37z6hrYfIuucwqthzwJfCJUEYqixyljg==}
-    deprecated: ⚠️ The 'expect-playwright' package is deprecated. The Playwright core assertions (via @playwright/test) now cover the same functionality. Please migrate to built-in expect. See https://playwright.dev/docs/test-assertions for migration.


Getting rid of this and a few other deprecated deps is really one of my main motivations for doing this. 😀

github-actions · 2026-03-26T16:36:13Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/storybook-use-vitest branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/storybook-use-vitest

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/storybook-use-vitest

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-03-26T16:36:21Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

github-actions · 2026-03-26T16:36:22Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Boost plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

jp-launch-control · 2026-03-26T16:53:51Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

…-vitest

tbradsha

All the commands seemed to work. I needed to install Playwright before running tests (which is what the workflow does too).

Notably, the time to preview went from 15s to well under a second. And nice dependency cleanup!

The config is largely over my head, but things seem to run fine. trunk had a few errors that this branch did not (the jetpackConfig one is hacked around, but I'm not sure why the other one no longer shows):

▲  Module not found: Error: Can't resolve 'jetpackConfig' in
│  '/Users/tmb/GitHub/jetpack/projects/js-packages/config/src'
│
▲  Module not found: Error: Can't resolve '@emotion/is-prop-valid' in
│  '/Users/tmb/GitHub/jetpack/node_modules/.pnpm/framer-motion@11.18.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/dom/utils'

tbradsha · 2026-03-26T18:25:39Z

projects/js-packages/storybook/storybook/main.js

-			plugin.definitions[ 'process.env' ][ key ] = JSON.stringify( customEnvVariables[ key ] );
-		} );
+				// Stub `@automattic/jetpack-config`, the whole `jetpackConfig` thing confuses Storybook/vite/vitest/esbuild/rolldown/etc to no end.
+				// If you're trying to use those tools for something else, consider somehow fixing `@automattic/jetpack-config` instead of perpetuating this hack.


tbradsha · 2026-03-26T18:31:19Z

projects/js-packages/storybook/storybook/projects.js

+	'projects/plugins/protect/src/js/components',
+].map( project => path.join( basedir, project ) );


Presuming we're always in projects, we could consider something like:

... 'projects/plugins/protect/src/js/components', ].map( project => path.join( basedir, 'projects', project ) );

That would produce /path/to/jetpack/projects/projects/plugins/protect/src/js/components. Unless you meant removing projects/ from all the entries in the array above too but forgot to do that, in which case I think I'd rather keep the "full" path in the array. Less confusing that way.

Yes, I meant to remove projects/ from all the entries above in my example. But no worries.

The chart svg is displaying inline rather than block, which means the containing block wants to leave an additional few px for descenders. This normally doesn't matter, since the flexbox constraints and `min-height: 0` on the parent divs usually winds up restricting the container's height regardless. In headless Chrome, however, this isn't working: the container doesn't shrink away the extra px for the descenders, then `withResponsive` resizes the chart to take up the extra space, which makes the container expand by a few more pixels, rinse, repeat. Setting the svg as `display: block` prevents the space being left for the descenders in the first place, so the whole tag stack stays at the intended size.

anomiex · 2026-03-27T19:37:11Z

projects/js-packages/charts/src/charts/private/chart-layout/chart-layout.module.scss

+	// The svg displaying inline includes a few px for descenders, which
+	// confuses some browser environments (e.g. headless Chrome) into
+	// constantly growing the container. Setting it to display as block avoids
+	// that.


@Automattic/red I think Charts is your thing, does this seem like a good fix for the problem to you? Thanks. 🙂

…-vitest

anomiex requested a review from a team March 26, 2026 16:35

anomiex self-assigned this Mar 26, 2026

anomiex added [Status] Needs Review This PR is ready for review. [Pri] Normal labels Mar 26, 2026

anomiex commented Mar 26, 2026

View reviewed changes

github-actions bot added [JS Package] AI Client [JS Package] Storybook [Plugin] Boost A feature to speed up the site and improve performance. Actions GitHub actions used to automate some of the work around releases and repository management RNA labels Mar 26, 2026

Merge remote-tracking branch 'origin/trunk' into update/storybook-use…

3e97bc1

…-vitest

tbradsha previously approved these changes Mar 26, 2026

View reviewed changes

Update to vite 8 to avoid storybookjs/storybook#33797

78c1331

anomiex dismissed tbradsha’s stale review via 78c1331 March 26, 2026 19:08

anomiex added 2 commits March 26, 2026 15:43

Set timeout, suddenly it's slower.

332d89e

github-actions bot added the [JS Package] Charts label Mar 27, 2026

anomiex commented Mar 27, 2026

View reviewed changes

Merge remote-tracking branch 'origin/trunk' into update/storybook-use…

9defa77

…-vitest

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

storybook: Switch from `@storybook/test-runner` to `@storybook/addon-vitest`#47802

storybook: Switch from `@storybook/test-runner` to `@storybook/addon-vitest`#47802
anomiex wants to merge 6 commits intotrunkfrom
update/storybook-use-vitest

anomiex commented Mar 26, 2026

Uh oh!

anomiex Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

jp-launch-control bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

tbradsha left a comment

Uh oh!

tbradsha Mar 26, 2026

Uh oh!

tbradsha Mar 26, 2026

Uh oh!

anomiex Mar 26, 2026

Uh oh!

tbradsha Mar 26, 2026

Uh oh!

anomiex Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		'projects/plugins/protect/src/js/components',
		].map( project => path.join( basedir, project ) );

Conversation

anomiex commented Mar 26, 2026

Proposed changes

Other information

Related product discussion/links

Does this pull request change what data or activity we track or use?

Testing instructions

Uh oh!

anomiex Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

tbradsha left a comment

Choose a reason for hiding this comment

Uh oh!

tbradsha Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

tbradsha Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

anomiex Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

tbradsha Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

anomiex Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Mar 26, 2026 •

edited

Loading

github-actions bot commented Mar 26, 2026 •

edited

Loading

jp-launch-control bot commented Mar 26, 2026 •

edited

Loading