Description
When a CSF Next story declares child tests with story.test(), Storybook's Vitest transform wraps the story's tests in a describe whose title has two trailing spaces appended (DOUBLE_SPACES in storybook/internal/csf-tools):
describe('Snap ', () => {
test('base story', testStory({ ... }))
test('variant one', testStory({ ..., testName: 'variant one' }))
})
toTaskId() maps every non-alphanumeric character to -, so those two spaces become two dashes on the directory segment. Every snapshot for such a story lands under a folder named <story>--.
Steps to Reproduce
- Enable
features: { experimentalTestSyntax: true } in .storybook/main.ts.
- Write a CSF Next story with a child test:
const meta = preview.meta({ title: 'Example/Probe', component: Button, args: { onClick: fn() } })
export const Snap = meta.story({ tags: ['snapshot'], args: { label: 'Probe' } })
Snap.test('variant one', async ({ canvas }) => {
await expect(canvas.getByRole('button')).toBeInTheDocument()
})
- Run
vitest run.
Expected Behavior
Snapshots land under a folder named after the story:
__vis__/local/__baselines__/stories/Probe.stories.ts/snap/base-story-x.png
__vis__/local/__baselines__/stories/Probe.stories.ts/snap/variant-one-x.png
Actual Behavior
The folder carries two trailing dashes:
__vis__/local/__baselines__/stories/Probe.stories.ts/snap--/base-story-x.png
__vis__/local/__baselines__/stories/Probe.stories.ts/snap--/variant-one-x.png
Failure messages inherit the same name, e.g. Snapshot `snap--/variant-two` has no baseline image.
The snapshotting itself is correct — one snapshot per child test, tags and parameters.snapshot honoured per test, and both expect().toMatchImageSnapshot() and page.toMatchImageSnapshot() work inside story.test(). Only the generated path is wrong, and these names get committed as baselines.
Suggested Fix
Trim trailing (and collapse repeated) separators when building a task id, so a title's incidental whitespace does not leak into the snapshot path.
Environment
- OS: Linux 6.18.33.2-microsoft-standard-WSL2 x86_64 (WSL2)
- Node: v22.23.2
- Package manager: pnpm 11.22.0
- storybook-addon-vis: 4.2.3
- vitest-plugin-vis: 5.1.1
- Storybook: 10.4.2 (
@storybook/addon-vitest 10.4.1)
- Vitest: 4.1.11, browser mode via
@vitest/browser-playwright, chromium
Notes
Reproduced in the testcases/sb-csf-next workspace package. This only affects stories that use story.test(); plain stories still get a flat <story>-<key>.png.
Description
When a CSF Next story declares child tests with
story.test(), Storybook's Vitest transform wraps the story's tests in adescribewhose title has two trailing spaces appended (DOUBLE_SPACESinstorybook/internal/csf-tools):toTaskId()maps every non-alphanumeric character to-, so those two spaces become two dashes on the directory segment. Every snapshot for such a story lands under a folder named<story>--.Steps to Reproduce
features: { experimentalTestSyntax: true }in.storybook/main.ts.vitest run.Expected Behavior
Snapshots land under a folder named after the story:
Actual Behavior
The folder carries two trailing dashes:
Failure messages inherit the same name, e.g.
Snapshot `snap--/variant-two` has no baseline image.The snapshotting itself is correct — one snapshot per child test, tags and
parameters.snapshothonoured per test, and bothexpect().toMatchImageSnapshot()andpage.toMatchImageSnapshot()work insidestory.test(). Only the generated path is wrong, and these names get committed as baselines.Suggested Fix
Trim trailing (and collapse repeated) separators when building a task id, so a title's incidental whitespace does not leak into the snapshot path.
Environment
@storybook/addon-vitest10.4.1)@vitest/browser-playwright, chromiumNotes
Reproduced in the
testcases/sb-csf-nextworkspace package. This only affects stories that usestory.test(); plain stories still get a flat<story>-<key>.png.