Skip to content

chore(swc): upgrade Storybook to 10.4.1 and Vitest to 4.1.7#6343

Merged
pfulton merged 4 commits into
mainfrom
rcarvalho/chore-upgrade-storybook-10-4-1-and-vitest-4-1-7
May 29, 2026
Merged

chore(swc): upgrade Storybook to 10.4.1 and Vitest to 4.1.7#6343
pfulton merged 4 commits into
mainfrom
rcarvalho/chore-upgrade-storybook-10-4-1-and-vitest-4-1-7

Conversation

@rubencarvalho
Copy link
Copy Markdown
Contributor

@rubencarvalho rubencarvalho commented May 27, 2026

Description

Upgrades Storybook and Vitest to their latest versions, and fixes two issues in the Storybook dev server: the coverage report link returning 404, and a startup warning about an unmatched story glob.

Package versions bumped

Package Before After
storybook 10.3.5 10.4.1
@storybook/addon-a11y 10.3.5 10.4.1
@storybook/addon-docs 10.3.5 10.4.1
@storybook/addon-vitest 10.3.5 10.4.1
@storybook/web-components-vite 10.3.5 10.4.1
@storybook/test-runner 0.24.3 0.24.4
@chromatic-com/storybook 5.0.1 5.2.1
@wc-toolkit/storybook-helpers 10.2.3 10.3.0
vitest 4.0.15 4.1.7
@vitest/browser 4.0.15 4.1.7
@vitest/browser-playwright 4.0.15 4.1.7
@vitest/coverage-v8 4.0.15 4.1.7
@vitest/ui 4.0.15 4.1.7

Yarn patches ported

Two existing patches were carried forward to the new package versions (neither bug is fixed upstream):

  • storybook autoplay patch: Prevents play functions from running on initial story load when parameters.autoplay is not explicitly true. Without this, stories auto-run their play function on first render, which can interfere with how docs and overview stories appear.
  • @wc-toolkit/storybook-helpers cssProperties patch: Suppresses a block that adds all CSS custom properties to the Storybook controls table with table: { disable: true }, which caused redundant hidden entries to appear in the controls panel.

Coverage report now accessible in the dev server

Clicking the coverage link in Storybook's Vitest panel previously opened http://localhost:6006/coverage/index.html and returned Not Found. The coverage/ directory is now mapped as a static dir in .storybook/main.ts, but only when the directory already exists (guarded with existsSync) so starting Storybook before running coverage does not produce an error.

To use: run yarn test:coverage first, then start Storybook. The coverage link will resolve correctly.

Startup warning removed

Removed a story glob pattern (../core/**/stories/**/*.test.ts) that matched no files, which produced a ▲ No story files found warning on every dev server start. It's being fixed here: #6341

Motivation and context

Routine dependency maintenance to stay current with Storybook and Vitest releases, plus fixes for two developer experience issues surfaced during local development.

Related issue(s)

N/A

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Accessibility testing checklist

This is a dependency upgrade with no changes to component behavior, markup, or ARIA implementation. No accessibility testing is required.

  • Keyboard: No interactive changes; no keyboard testing required.
  • Screen reader: No markup or ARIA changes; no screen reader testing required.

@rubencarvalho rubencarvalho requested a review from a team as a code owner May 27, 2026 11:03
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 27, 2026

⚠️ No Changeset found

Latest commit: ed18ea5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@rubencarvalho rubencarvalho added the Status:Ready for review PR ready for review or re-review. label May 27, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 27, 2026

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6343

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

}

.swc-Button {
}.swc-Button {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i dont understand why the formatting is changing it so the end bracket is starting the new line. Im not sure why this would be getting picked up in a version bump PR? is there a side effect to this?

Copy link
Copy Markdown
Contributor Author

@rubencarvalho rubencarvalho May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AAAARRRR i've been getting this file change locally every time and I accidentally committed it. i need to investigate this! - I'll remove it for now

Comment thread 2nd-gen/packages/swc/vitest.config.js Outdated
statements: 98,
lines: 100,
functions: 100,
statements: 100,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we want to bump to 100? im fine with it but we might need to check this against whats in the system currently?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooops this also got accidentally committed. we currently have a setting that rewrites this baseline to the current value whenever we run the coverage checks. I'll revert it because it's out of scope of this PR

files: '**/*.test.ts',
});
stories.push({
...CORE_STORY_ROOT,
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fixed in #6341

@rubencarvalho rubencarvalho requested a review from caseyisonit May 29, 2026 09:35
@rubencarvalho rubencarvalho force-pushed the rcarvalho/chore-upgrade-storybook-10-4-1-and-vitest-4-1-7 branch from e912d79 to 4aaac4b Compare May 29, 2026 09:55
@caseyisonit caseyisonit added Status:Ready for merge PR has 2 approvals, all tests pass, and is ready to merge and removed Status:Ready for review PR ready for review or re-review. labels May 29, 2026
@pfulton pfulton merged commit 6ec27e0 into main May 29, 2026
29 checks passed
@pfulton pfulton deleted the rcarvalho/chore-upgrade-storybook-10-4-1-and-vitest-4-1-7 branch May 29, 2026 21:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Status:Ready for merge PR has 2 approvals, all tests pass, and is ready to merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants