Jest-styled-components: Jest snapshot testing passing unique classNames

[k15a]

Moved form https://github.com/styled-components/styled-components/issues/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?

[geelen]

Had another bug report similar to this, with a reproduction repo that I've figured out the problem for and left some description: https://github.com/JamieDixon/sc-jest-issue/issues/1

Basically, ordering causes classnames to jump around wildly unless you're using babel-plugin-styled-components in your jest test environment. Which kinda sucks, since the generated classnames should be free to change without invalidating your snapshot. So I'm not sure that that fix is appropriate, I think building something into this library that ignores classname churn would be better.

[MicheleBertoli]

Thank you very much @philpl @k15a @geelen and @JamieDixon.

Given this:

So, the bug is caused because the class names are influenced by the order in which the styled components are created. This is an unfortunate necessity, since we have nothing else to uniquely identify which component is which at runtime.

I strongly agree the problem should be fixed by this package.

[MicheleBertoli]

I implemented a solution, which seems to work as expected.
Feedback is welcome :)

[MicheleBertoli]

🙌 v4 is out
Thanks to everyone!