Jest Snapshots 在 SVG 道具上失败答案

【问题标题】：Jest Snapshots fail on SVG propsJest Snapshots 在 SVG 道具上失败
【发布时间】：2020-02-07 01:48:29
【问题描述】：

当包含 Fontawesome-React 图标组件时，Jest 快照测试失败。我没有将 title 或 aria-labelledby 传递给 SVG 组件，即使我确实将这些道具传递给它，快照也会继续散列这些道具。测试无法通过，因为每次测试运行时都会在这两个 props 中生成一个新的哈希。

"@fortawesome/react-fontawesome": "^0.1.4",

"jest": "^23.6.0",

        <svg
    -     aria-labelledby="svg-inline--fa-title-y4Cv9dkIlhtu"
    +     aria-labelledby="svg-inline--fa-title-gIn5ZJBsxixz"
          className="svg-inline--fa fa-user-circle fa-w-16 fa-1x "
          color="whitesmoke"
          data-css-knsav2=""
          data-icon="user-circle"
          data-prefix="fas"
    @@ -23,11 +23,11 @@
          }
          viewBox="0 0 496 512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <title
    -       id="svg-inline--fa-title-y4Cv9dkIlhtu"
    +       id="svg-inline--fa-title-gIn5ZJBsxixz"
            style={Object {}}
          >
            User Profile
          </title>

【问题讨论】：

github.com/jest-community/jest-snapshots-svg ?

标签： javascript reactjs svg jestjs font-awesome

【解决方案1】：

我们的解决方案是为我们要导入的 svg 组件创建一个 jest.mock。最终，我们不想在自己的测试中测试外国库，所以这是我们接受的解决方案。

例如：

jest.mock('@materialui/icons', () => ({ 
    SomeIcon: () => <div>SomeIconHere</div>,
    // etc...
});

这有助于保持我们的快照测试稳定。

【讨论】：

【解决方案2】：

人们一直在通过覆盖 Math.random 来解决这个问题（这有点像 hack）：

https://github.com/FortAwesome/react-fontawesome/issues/194

【讨论】：