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

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 value

你们都需要同步你的依赖项。第一

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)

转到所有其他电脑。

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

Remove node_modules.

Run 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')
})

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

Same code generating different snapshots on different machines

javascript

unit-testing

snapshot

jestjs

enzyme