Compatibility Issue with jest-styled-components and Storybook's test-runner

[naporin0624]

Issue Overview.

I am experiencing a problem with jest-styled-components not working as expected when using test-runner in Storybook. The problem seems to be caused by the way test-runner handles rendering.

1. test-runner --eject to generate test-runner-jest.config.js
   Add the serializer from jest-styled-components/serializer to test-runner-jest.config.js
   Execute snapshot by test-runner.

I get the following snapshot, but it does not show the css associated with the class.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[\`Button Default smoke-test 1\`] = \`
<button class="sc-beySPh fvFDzo">
default button
</button>
\`;

Detailed Description.

• Non-Operational jest-styled-components: If you try to use jest-styled-components with storybook test-runner, it will not work correctly. It seems that test-runner is incompatible with jest-styled-components.

• Rendering with headless browser:** Storybook's test-runner uses a headless browser to render React components. This process results in output that is different from what the jest-styled-components serializer expects. jest-styled-components` standard input is usually a ReactNode or HTMLElement, but output from a headless browser does not match this format.

Seeking a Solution

Are there any known solutions or workarounds for this problem?

Sample Repository

https://github.com/naporin0624/test-runner-jest-styled-components

[barmatz]

I am having the same issue