Jest-styled-components: How to set up jest-styled-components with storybook

[terrencewwong]

I was struggling a bit with this today and had to dig a little around the storyshots source to figure this out. I figured someone else might have the same issue/question as me.

Here's an example repo of the setup I came up with: https://github.com/wongterrencew/jest-styled-components-example

I'm assuming this is the intended setup?

[MicheleBertoli]

I'm not a storybook expert but it seems right, and it works as expected.

Nit: You could avoid passing the second param to the create method:
const tree = renderer.create(storyElement).toJSON()

I'm about to rewrite the docs with v4, do you mind if I reference your repo as an example of how to use this package with storybook?

[terrencewwong]

Of course I don't mind! :)

P.S. I'll do the nit fix

[MicheleBertoli]

Perfect, thanks @wongterrencew!

[rwieruch]

In case someone runs into this, that's how I did it for integrating jest-styled-components into storyshots:

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
import initStoryshots, {
  Stories2SnapsConverter,
} from '@storybook/addon-storyshots';
import renderer from 'react-test-renderer';

import 'jest-styled-components';
import { styleSheetSerializer } from 'jest-styled-components/serializer';
import { addSerializer } from 'jest-specific-snapshot';

addSerializer(styleSheetSerializer);

registerRequireContextHook();

initStoryshots({
  test: ({ story, context }) => {
    const converter = new Stories2SnapsConverter();
    const snapshotFilename = converter.getSnapshotFileName(context);

    const storyElement = story.render(context);
    const tree = renderer.create(storyElement).toJSON();
    expect(tree).toMatchSpecificSnapshot(snapshotFilename);
  }
});

[techieshark]

@rwieruch that code almost worked for me, thanks. The one change required was to work around a "ReferenceError: renderer is undefined":

replace this:

import renderer from 'react-test-renderer';

with this:

import * as renderer from 'react-test-renderer';

See also: https://github.com/facebook/react/issues/11158#issuecomment-335202408

[papiro]

@MicheleBertoli

I'm not a storybook expert but it seems right, and it works as expected.

Nit: You could avoid passing the second param to the create method:
const tree = renderer.create(storyElement).toJSON()

I'm about to rewrite the docs with v4, do you mind if I reference your repo as an example of how to use this package with storybook?

I don't see this mentioned in the docs. Has it been removed since then?