reactjs - 在不同环境中乱序生成带有 jest-styled-components 的快照

问题描述

我正在使用 styled-components 和 jest 进行一个项目，并对我的 React 组件的初始渲染进行快照测试。我可以在本地运行这些测试，并按预期生成快照。测试文件连同生成的快照都被签入到版本控制中。稍后，在运行 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。

任何见解将不胜感激。

标签： reactjsjestjsstyled-components

reactjs - 在不同环境中乱序生成带有 jest-styled-components 的快照

问题描述

解决方案

推荐阅读