Skip to content

feat(vitest): rework story naming logic#364

Merged
AriPerkkio merged 2 commits into
mainfrom
ari/feat-vitest-story-naming
Jun 1, 2026
Merged

feat(vitest): rework story naming logic#364
AriPerkkio merged 2 commits into
mainfrom
ari/feat-vitest-story-naming

Conversation

@AriPerkkio

@AriPerkkio AriPerkkio commented May 22, 2026

Copy link
Copy Markdown
Member

Issue: Milestone 1 of #353

See Chromatic projects with this PR changes:

This PR introduces temporary solution for story naming issue. However changes of this PR will never be reverted - the title and stories[].name need to remain stable. We'll introduce proper long-term fix in #376 using other fields in the story JSON.

What Changed

  1. "title" of a *.stories.json is now just the file name, e.g. src/components/accordion/accordion.test.tsx. Previously it also contained (optional test suite) / (test case).
  2. Story name now contains test suite and test case, postfixed with snapshot name.
{
-  "title": "accordion/opens and closes",
+  "title": "accordion",
  "stories": [
    {
-     "name": "default",
+     "name": "opens and closes / default",
      "globals": { ... },
      "parameters": {...}
    },
    {
-     "name": "open",
+     "name": "opens and closes / open",
      "globals": { ... },
      "parameters": {...}
    },
    {
-     "name": "close",
+     "name": "opens and closes / close",
      "globals": { ... },
      "parameters": {...}
    }
  ]
}
Before After
Before After
image image

Also adds new title option in configure() API, that can be used to set completely custom title in the story. This is similar as Storybook's meta.component property.

This is especially useful in following cases:

  • test/sign-in/Page.test.tsx
  • test/sign-out/Page.test.tsx
Before, inferred title from file path After, using configure({ title })
image image
image image

How to test

@changeset-bot

changeset-bot Bot commented May 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8e8ef7b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@chromatic-com/vitest Patch

Not sure what this means? Click here to learn what changesets are.

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

@AriPerkkio AriPerkkio force-pushed the ari/feat-vitest-story-naming branch from ff8731b to 354a0b5 Compare May 22, 2026 09:36
@pkg-pr-new

pkg-pr-new Bot commented May 22, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@chromatic-com/cypress@8e8ef7b -D
npm i https://pkg.pr.new/@chromatic-com/playwright@8e8ef7b -D
npm i https://pkg.pr.new/@chromatic-com/vitest@8e8ef7b -D

commit: 8e8ef7b

@AriPerkkio AriPerkkio force-pushed the ari/feat-vitest-story-naming branch 3 times, most recently from 75d6c30 to 53e4f53 Compare May 25, 2026 12:41
@AriPerkkio AriPerkkio changed the base branch from main to ari/fix-storynames-break May 25, 2026 12:41
@AriPerkkio AriPerkkio force-pushed the ari/feat-vitest-story-naming branch 2 times, most recently from f6ac079 to 176f38e Compare May 25, 2026 12:53
Comment on lines +19 to +32
describe('', () => {
configure({ title: 'Components/Button', disableAutoSnapshot: false });

beforeEach(() => {
document.body.innerHTML = '<button>Example</button>';
});

test('Primary', () => {});
test('Secondary', () => {});
test('Hovered', () => {});
test('Pressed', () => {});
test('Focused', () => {});
test('Disabled', () => {});
});

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Image Image

@AriPerkkio AriPerkkio force-pushed the ari/fix-storynames-break branch from 43e04b6 to a21854e Compare May 27, 2026 04:48
Base automatically changed from ari/fix-storynames-break to main May 27, 2026 05:17
@AriPerkkio AriPerkkio force-pushed the ari/feat-vitest-story-naming branch from 674216f to 015e474 Compare May 27, 2026 05:25
@AriPerkkio AriPerkkio force-pushed the ari/feat-vitest-story-naming branch from 015e474 to 8e8ef7b Compare May 27, 2026 05:35
@AriPerkkio AriPerkkio requested review from JReinhold and valentinpalkovic and removed request for domyen, kylegach and winkerVSbecks May 29, 2026 11:04
@AriPerkkio AriPerkkio marked this pull request as ready for review May 29, 2026 11:04
@AriPerkkio AriPerkkio merged commit 5a0c64d into main Jun 1, 2026
10 of 11 checks passed
@AriPerkkio AriPerkkio deleted the ari/feat-vitest-story-naming branch June 1, 2026 13:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants