Jest snapshot testing passing unique classNames

[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?

[kitten]

This should be opened over at jest-styled-components rather than here :)

[k15a]

I've moved it over to jest-styled-components styled-components/jest-styled-components#29

[kitten]

Cheers :)