The react-css-modules package will render a html like:
className="src-Comp-___style__navi-col___1-3yc6d"
But the hash string (3yc6d) will cause errors on jest snapshots:
<div
- className="src-Comp-TopcoderFooter-___style__navi-col___6dcta"
+ className="src-Comp-TopcoderFooter-___style__navi-col___3yc6d"
>
As you can see, the hash is changed, so snapshot test is failing.
The issue is that i cloned a repo from github, and the tests are failing because of this. (and it will probably fail when I add a pull request.)
so the hashes that are generated in my pc is different than the repo owner. (if i re-run the tests, the hash will not change.)
What's the logic behind this hash, and how can I prevent the snapshot tests to fail?
react-css-modules library is deprecated; and babel-plugin-react-css-modules they recommend to use instead, has not been maintained for a while, and is not compatible with latest releases of Webpack's css-loader (which takes care about CSS name transformation on CSS side; and which determines the actual logic behind that hash, which you can find here).
If you need that functionality, I recommend you to use my fork of babel-plugin-react-css-modules, which I keep up-to-date, and compatible with latest css-loader versions :)
P.S.: And, yeah, the updates in css-loader from version 3.6.0 to the current 5.2.4 have altered several times the actual hash values it produces for the same class names in the same (S)CSS files.