Improve docs: How to configure the addon to create multiple snapshot files

[alfechner]

I'd like to configure storyshots so that it creates multiple snapshot files close to the actual story.

I found issue #887, it describes using jest-specifics-snapshop but it's for version 3.x and I cannot find any example or details in the documentation nor in the issue itself.

The documentation talks about multiSnapshotWithOptions which sounds promising but doesn't prevent my config creating one monolithic snapshot file.

My Storyshots.test.ts file looks like this:

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

initStoryshots({
    test: multiSnapshotWithOptions({}),
});

initStoryshots();

What do I miss and is it worth clarifying it to the documentation?

[gabiseabra]

I ran into the same issue today and tried to solve it by writing my own Stories2SnapsConverter, which lead me to discover that the fileName param on getSnapshotFileName is always null, causing snapshots file resolution to fallback to the default value.
This seems to be a bug in @storybook/addon-storyshots. I've managed to find a work around by adding parameters: {fileName: __filename}} to the default export on each story.js file.

These are my dependencies:

jest@^25.1.0
@storybook/core@5.3.12
@storybook/addon-storyshots@^5.3.12

Login.story.js:

// ...

export default {
  parameters: {fileName: __filename},
  title: 'auth/Login'
}

export const login = () => <Login />

login.story = {name: 'default'}

snapshots.spec.js

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

initStoryshots({
  framework: 'react',
  integrityOptions: {cwd: __dirname},
  test: multiSnapshotWithOptions()
})

[alfechner]

I uesed storyKindRegex. I was so focused on multiSnapshotWithOptions that I overlooked it.

From the documentation about storyKindRegex :

This can be useful if you want to separate the snapshots in directories next to each component.