Storybook: After upgrade to v4, storyshots multiSnapshotWithOptions infinitely hangs

[ecbrodie]

Describe the bug
I am currently upgrading my project from Storybook v3 to v4 (coupled with a Webpack 3-->4 and Babel 6-->7 upgrade). Everything is working so far, except for Storyshots. With multiSnapshotWithOptions enabled, the storyshots test will infinitely hang with zero feedback as to why. But, the storyshots work just fine without this option.

To Reproduce
Steps to reproduce the behavior:

1. Configure storybook and storyshots like demonstrated below.
2. Run storyshots through Jest.

Expected behavior
Storyshots should be able to run without issue.

Actual behaviour
The test process will hang forever (I have tried waiting up to 5 minutes for feedback multiple times). With the multiSnapshotWithOptions option commented out, the entire storyshots test completes successfully in just 8 seconds.

Code snippets

The test file used to configure the storyshots:

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

initStoryshots({
  configPath: "stories",
  test: multiSnapshotWithOptions(),
});

The stories/config.js file, which is set in the configPath:

import "@babel/polyfill";
import { configure, addDecorator } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import decorator from "./StorybookTheme";

const req = require.context(
  "../src",       // path where stories live
  true,           // recursive?
  /.story.jsx$/, // story files match this pattern
);

addDecorator(decorator);
addDecorator(withKnobs);

function loadStories() {
  // iterate on all the stories and require them
  req.keys().forEach(module => req(module));
}

configure(loadStories, module);

System:

• OS: Mac OS 10.13.6
• Framework: React 16.6.3
• Addons: @storybook/addon-storyshots 4.0.11
• Version: @storybook/react 4.0.11

Additional context

I have followed steps from the official migration guides on the Internet for the babel upgrade, webpack upgrade and storybook upgrade. I am happy to provide more package versions and sample code as requested. I appreciate any help that I can receive in troubleshooting this issue. Thank you.

[igor-dv]

The reproduction repo will be much appreciated =)

[ecbrodie]

@igor-dv thank you for the quick reply. I am glad to provide a repo, but I'll need some time to prepare a public one because I am running into this issue on a private repo and do not have permission to make the codebase public. Please give me a day and I'll have something public ready for you to reproduce the issue with.

[ecbrodie]

@igor-dv Looks like one day turned into 2 weeks before I could revisit this. Sorry about that...life and stuff happened.

I discovered that the root cause of the problem for me was that Storyshots in Storybook v4 adds a <div className="story"> element wrapping around the entire HTML snapshots in .storyshot files. This likely meant that what appeared to be the Storyshots process hanging forever was really it taking a very long time to compute a code diff due to this one wrapper element. The solution for me was to delete every single .storyshot file in my project and have them regenerated from scratch. After that point, I never ran into any more issues with a hanging process and Storyshots was back to working like normal.

I'm going to close out this issue now. However, I have a concern about the fact that this change was not documented as a breaking change in CHANGELOG.md. It also perhaps would have been nice to have this in Storybook's official v4 upgrade guide. If you are receptive to such a note being added to the migration guide, I'm happy to file a PR for it.

[igor-dv]

Sure, any PR is good to go