Storybook: [addon-storyshots] location of __snapshots__ folder

[rwieruch]

Currently I am using the latest alpha version of Storybook, but as I remember correctly it was the same behavior in version 3.x.

Actual Behavior

When I run all stories as snapshot tests with Storybook Storyshots, I get one __snapshots__ folder next to one arbitrary component with a story.

Expected Behavior

I would love having a __snapshots__ folder for each component with a stories file. It shouldn't be the case that the __snapshots__ folder for all stories is located at one place, which would be fine, but not next to one arbitrary component with a story.

Maybe I am just missing a configuration or it's something on Jest's end, but I would be thankful to get any advice for this.

[igor-dv]

In the latest version, storyshots addon has this new thing:

https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter

[rwieruch]

Thanks for your prompt reply @igor-dv But as I see it, this is nothing for specifying the location of the __snapshots__ folder, is it?

[igor-dv]

You can derive from the Stories2SnapsConverter class and change this functionality

Here is an example.

[rwieruch]

Okay, this could work. Thank you!

[chopfitzroy]

Hey @rwieruch,

Did you ever get this working? Trying to implement at the moment and not having a lot of luck.

Cheers,
Otis.

[rwieruch]

Nope @CrashyBang Unfortunately not. I would have expected it to be the default at some point :)

[chopfitzroy]

Hey @rwieruch,

I kept playing with this and was able to get something like what you want with this:

// This is my storybook.spec.js

import path from "path";
import registerRequireContextHook from "babel-plugin-require-context-hook/register";

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

registerRequireContextHook();

initStoryshots({
  configPath: "./testing/config/storybook",

  // this creates a *.snap.js for each *.stories.js I have
  test: multiSnapshotWithOptions(),
  // this tells storybook we're to look for stories (I have all mine in one folder) but as far as I know it searches down recursively from here
  integrityOptions: {
    cwd: path.resolve(__dirname, "../../stories")
  },
  stories2snapsConverter: new Stories2SnapsConverter({
    // This puts all my *.snaps.js in a __snapshots__ folder next to my stories folder, the default is to have them next to the *.stories.js files themselves
    snapshotsDirName: "../__snapshots__",
    // This just sets the extension to *.snap.js which I like
    snapshotExtension: ".snap.js"
  })
});

[rwieruch]

Oh perfect! I will definitely check it out 👍

Edit: It works with a minor change @CrashyBang Thank you :)

initStoryshots({
  test: multiSnapshotWithOptions(),
  integrityOptions: {
    cwd: path.resolve(__dirname, '../../stories'),
  },
  stories2snapsConverter: new Stories2SnapsConverter({
    snapshotsDirName: './__snapshots__',
    snapshotExtension: '.snap.js',
  }),
});

This way the __snapshots__ folders are put next to the story.js files.

[rwieruch]

@ndelangen @tmeasday

Any thoughts on making this the default behavior for allocating snapshot files along with their storiy files? My comment above shows the implementation on how to achieve it. Now I've neatly aligned all snapshot folders with mit stories (see screenshot).

Every time the snapshot for a component fails, I can update this snapshot and only the snapshot folder of this component needs to be updated via version control.

[tmeasday]

Seems reasonable to me -- I think @igor-dv is probably the one to make the call

[arty-name]

Should anyone come to this thread looking for answers, now there's a nice built-in configuration multiSnapshotWithOptions for that:

initStoryShots({ test: multiSnapshotWithOptions({ renderer }) })