Storybook: [storyshots] Skipping storyshot testing on stories that will never pass/render properly

[thehig]

Issue details

Storyshots is running all of my stories through snapshot testing. I have recently started using react-highcharts, which has issues with jest. There is currently no fix for this that I can find.

Working with Highcharts and Storybook however, B-E-A-utiful

I also have a habit of creating stories of components that have missing props (intentionally) which will also cause errors.

Right now this only bothers me, but if at some point in the future we integrate our tests with an automated build pipeline I'll have no choice but to remove storyshots (boo).

So, to my question:

Is it possible to configure storyshots to not run a particular story or group of stories?

Steps to reproduce

• Create Storybook story that crashes/errors
• Integrate Storyshots
• Run Jest tests
• Test errors. (Because of course it does.)

Proposition

• Create Storybook story that crashes/errors
• Integrate Storyshots
• Run Jest tests
• Test errors. (Because of course it does.)
• Change story/config somehow to 'skip' storyshots integration
• Run Jest tests
• Test completes successfully
  
  
  
  • Appearing as 'skipped' would be amazing
  
  

[thehig]

Hodor: https://github.com/storybooks/storybook/issues/1578 Bad google fu

[thehig]

Just to follow up on this in case anyone ever lands here, I added this storyKindRegex snippet to my initStoryshots to prevent tests with :warning: \u26A0 in the name from running.
This prevents the files from being run, and surfaces a "warning" to storybook that this component will not be storyshotted.

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

initStoryshots({
  suite: '1.Atoms',
  storyKindRegex:/^1\.Atoms(?!.*(\u26A0)).*/,
  test: renderOnly
});

The suite, 1.Atoms, 1\.Atoms and test: renderOnly are not relevant to this issue, but are helpful to:

• suite Name the storybook test suite groups
• 1\.Atoms in the storyKindRegex is used to only load particular stories into the suite. I then have multiple initStoryshots in this file.
• test: renderOnly - I use material-ui@next, which in turn uses jss, meaning snapshot tests were going haywire. Adding another story would cause all the calculated CSS names to change. Knowing the components render without crashing was enough for me :)

[worc]

man... _why_ is this a regex option and not a filter function of some kind?

[thedamon]

Is there some way of reading the story options in the test? If not, there really really should be. I want to do this and I also don't want to write weird Regex, or have to name stories that I don't want tested in a specific way (though the ⚠️ approach is the nicest i've seen so far).

Regexing the name of something in order to determine its properties is a red flag to me, and it's disappointing for it to be the "correct" way to do something.

[shilman]

export const Exception = () => {
  throw new Error('storyFn threw an error! WHOOPS');
};
Exception.story = {
  name: 'story throws exception',
  parameters: {
    storyshots: { disable: true },
  },
};

[MattFisher]

@shilman this is great - could it be included in the documentation?

[shilman]

@MattFisher sure, mind raising a PR?