Description
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.
- test-runner --eject to generate test-runner-jest.config.js
Add the serializer fromjest-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 usejest-styled-components
withstorybook
test-runner
, it will not work correctly. It seems thattest-runner
is incompatible withjest-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 thejest-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