反应 css 模块导致快照测试失败答案

【问题标题】：react css modules causes the snapshot tests to fail反应 css 模块导致快照测试失败
【发布时间】：2021-07-31 19:07:09
【问题描述】：

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 克隆了一个 repo，因此测试失败了。（当我添加拉取请求时它可能会失败。）

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

这个哈希背后的逻辑是什么，如何防止快照测试失败？

【问题讨论】：

标签： reactjs jestjs snapshot react-css-modules

【解决方案1】：

react-css-modules 库已弃用；和babel-plugin-react-css-modules，他们建议改用，暂时没有维护，并且与Webpack的css-loader的最新版本不兼容（它负责CSS方面的CSS名称转换；这决定了其背后的实际逻辑哈希，which you can find here)。

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

PS：是的，css-loader 从版本3.6.0 到当前5.2.4 的更新已经改变了它为相同（S）CSS 文件中相同类名生成的实际哈希值的数倍。

【讨论】：