在不同环境中使用笑话风格的组件生成的快照乱序

Question

我正在开发一个使用样式组件和玩笑的项目，并对我的 React 组件的初始渲染进行快照测试。我可以在本地运行这些测试，这会按预期生成快照。测试文件以及生成的快照都已签入版本控制。后来，在运行 CI 步骤时，由于内容相同的类名乱序，测试返回失败。

\n\n

快照：

\n\n

exports[`TransparentListItem should render 1`] = `\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.c1 {\n  margin-left: 20px;\n  color: #8288A0 !important;\n}\n\n.c2 {\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 22px;\n  -webkit-letter-spacing: 0.3px;\n  -moz-letter-spacing: 0.3px;\n  -ms-letter-spacing: 0.3px;\n  letter-spacing: 0.3px;\n  font-family: \'Nunito Sans\',sans-serif;\n  font-weight: 500;\n  color: #44485B;\n  margin-bottom: 10px;\n  margin-top: 10px;\n}\n\n<div\n  className="c0"\n>\n  <h4\n    className="c1 c2"\n    size={4}\n  />\n</div>\n`;\n

\n\n

测试输出：

\n\n

 FAIL  src/components/TransparentListItem/TransparentListItem.test.js (14.986s)\n  \xe2\x97\x8f TransparentListItem \xe2\x80\xba should render\n\n    expect(value).toMatchSnapshot()\n\n    Received value does not match stored snapshot 1.\n\n    - Snapshot\n    + Received\n\n    @@ -1,5 +1,20 @@\n    + .c2 {\n    +   font-weight: 600;\n    +   font-size: 16px;\n    +   line-height: 22px;\n    +   -webkit-letter-spacing: 0.3px;\n    +   -moz-letter-spacing: 0.3px;\n    +   -ms-letter-spacing: 0.3px;\n    +   letter-spacing: 0.3px;\n    +   font-family: \'Nunito Sans\',sans-serif;\n    +   font-weight: 500;\n    +   color: #44485B;\n    +   margin-bottom: 10px;\n    +   margin-top: 10px;\n    + }\n    + \n      .c0 {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: flex;\n    @@ -12,25 +27,10 @@\n      .c1 {\n        margin-left: 20px;\n        color: #8288A0 !important;\n      }\n\n    - .c2 {\n    -   font-weight: 600;\n    -   font-size: 16px;\n    -   line-height: 22px;\n    -   -webkit-letter-spacing: 0.3px;\n    -   -moz-letter-spacing: 0.3px;\n    -   -ms-letter-spacing: 0.3px;\n    -   letter-spacing: 0.3px;\n    -   font-family: \'Nunito Sans\',sans-serif;\n    -   font-weight: 500;\n    -   color: #44485B;\n    -   margin-bottom: 10px;\n    -   margin-top: 10px;\n    - }\n    - \n      <div\n        className="c0"\n      >\n        <h4\n          className="c1 c2"\n\n       7 |   it(\'should render\', () => {\n       8 |     const tree = renderer.create(<TransparentListItem />).toJSON();\n    >  9 |     expect(tree).toMatchSnapshot();\n      10 |   });\n      11 | });\n      12 | \n\n      at Object.<anonymous> (src/components/TransparentListItem/TransparentListItem.test.js:9:18)\n

\n\n

在本例中c2保存在下面c1，但是当测试运行时它会显示在上面c0。

\n\n

任何见解将不胜感激。

\n

Answer 1

您需要更新快照以匹配当前生成的类名称。尝试\xc2\xa0 jest --u\xc2\xa0或\xc2\xa0 jest --updateSnapshot\xc2\xa0它应该更新类名。\n希望这有帮助！

\n