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

您的样式组件lib依赖项中存在版本不匹配。如前所述 here

样式化组件的浅层渲染向您显示“ isStatic”：false 值

你们两个都需要同步依赖关系。首先

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

然后是确保成功的方法。在您的一台计算机上

删除node_modules

删除package-lock.json

运行npm install

提交您的package-lock.json！（忽略是否没有变化）

转到所有其他PC。

将更改添加到包lock 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')
})

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

2 个答案: