Skip to content

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

Open
@naporin0624

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions