Enable snapshot property matcher functionality for addon-storyshots

If you are creating a issue to track work to be completed, start here:

Work summary

With jest 23, snapshot property matchers were introduced as a way to exempt props from causing red snapshots. It is summarized best by this tweet: https://twitter.com/fbjest/status/999733224178896896?lang=en

There is currently no way to make use of this functionality while using the snapshot testing functions exported by addon-storyshots.

Where to start

I would like to add an additional parameter to snapshotWithOptions and multiSnapshotWithOptions that gets passed through as an argument to toMatchSnapshot and toMatchSpecificSnapshotrespectively. This argument can then be used to pass the required property matchers to jest

example usage:

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

initStoryshots({
  framework: 'react',
  storyKindRegex: /^((?!.*?ErrorBoundary).)*$/,
  test: multiSnapshotWithOptions({
    propertyMatchers: { timestamp: expect.any(Number) },
  }),
});

Acceptance criteria

• [ ] Snapshot property matchers can be passed via snapshotWithOptions and multiSnapshotWithOptions
• Passed property matchers are respected by the storyshots test

Who to contact

@tobilen

[waynebrantley]

Any chance for this support. We use several libraries that set Ids and other things that change when rebuilding - we do not want those snapshots to fail for those changes.

[tobilen]

hey @shuklajay117,

really great that you want to tackle this problem!

the biggest problem will probably be getting the property matchers to apply to the “objects” (i.e. react components) coming in. i would start by getting them to work in a local enviroment with react-test-renderer to get an understanding of how they work when combined with components.

when you have a solid handle on that, try matching to objects returned from the enzyme renderer. you probably have to serialize them first (storybook uses the enzyme-to-json serializer by default, so i would try with that one). this is where i suspect the “monkey” of this feature by the way. enzyme objects are way more complex and not as easy to match.

when you have that working, port that solution into the appropriate files of the addon. again, start with the simple one (snapshotWithOptions) and when you get that working, multiSnapshotWithOptions. For the second one, there might be a PR onto jest-specific-snapshot required.