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 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.
Non-Operational jest-styled-components: If you try to use jest-styled-components with storybooktest-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?
Issue Overview.
I am experiencing a problem with
jest-styled-components
not working as expected when usingtest-runner
in Storybook. The problem seems to be caused by the waytest-runner
handles rendering.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.
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