Storybook: Add storyshots watch compatability for jest --watch and wallaby

Created on 7 Feb 2018 · 17Comments · Source: storybookjs/storybook

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);

storyshots inactive question / support

Source

axelnormand

Most helpful comment

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

joycollector on 2 Jul 2018

👍2

All 17 comments

cc @igor-dv

Hypnosphi on 7 Feb 2018

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

igor-dv on 20 Feb 2018

🎉1

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[bot] on 24 Mar 2018

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

igor-dv on 25 Mar 2018

stale[bot] on 15 Apr 2018

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.

arntj on 30 Apr 2018

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

igor-dv on 30 Apr 2018

👎2 👍1

stale[bot] on 21 May 2018

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

macrozone on 5 Jun 2018

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

igor-dv on 11 Jun 2018

❤1

stale[bot] on 2 Jul 2018

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

joycollector on 2 Jul 2018

👍2

The change was not adopted here yet

igor-dv on 12 Jul 2018

stale[bot] on 2 Aug 2018

stale[bot] on 26 Aug 2018

It was released.

igor-dv on 26 Aug 2018

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

axelnormand on 18 Oct 2018

👍1

Was this page helpful?

0 / 5 - 0 ratings