当包含Fontawesome-React图标组件时,Jest快照测试失败。title
或 aria-labelledby
的SVG组件,即使我将这些道具传递给它,快照也会继续对这些道具进行哈希处理。测试无法通过,因为每次测试运行时,这两个道具都会生成新的哈希值。
"@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...
});
这有助于保持快照测试的稳定性。
人们一直在用重写的方式解决这个问题(这是一种黑客行为)。Math.random
: