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

【问题标题】：Issues with snapshot testing in Jest with material-ui使用 material-ui 在 Jest 中进行快照测试的问题
【发布时间】：2019-10-26 16:59:22
【问题描述】：

自从我升级到 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"

我希望只有在更改组件时才能更改类名。
似乎随机变化。

【问题讨论】：

标签： reactjs jestjs material-ui

【解决方案1】：

有类似的情况，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",

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

【讨论】：