Skip to content

Snapshot paths gain trailing dashes for CSF Next stories that use story.test() #847

Description

@unional

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

  1. Enable features: { experimentalTestSyntax: true } in .storybook/main.ts.
  2. 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()
})
  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingsnapshot

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions