Skip to content

Jest snapshot testing passing unique classNames #29

Closed

Description

Moved form styled-components/styled-components#916 by @corbanbrook

Styled components generate a unique classname hash based on the style content and passes this classname to the snapshot. This causes snapshots to break when styles are adjusted.

I understand this might be useful if you want to break snapshots on style change or even show style diffs with the jest-styled-components plugin but by including the hashed classname it ends up not only breaking the snapshot of the changed component but also the snapshots of any components that wrap it. This can be a mild annoyance when adjusting a Button styling causes hundreds of snapshots all over the application to break because they included Button.

CSS Modules had a similar issue but solved it with the identity-obj-proxy lib and moduleNameMapper:

"moduleNameMapper": {
  "\\.(css)$": "identity-obj-proxy"
 }

which would convert className={styles.myStyle} to className="myStyle" in the snapshot rather than "myStyle-{unique-hash}".

Is there something similar for mocking in classnames for styled-components?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions