时间戳

首页 > 解决方案 > 使用 material-ui 在 Jest 中进行快照测试的问题

reactjs - 使用 material-ui 在 Jest 中进行快照测试的问题

问题描述

由于我已升级到 Material UI v4，我在快照测试中遇到了类名问题。意思是，类名要么是不确定的顺序，要么是计数器有问题。

我从来没有遇到过 v3 的这个问题，而且我没有使用 withStyles，这似乎与其他人的这个问题有关。

我在 Github 上看到了不同的问题（例如使用 JssProvider 或浅渲染），但我不想为这个特定问题添加依赖项。

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      <button
-   className="MuiButtonBase-root MuiButton-root MuiButton-containedPrimary MuiButton-contained"
+   className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"

或者

-         className="PrivateNotchedOutline-legend-36"
+         className="PrivateNotchedOutline-legend-37"

标签： reactjsjestjsmaterial-ui

解决方案

有类似的情况，MuiButtonBase-root 会在不同的时间加载到不同的页面上，有时会覆盖诸如 MuiButton-contained 之类的东西，这会破坏颜色和填充。这似乎是完全随机的。

这在使用 package.json 中特定版本的“@material-ui/core”库重新运行 Yarn 后停止。例如，如果 @material-ui/core 的条目如下所示：

"dependencies" : {
    "@material-ui/core": "^4.1.3",

删除初始插入符号 (^)，使其如下所示：

"dependencies" : {
    "@material-ui/core": "4.1.3",

当症状停止时，我已经完成了以下链接中的建议。

  1. https://material-ui.com/getting-started/faq/#react-class-name-hydration-mismatch
  2. 从单个文件导出的 Material UI v4 makeStyles 在刷新时不保留样式

推荐阅读