Storybook: Option to enable shallow rendering

[MoOx]

Currently snap are by default fully rendered. I found this not optimal in some cases (especially for complex components that have a lots of children).
I didn't find any option to enable shallow rendering that would produce lighter snaps.
Are you open for such an addition? (eg: shallowRendering option)

[tmeasday]

I think adding a new test function export to shallow render would be great (see https://github.com/storybooks/storybook/issues/1034 -- slated for next release).

[MoOx]

FYI, I am trying v3 alpha and there is a problem with storyshots addon and the fact that it try to require "react-test-renderer/shallow" which does not exist in react 16 alpha (which is require since the last 3 "stable" react-native releases...)

[tmeasday]

Thanks for the heads up @MoOx, this was a mistake.

[tmeasday]

@MoOx - have you had any success getting this going with the new custom test function? It would be good to get a shallow test body going!

[heinzmuller]

```import initStoryshots from '@storybook/addon-storyshots'
import shallow from 'react-test-renderer/shallow'

initStoryshots({
configPath: __dirname,
test({ story, context }) {
const shallowRenderer = shallow.createRenderer()
const result = shallowRenderer.render(story.render(context))
expect(result).toMatchSnapshot()
}
})
```

This little snippet works fine for me!

[tmeasday]

@heinzmuller feel like sending a PR to add it to test-bodies?

[heinzmuller]

@tmeasday I'll try to get a PR for this later this evening

[MoOx]

Working for me, feel free to close this issue :)

[heinzmuller]

@MoOx You can close this issue yourself I think?

[tmeasday]

Let's leave this open until it is merged and released.

[heinzmuller]

@tmeasday I forgot to test, but will decorators make it so the shallow snapshot is only the decorator?

If they do, we could probably add for how to conditionally add decorators when not running jest tests (I already do this for some snapshots)

I'll test this later also

[shilman]

Released. 🎉 Closing 😀

[irnc]

@heinzmuller Yes, your concern is right, decorators are added to the snapshot, so component under story is not rendered at all.

I am afraid that conditionally adding decorators is not an option when decorators provide context to component under story, e.g. my stories are decorated with ThemeProvider for getting values from theme.

Thus we need to find a way to omit decorators in outputed snapshot, but still render them to provide context.

[tmeasday]

@irnc I've been pondering this one a little bit. If you were writing a shallow snapshot test case by hand that required some kind of context, how would you do it? i.e. what does the raw code look like?

I've been trying to figure out how we can take the right snapshot but still have the context.

[irnc]

If you were writing a shallow snapshot test case by hand that required some kind of context, how would you do it? i.e. what does the raw code look like?

I don't know, I newer used shallow rendering before storyshots.

Looking into ReactShallowRenderer, I could see that render accepts context as a second argument. This brings me to a conclusion, that for shallow rendering I would need to pass context manually.

Looking into enzyme we could see that they wrap _node under test_ in ShallowWrapper which renders that node with context passed via options.

[irnc]

Given that the current semantics of a story and a decorator is that they could return multiple nested elements, we couldn't expect it to work for shallow rendering. For shallow rendering to make sense, we need to constrain story function to return only one element (i.e. element without children), and decorators accounted separately from story function.

If needed to separate context setting decorators from stories, we would split decorated concept into a pair of _context setting decorators_ and _story function returning one element_, so at a later stages we could extract context from the first part and pass it to renderer when rending the second part.

That should be considered a breaking change, as decorators may be used as integral part of a story rendering. Thus we shouldn't change addDecorator semantics, but maybe introduce addContextDecorator.

[tmeasday]

This brings me to a conclusion, that for shallow rendering I would need to pass context manually.

Hmm, yes I was thinking about this possibility, but it's not very user-friendly, there are a lots of use-cases where you want to use a <Provider/>-style wrapper. I guess in all such cases conceptually you could just pass the context that provider provides, but I think in practice it would often be tricky to do so.

Given that the current semantics of a story and a decorator is that they could return multiple nested elements, we couldn't expect it to work for shallow rendering

I'm not sure what you mean by this?

[ewolfe]

Did any of you ever find a solution to shallow render snapshots but omit the decorator?