Feature request: storyshots needs a custom trigger to re-run when changing a .story file

[axelnormand]

Issue description or question

I'm using storyshots, storybook, vscode and typescript in my react native app and the awesome wallaby app of course.

When i change a story.tsx i actually need wallaby to re-run the test as specified in storyshots.test.ts. Is there any way to specify this dependency in wallaby?

ie the story.tsx file is not the jest test per se so wallaby doesn't re-run anything

thanks

[ArtemGovorov]

Could you please create a sample storyshots project with the your stack and with one simple story so that I could look into to see what we can do about it?

[axelnormand]

Thank you for your prompt reply.

Let me quickly get together a skeleton react native and typescript app, hopefully today.

Be good to do anyway for anyone else wanting to use create react native app, jest, wallaby, storybook, storyshots, typescript as the config is a bit of a pain :)

Thanks

[axelnormand]

On closer inspection I think I was wrong! Sorry. Seems to be working now. I'll still create my skeleton app shortly.

We could close this ticket but in fact it brings up a niche question perhaps you might have a view on, but may decide is too niche to do anything about :)

I am using react-native-storybook-loader (https://github.com/elderfo/react-native-storybook-loader) to auto generate the list of story files outputted to a filed named storyLoader.js. This is then imported by a separate storyshots.config.js file and for storyshots you create one storyshots.test.ts which is run by wallaby/jest

So Wallaby is indeed correctly picking up the dependency chain. So when i change the story file it re-runs storyshots.test.js.

The problem is wallaby runs all my stories which is quite slow as storyshots.test.ts is technically just one test file (without a test method too) which covers many story files. So how might I tell wallaby to re-run the one story test? Perhaps generating one test() per story somehow? Maybe one for the storyshots project rather than here.

Here is my storyshots.test.ts

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, 'storyshots.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);
    }
  },
});

storyshots.config.js

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

//
// The storybook config again just for storyshots init
// Loads the generated stories
//

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

[ArtemGovorov]

Thanks for the update!

From what you have described, wallaby is working as designed. It re-runs affected test files. Because you have only one test file - all of your stories re-run. Correct me if I'm wrong but I think Jest or Mocha watch mode would do the same. Generating one test file per story may help.

[axelnormand]

Haha exactly! I'll raise an issue in the storyshots project and think about how I might automatically create multiple tests, one per story.