Same code generating different snapshots on different machines

Question

We're using git for version control, so the code is the same. But if I generate snapshots, and my coworkers run the tests, they all fail on the snapshot part. Why can this happen?

Example component

import React from 'react';
import styled from 'styled-components';
import classnames from 'classnames';
import { colors } from '../../utils/css';

const ProgressIcon = ({ className, progress, color }) => (
  
    
      
    
  
);

export const StyledProgressIcon = styled(ProgressIcon)`
  width: 12.8px;
  height: 12.8px;
  margin: 0;
  div {
    margin: 0;
  }

  .background.white {
    border: 2px solid ${colors.LG_WHITE};
  }

  .background.gray {
    border: 2px solid ${colors.LG_GRAY_2};
  }

  .background {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-sizing: border-box;

    .icon {
      height: 100%;
    }

    .icon.white {
       background: ${colors.LG_WHITE};
    }

    .icon.gray {
       background: ${colors.LG_GRAY_2};
    }

    .icon.full {
      width: 100%;
    }

    .icon.half {
      width: 50%;    
    }

    .icon.empty {
      width: 0;
    }
  }
`;

Test

import React from 'react';
import { shallow } from 'enzyme';
import { StyledProgressIcon as ProgressIcon } from '../ProgressIcon';

describe('',
  () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow();
    });
    it('should match the snapshot', () => {
      expect(wrapper).toMatchSnapshot();
    });
  });

I'm comparing the snapshots created by my coworkers (Everybody else's tests are passing with the exact same snapshots, and code. It only fails on my machine)

Here is the log

FAIL  src/components/ProgressIcon/test/ProgressIcon.test.js

●  › should match the snapshot

expect(received).toMatchSnapshot()

Snapshot name: ` should match the snapshot 1`

- Snapshot
+ Received

@@ -4,11 +4,11 @@
      Object {
        "$$typeof": Symbol(react.forward_ref),
        "attrs": Array [],
        "componentStyle": ComponentStyle {
          "componentId": "sc-bdVaJa",
-         "isStatic": false,
+         "isStatic": true,
          "rules": Array [
            "
    width: 12.8px;
    height: 12.8px;
    margin: 0;
@@ -69,11 +69,10 @@
        "foldedComponentIds": Array [],
        "render": [Function],
        "styledComponentId": "sc-bdVaJa",
        "target": [Function],
        "toString": [Function],
-       "usesTheme": false,
        "warnTooManyClasses": [Function],
        "withComponent": [Function],
      }
    }
    forwardedRef={null}

  10 |     });
  11 |     it('should match the snapshot', () => {
> 12 |       expect(wrapper).toMatchSnapshot();
     |                       ^
  13 |     });
  14 |   });
  15 |

  at Object.toMatchSnapshot (src/components/ProgressIcon/test/ProgressIcon.test.js:12:23)

And the reverse is if I generate snapshots, and my coworkers test. Why is this happening and how can I fix this?

user_1998725 · Answer

There is a version mismatch in your styled-components lib dependency. As explained here

It is the styled component's shallow render that shows you that "isStatic": false value

Both of you need to sync up your dependencies. First

make sure that both have the same package.json.

Then the surefire way to do this is. In one of your computers

Remove node_modules

delete package-lock.json

Run npm install

Commit your package-lock.json! (ignore if no changes)

Go to all other PCs.

Pull in the changes to package lock json (reject all local and accept all remote changes).

Remove node_modules.

Run npm install.

Now run your tests and check, the snapshots should be equal.

user_6517383 · Answer

I fixed it by installing https://github.com/styled-components/jest-styled-components Although I've followed the above mentioned points as well but I think this one should also fix the issue.

yarn add --dev jest-styled-components

Usage

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'

const Button = styled.button`
  color: red;
`

test('it works', () => {
  const tree = renderer.create(

Same code generating different snapshots on different machines

2 Answers