javascript - 相同的代码在不同的机器上生成不同的快照

Question

我们使用 git 进行版本控制，所以代码是一样的。但是，如果我生成快照，而我的同事运行测试，则它们都在快照部分失败。为什么会发生这种情况？

示例组件

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

const ProgressIcon = ({ className, progress, color }) => (
  <div className={className}>
    <div className={classnames('background', color)}>
      <div className={classnames('icon', progress, color)}/>
    </div>
  </div>
);

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;
    }
  }
`;

测试

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

describe('<ProgressIcon/>',
  () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<ProgressIcon progress={'full'} color={'gray'}/>);
    });
    it('should match the snapshot', () => {
      expect(wrapper).toMatchSnapshot();
    });
  });

我正在比较我的同事创建的快照(其他人的测试都通过了完全相同的快照和代码。它只在我的机器上失败了)

这是日志

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

● <ProgressIcon/> › should match the snapshot

expect(received).toMatchSnapshot()

Snapshot name: `<ProgressIcon/> 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)

反之，如果我生成快照，然后我的同事进行测试。为什么会发生这种情况，我该如何解决？

Answer 1

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

正是样式化组件的浅层渲染向您展示了 "isStatic": false 值

你们都需要同步你的依赖。首先

make sure that both have the same package.json.

那么做到这一点的万无一失的方法是。在你的一台电脑上

• Remove node_modules
• delete package-lock.json
• Run npm install
• Commit your package-lock.json! (ignore if no changes)

转到所有其他 PC。

• Pull in the changes to package lock json (reject all local and accept all remote changes).
• Remove node_modules.
• Run npm install.

现在运行测试并检查，快照应该相等。