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

Question

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

\n\n

示例组件

\n\n

import React from \'react\';\nimport styled from \'styled-components\';\nimport classnames from \'classnames\';\nimport { colors } from \'../../utils/css\';\n\nconst ProgressIcon = ({ className, progress, color }) => (\n  <div className={className}>\n    <div className={classnames(\'background\', color)}>\n      <div className={classnames(\'icon\', progress, color)}/>\n    </div>\n  </div>\n);\n\nexport const StyledProgressIcon = styled(ProgressIcon)`\n  width: 12.8px;\n  height: 12.8px;\n  margin: 0;\n  div {\n    margin: 0;\n  }\n\n  .background.white {\n    border: 2px solid ${colors.LG_WHITE};\n  }\n\n  .background.gray {\n    border: 2px solid ${colors.LG_GRAY_2};\n  }\n\n  .background {\n    height: 100%;\n    width: 100%;\n    border-radius: 50%;\n    box-sizing: border-box;\n\n    .icon {\n      height: 100%;\n    }\n\n    .icon.white {\n       background: ${colors.LG_WHITE};\n    }\n\n    .icon.gray {\n       background: ${colors.LG_GRAY_2};\n    }\n\n    .icon.full {\n      width: 100%;\n    }\n\n    .icon.half {\n      width: 50%;    \n    }\n\n    .icon.empty {\n      width: 0;\n    }\n  }\n`;\n

\n\n

测试

\n\n

import React from \'react\';\nimport { shallow } from \'enzyme\';\nimport { StyledProgressIcon as ProgressIcon } from \'../ProgressIcon\';\n\ndescribe(\'<ProgressIcon/>\',\n  () => {\n    let wrapper;\n    beforeEach(() => {\n      wrapper = shallow(<ProgressIcon progress={\'full\'} color={\'gray\'}/>);\n    });\n    it(\'should match the snapshot\', () => {\n      expect(wrapper).toMatchSnapshot();\n    });\n  });\n

\n\n

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

\n\n

这是日志

\n\n

FAIL  src/components/ProgressIcon/test/ProgressIcon.test.js\n\n\xe2\x97\x8f <ProgressIcon/> \xe2\x80\xba should match the snapshot\n\nexpect(received).toMatchSnapshot()\n\nSnapshot name: `<ProgressIcon/> should match the snapshot 1`\n\n- Snapshot\n+ Received\n\n@@ -4,11 +4,11 @@\n      Object {\n        "$$typeof": Symbol(react.forward_ref),\n        "attrs": Array [],\n        "componentStyle": ComponentStyle {\n          "componentId": "sc-bdVaJa",\n-         "isStatic": false,\n+         "isStatic": true,\n          "rules": Array [\n            "\n    width: 12.8px;\n    height: 12.8px;\n    margin: 0;\n@@ -69,11 +69,10 @@\n        "foldedComponentIds": Array [],\n        "render": [Function],\n        "styledComponentId": "sc-bdVaJa",\n        "target": [Function],\n        "toString": [Function],\n-       "usesTheme": false,\n        "warnTooManyClasses": [Function],\n        "withComponent": [Function],\n      }\n    }\n    forwardedRef={null}\n\n  10 |     });\n  11 |     it(\'should match the snapshot\', () => {\n> 12 |       expect(wrapper).toMatchSnapshot();\n     |                       ^\n  13 |     });\n  14 |   });\n  15 |\n\n  at Object.toMatchSnapshot (src/components/ProgressIcon/test/ProgressIcon.test.js:12:23)\n

\n\n

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

\n

Answer 1

您的样式组件库依赖项中存在版本不匹配。正如 这里所解释的

这是样式化组件的浅渲染向您显示“isStatic”：错误值

你们俩都需要同步你们的依赖关系。第一的

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

那么做到这一点的万无一失的方法就是。在您的一台计算机中

• 删除node_modules
• 删除 package-lock.json
• 运行 npm 安装
• 提交您的 package-lock.json！（若无变化则忽略）

转到所有其他电脑。

• 将更改拉入 package lock json（拒绝所有本地更改并接受所有远程更改）。
• 删除node_modules。
• 运行 npm 安装。

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