[Vitest 2.x] Browser mode failure snapshots directory name can conflict with other tools

[yannbf]

Describe the bug

When testing story files from Storybook using Vitest (e.g. Button.stories.tsx), the failures generate a directory like __screenshots__/Button.stories.tsx/FailingStoryName.png:

However because the Storybook indexer uses globs that match *.stories.*, it ends up detecting the directory too. While Storybook could improve its matching mechanics, being able to modify the names used in the snapshots like Jest's snapshotResolver would be quite useful. There could be other tools which might conflict because of similar situations.

If Vitest appended .snap at the end of the directory name, this would also fix the issue.

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Maybe we should just have it in the name? How do other frameworks do 🤔

• __screenshots__
  • Button.stories.tsx_ReponsiveMovile-1.png

[sheremet-va]

Looks like cypress does the same, but their screenshot folder is in the root: https://docs.cypress.io/api/commands/screenshot#Naming-conventions

Can't you just add __screenshots__ folder to ignore?

[yannbf]

Good point, I'll make sure we can handle this in Storybook! Thanks for investigating <3