StoryShots Directory of snapshots

Question

I am using the StoryShots addon for Storybook to test snapshots from my React project. I would like to save all snapshot files in one directory in relation to the project directory. The default is that the snapshots are saved in relation to the story's location. I tried various configurations (like working with __dirname) but couldn't come up with a solution yet. Maybe someone has an idea?

Here is my storyshots test file used by Jest (storyshots.test.ts):

import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '@storybook/addon-storyshots'

initStoryshots({
  test: multiSnapshotWithOptions(),
  stories2snapsConverter: new Stories2SnapsConverter({
    snapshotsDirName: './__snapshots__/',
    storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
  })
})

Answer 1

You can do something like this:

const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));

initStoryshots({
  test: imageSnapshot({
    getMatchOptions: (option) => {
      const filename = option.context.kind.replace(' ', '');
      return {
        customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
      };
    },
  }),
});