reactjs - 在不同环境中使用 Jest 风格的组件生成的快照乱序

Question

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

快照:

exports[`TransparentListItem should render 1`] = `
.c0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c1 {
  margin-left: 20px;
  color: #8288A0 !important;
}

.c2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  -webkit-letter-spacing: 0.3px;
  -moz-letter-spacing: 0.3px;
  -ms-letter-spacing: 0.3px;
  letter-spacing: 0.3px;
  font-family: 'Nunito Sans',sans-serif;
  font-weight: 500;
  color: #44485B;
  margin-bottom: 10px;
  margin-top: 10px;
}

<div
  className="c0"
>
  <h4
    className="c1 c2"
    size={4}
  />
</div>
`;

测试输出:

 FAIL  src/components/TransparentListItem/TransparentListItem.test.js (14.986s)
  ● TransparentListItem › should render

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    @@ -1,5 +1,20 @@
    + .c2 {
    +   font-weight: 600;
    +   font-size: 16px;
    +   line-height: 22px;
    +   -webkit-letter-spacing: 0.3px;
    +   -moz-letter-spacing: 0.3px;
    +   -ms-letter-spacing: 0.3px;
    +   letter-spacing: 0.3px;
    +   font-family: 'Nunito Sans',sans-serif;
    +   font-weight: 500;
    +   color: #44485B;
    +   margin-bottom: 10px;
    +   margin-top: 10px;
    + }
    + 
      .c0 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    @@ -12,25 +27,10 @@
      .c1 {
        margin-left: 20px;
        color: #8288A0 !important;
      }

    - .c2 {
    -   font-weight: 600;
    -   font-size: 16px;
    -   line-height: 22px;
    -   -webkit-letter-spacing: 0.3px;
    -   -moz-letter-spacing: 0.3px;
    -   -ms-letter-spacing: 0.3px;
    -   letter-spacing: 0.3px;
    -   font-family: 'Nunito Sans',sans-serif;
    -   font-weight: 500;
    -   color: #44485B;
    -   margin-bottom: 10px;
    -   margin-top: 10px;
    - }
    - 
      <div
        className="c0"
      >
        <h4
          className="c1 c2"

       7 |   it('should render', () => {
       8 |     const tree = renderer.create(<TransparentListItem />).toJSON();
    >  9 |     expect(tree).toMatchSnapshot();
      10 |   });
      11 | });
      12 | 

      at Object.<anonymous> (src/components/TransparentListItem/TransparentListItem.test.js:9:18)

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

如有任何见解，我们将不胜感激。

Answer 1

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