包含 Fontawesome-React 图标组件时,Jest 快照测试失败。
我没有通过 title
或 aria-labelledby
到 SVG 组件,即使我确实将这些 Prop 传递给它,快照也会继续散列这些 Prop 。测试无法通过,因为每次测试运行时都会在这两个 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>
最佳答案
我们的解决方案是为我们正在导入的 svg 组件创建一个 jest.mock。
最终,我们不想在自己的测试中测试外国库,
所以这对我们来说是公认的解决方案。
例如:
jest.mock('@materialui/icons', () => ({
SomeIcon: () => <div>SomeIconHere</div>,
// etc...
});
这有助于保持我们的快照测试稳定。
关于javascript - Jest Snapshots 在 SVG Prop 上失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58308961/