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

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

您的 styled-components lib 依赖项中存在版本不匹配。如解释 here

样式化组件的浅层渲染向您显示 "isStatic": false 值

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

确保两者具有相同的 package.json。

那么做到这一点的可靠方法是。在您的一台计算机上

• 删除节点模块
• 删除 package-lock.json
• 运行 npm install
• 提交您的 package-lock.json！ （如果没有变化则忽略）

转到所有其他 PC。

• 拉入对包锁json的更改（拒绝所有本地并接受所有远程更改）。
• 删除 node_modules。
• 运行 npm install。

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

Answer 2

我通过安装https://github.com/styled-components/jest-styled-components 修复了它 虽然我也遵循了上述几点，但我认为这也应该解决这个问题。

yarn add --dev jest-styled-components

用法

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(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
  expect(tree).toHaveStyleRule('color', 'red')
})