Add storyshots watch compatability for jest --watch and wallaby

[axelnormand]

Issue details

As per #2259, with storyshots there is one storyshots.test.js file so every time i change a story file, jest --watch or wallaby re-runs all the stories which is a bit slow.

Is there a way to correctly setup multiple jest tests, one per story file so the dependency chain is correct?
Happy to submit a PR but thought someone might have some ideas how I'd approach this?

Many thanks

Here is my storyshots.test.ts file where i'm using react native, typescript and prefer multiple snapshot files generated using enzyme shallow.

import initStoryshots, {
  getSnapshotFileName,
} from '@storybook/addon-storyshots';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import path from 'path';

//
// initialise storyshots
// https://github.com/storybooks/storybook/tree/master/addons/storyshots
//

// fix _global import in storyshots code to be jest global including describe method
jest.mock('global', () => global);

initStoryshots({
  framework: 'react-native',
  configPath: path.join(__dirname, 'storybook.config.js'),
  test: ({ story, context }: { story: any; context: any }) => {
    // do multi file snapshots with shallow not mount as nicer to compare for humans
    const snapshotFileName = getSnapshotFileName(context);
    const storyElement = story.render(context);
    const shallowTree = shallow(storyElement);

    if (snapshotFileName) {
      // @ts-ignore toMatchSpecificSnapshot added by storyshots
      expect(toJson(shallowTree)).toMatchSpecificSnapshot(snapshotFileName);
    }
  },
});

and my storyshots.config.js which just loads the stories dynamically generated to storyLoader.js using react-native-storybook-loader (https://github.com/elderfo/react-native-storybook-loader)

import { configure } from '@storybook/react-native';
import { loadStories } from './storyLoader';

//
// Loads the generated stories for Storybook.tsx and storyshots.test.ts
//

configure(() => {
  loadStories();
}, module);

[Hypnosphi]

cc @igor-dv

[igor-dv]

I'll try to take a look at it next week.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[igor-dv]

As you can imagine I failed to take a look. Hope will get to it soon

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[arntj]

I have a related problem. If I have setup a precommit hook with jest, and I create a file, say:
thingamabob.tsx
and a corresponding story file:
thingamabob.stories.tsx
then if I change thingamabob.tsx then jest won't detect that the storyshots related to that file should be rerun. This happens even if I create a thingamabob.test.tsx to setup stories in the same directory as thingamabob.tsx.

A fix to this or a hint of how to get around this would be much appreciated.

[igor-dv]

I assume that these all are related also to #3483.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[macrozone]

@igor-dv any idea how to solve this? or a workaround?

[igor-dv]

@thomasbertet added a fix to the jest-specific-snapshot that is published as v1.0.0. I assume it will be adopted here soon

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[joycollector]

@igor-dv Hi, thanks for your great work. Are there any updates on this?

[igor-dv]

The change was not adopted here yet

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[igor-dv]

It was released.

[axelnormand]

for any future people finding this thread, i actually ended up writing a little script to run in the prestorybook target that generates one .test.ts file per .story.tsx file. Watching then works no problem and you can check in that new .test.ts file to git.

I wrote up how i did it here: https://codeburst.io/react-native-storybook-generating-individual-test-files-to-snapshot-bdbda32625ce