How to set up jest-styled-components with storybook about jest-styled-components HOT 6 CLOSED

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);
  }
});

from jest-styled-components.

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?

from jest-styled-components.

Of course I don't mind! :)

P.S. I'll do the nit fix

from jest-styled-components.

Perfect, thanks @wongterrencew!

from jest-styled-components.

@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: facebook/react#11158 (comment)

from jest-styled-components.

@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?

from jest-styled-components.