react css 模块导致快照测试失败

Question

react-css-modules 包将呈现 html 像：

className="src-Comp-___style__navi-col___1-3yc6d"

但是散列字符串（3yc6d）会导致 jest 快照出错：

<div                                                                                                                                      
  - className="src-Comp-TopcoderFooter-___style__navi-col___6dcta"                                                             
  + className="src-Comp-TopcoderFooter-___style__navi-col___3yc6d"                                                             
>

如您所见，哈希已更改，因此快照测试失败。

问题是我从 github 克隆了一个存储库，因此测试失败。（当我添加拉取请求时它可能会失败。）

因此在我的电脑中生成的哈希与存储库所有者不同。（如果我重新运行测试，哈希值不会改变。）

这个散列背后的逻辑是什么，我怎样才能防止快照测试失败？

Answer 1

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).

如果您需要该功能，我建议您使用 my fork of babel-plugin-react-css-modules，我会保持更新，并与最新的 css-loader 版本兼容 :)

P.S.: 而且，是的，css-loader 中的更新从版本 3.6.0 到当前的 5.2.4 已经改变了它产生的实际哈希值数倍相同 (S)CSS 个文件中的相同 class 个名称。

react css 模块导致快照测试失败

react css modules causes the snapshot tests to fail

reactjs

jestjs

snapshot

react-css-modules