Shallow rendering broke when upgrading to Storybook 5

Describe the bug The shallow rendered serialized snapshots broke after I upgraded from 3 to 4 and 4 to 5.

It used to render the inside of my component:

<article>
  <h1>Foo</h1>
</article>

But now it’s rendering the …outside(?) of it

<MyComponent
  title="Foo"
/>

To Reproduce Steps to reproduce the behavior:

1. Update the following packages

-"@storybook/addon-storyshots": "^3.4.7",
+"@storybook/addon-storyshots": "^5.1.3",
-"@storybook/react": "^3.4.6",
+"@storybook/react": "^5.1.3",

Expected behavior My snapshots should not break, or at least should not render completely different output

Code snippets

import { shallow } from 'enzyme';
import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  storyKindRegex: /^MyComponent$/,
  renderer: shallow,
});

System:

• OS: MacOS 10.13.6
• Device: Macbook Pro 2018
• Framework: create-react-app, jest
• Addons: storyshots
• Version: 5.1.3

Update

Using this works

 initStoryshots({
-  renderer: shallow,
+  renderer: (...args) => shallow(...args).dive(),
 })

Update 2

But it doesn’t work if you’re unwrapping your component from an HOC, like I am, sadly:

const intl = getItFromSomeOtherModule() // react-intl stuff
const unwrap = node => {
  if (node.type.name === 'InjectIntl') {
    const unwrappedType = node.type.WrappedComponent;
    node = React.createElement(unwrappedType, { ...node.props, intl });
  }

  return node;
}

// storyshot test file
renderer: (node, options) => shallow(unwrap(node), options).dive(); // doesn't work.

Update 3

Seems like the problem is that the node argument received by the renderer function (in the signature (node, options => shallow(node, options)) is a <ReactDecorator />, rather than a <MyComponent />.

For me, particulary, it breaks the suite as most of my components are wrapped by HoCs that I don’t want to shallow render (ergo the .WrappedComponent pattern to unwrap). I don’t have a workaround.

Update 4

Fixed by commenting out the console plugin. Forget everything above, just comment out this plugging and that’d be it.

// import '@storybook/addon-console';
// import { withConsole } from '@storybook/addon-console';
// addDecorator((storyFn, context) => withConsole()(storyFn)(context));

For a long term solution I’ll just be making use of configPath property on storyshots to pass a config file that does not include this decorator

[christopher-francisco]

@shilman I don’t, I just followed the migration guide to 4 but it got me to 5 instantly (painlessly so that was cool).

I am wondering whether the problem I’m seeing is the same as this one https://github.com/storybookjs/storybook/issues/6880

[tmeasday]

That’s definitely one option @alber70g – in fact you could even write a “higher order decorator” that made any given decorator behave like that.

We have talked about this issue in various other contexts and it still seems like something that we don’t have a great answer to yet.