Сгенерированный снимок с компонентами в стиле 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.

Любое понимание будет оценено.