add toMatchSpecificSnapshot

[MichaelBitard]

Clear and concise description of the problem

We use storybook in our vue project, and we used jest and storyshots (automated snapshot testing)

We are migrating to vitest for multiple reasons, and we are trying to replace storyshots which works only with jest (storybookjs/storybook#17578)

After playing with vitest, we are able to generate on test for each storybook case, and snapshot the associated html.

Our only issue is that all our storybook are run by the same test file, and the toMatchSnapshot generate a lot of snapshots in the same file.

We would like to create a snapshot file by storybook file, and to do that we would need the jest equivalent toMatchSpecificSnapshot

Suggested solution

I don't really know how to implement it, I know the signature should be something like

toMatchSpecificSnapshot<T>(pathToSnapshotFile: string,shape?: Partial<T> | string, message?: string)

Alternative

We wanted to play with inlinesnapshot and programmatically write/retrieve the file, but we lose all the automatic update from vitest

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

Can't you use resolveSnapshotPath?

[MichaelBitard]

That could be a good idea, but I think we don't have enough context to know which storybook is getting tested, since the test we wrote is a meta test, that load all the storybooks, render each story in a test, snapshot the rendered html

In almost pseudocode, our test does this:

describe('Storybook Smoke Test', async () => {
  // We load all the storybook files
  const modules = await Promise.all(
    Object.values(import.meta.glob<StoryFile>('../**/*.stories.ts')).map(fn =>
      fn()
    )
  )

  describe.each(modules)('%s', (module) => {
   // for each module, we create a test for each story
    test.each(Object.values(composeStories(module)))('%s', story) => {
      const mounted = render(story())
      expect(mounted.html()).toMatchSnapshot()
    })
  })
})

Am I missing something in resolveSnapshotPath that could tell us which test file/describe is being executed?

[sheremet-va]

Am I missing something in resolveSnapshotPath that could tell us which test file/describe is being executed?

No, currently it doesn't know. There was a discussion to add context to it, which has this information in #1620 but it is not implemented and will require some refactoring and will be a breaking change (instead of function, users will need to provide a string path, like with setupFiles, which is fine, I think)

[MichaelBitard]

Thanks for your answer!

If I wanted to try and implement it, I should look at similar stuff here right? #43

[sheremet-va]

If I wanted to try and implement it, I should look at similar stuff here right? #43

No, I don't think it is related. If you want to implement it in Vitest, I would look into #1620. The only change is needed there is initiating resolveSnapshotPath inside a worker thread instead of using RPC.

[thomasmattheussen]

The newly added File Snapshots feature seems to resolve this 🙌