Один и тот же код генерирует разные снимки на разных машинах - PullRequest
Новая
       73

Один и тот же код генерирует разные снимки на разных машинах

1 голос
/ 15 октября 2019

Мы используем 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)

И наоборот, если я создаю снимки и проверяю своих коллег. Почему это происходит и как я могу это исправить?

1 Ответ

2 голосов
/ 15 октября 2019

Существует несоответствие версий в вашей зависимости lib стилевых компонентов. Как объяснено здесь

Это поверхностный рендеринг компонента, который показывает, что "isStatic": false значение

Оба из васнужно синхронизировать ваши зависимости. Сначала

убедитесь, что оба пакета имеют одинаковый package.json.

Тогда верный способ сделать это. На одном из ваших компьютеров

  • Удалите node_modules
  • delete package-lock.json
  • Запустите npm install
  • Зафиксируйте ваш пакет-lock.json! (игнорировать, если нет изменений)

Перейти на все остальные ПК.

  • Внесите изменения в пакет блокировки json (отклонить все локальные и принять все удаленные изменения).
  • Удалить node_modules.
  • Запустить npm install.

Теперь запустите ваши тесты и проверьте, что снимки должны быть равны.

...