Snapshot tests with Styled-Components fail in the CI pipeline due to different class index

Question

I am using react-testing-library and jest-styled-components to do snapshot tests. It has been working fine before but now the snapshot tests of many components are failing in the CI pipeline (Gitlab) just because of a different index in the hashed class name placeholders generated by jest-styled-components:

   - Snapshot
+ Received

@@ -1,19 +1,19 @@
- .c4 {
+ .c3 {
    font-size: 14px;
    height: 14px;
    min-height: 14px;
    min-width: 14px;
    width: 14px;
  }

- .c4 > svg {
+ .c3 > svg {
    fill: currentColor;
    pointer-events: none;
  }

- .c4 > svg * {
+ .c3 > svg * {
    height: 100%;
    width: 100%;
  }

  .c2 .ant-calendar-picker-input.ant-input {
@@ -26,15 +26,15 @@

  .c0 {
    position: relative;
  }

- .c3 {
+ .c4 {
    color: #00293a;
  }

- .c1 .c3 {
+ .c1 .c4 {
    color: #00293a;
  }

  <div>
    <div
@@ -49,11 +49,11 @@
            placeholder="Select date"
            readonly=""
            value=""
          />
          <div
-           class="ant-calendar-picker-icon c3 c4"
+           class="c3 c4 ant-calendar-picker-icon"
            data-testid="icon_arrowDown"
            size="14"
          >
            <file-mock />
          </div>

  21 |   it('renders correctly', () => {
  22 |     const { container } = renderWithProps()
> 23 |     expect(container).toMatchSnapshot()
     |                       ^
  24 |   })
  25 | })
  26 |

When running the tests locally, there is no problem.

Does someone have an idea about what is going wrong?

For styled components, minor version changes can result in changing of the class-index which is used in snapshots. Make sure the version numbers in package.json file are constant. If you need to be flexible with the hot fixes, then I'd suggest using `tilde (~)` instead of `caret(^)` against your package versions. To read more about versioning refer : https://stackoverflow.com/a/22345808/3609255 — Nayab Siddiqui, Oct 31 '19 at 08:03

score 2 · Answer 1 · answered Oct 04 '19 at 11:09

Making sure the same versions of the packages are used locally and in the CI solved it.

After deleting node_modules and running the same install command as in the CI, running the tests locally changed the snapshots. I updated the snapshots, committed and pushed the changes and the pipeline ran successfully.

Snapshot tests with Styled-Components fail in the CI pipeline due to different class index

1 Answers1