时间戳

首页 > 解决方案 > react css modules 导致快照测试失败

reactjs - react css modules 导致快照测试失败

问题描述

该react-css-modules包将呈现一个像这样的 html：

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

但是哈希字符串 ( 3yc6d) 会导致开玩笑快照上的错误：

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

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

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

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

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

标签： reactjsjestjssnapshotreact-css-modules

解决方案

react-css-modules库已弃用；和babel-plugin-react-css-modules他们推荐使用，已经有一段时间没有维护了，并且与最新版本的 Webpack 不兼容css-loader（它负责 CSS 端的 CSS 名称转换；它决定了实际的该哈希背后的逻辑，您可以在此处找到）。

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

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

推荐阅读