Как работает тестирование снимков и что делает функция toMatchSnapshot () в тестировании снимков Jest для компонентов React? - PullRequest
Новая
       9

Как работает тестирование снимков и что делает функция toMatchSnapshot () в тестировании снимков Jest для компонентов React?

0 голосов
/ 07 мая 2018

Я новичок в тестировании Jest, и я рассматривал несколько примеров написания тестовых примеров в компонентах Jest for React. Я наткнулся на тестирование снимков и пытался понять, что это на самом деле. И вот что я натолкнулся из Интернета: "Тестирование моментальных снимков - это способ подтвердить результат данного теста путем генерирования Json-представления его вывода." Так что у меня есть 2 сомнения в тестировании моментальных снимков на данный момент :

1) Допустим, у нас есть простой компонент с простым абзацем. Итак, если я попытаюсь протестировать его с помощью снэпшота, как он будет преобразован в JSON-представление компонента? И когда это полезно?

2) Я натолкнулся на пример, который выглядел так: 

    Wrapper = shallow(<First_Component />);

   it("displays the result", () => {
      const test = Wrapper.find(Second_Component).length;
      expect(test).toMatchSnapshot();
   });

Итак, мой вопрос с приведенным выше кодом: как здесь работает toMatchSnapshot () ?

Ответы [ 2 ]

0 голосов
/ 02 мая 2019

Я думаю, что на этот вопрос не ответили достаточно подробно! Тестирование снимков основано на истории ваших предыдущих тестов. Когда вы впервые запускаете тест снимка, он создает текстовый файл, включающий в себя текстовый рендер вашего дерева компонентов. Например следующий тест: 

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Создает следующий текстовый файл: 

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

Вам нужно сохранить эти файлы снимков в вашей VCS (git). Когда вы вносите изменение, вы можете запустить эти тесты, чтобы увидеть, соответствует ли оно текстовому файлу моментального снимка или нет.

для более детального изучения изучите этот документ: https://jestjs.io/docs/en/snapshot-testing

0 голосов
/ 07 мая 2018

Snapshots позволяет вам проверить, правильно ли отображается ваш компонент, в вашем случае 

expect(Wrapper).toMatchSnapshot()

Если вы хотите проверить количество вхождений данного компонента, импортируйте второй компонент и создайте свой тест: 

it("displays the result", () => {
  const test = Wrapper.find(Second_Component).length;
  expect(test).toEqual(1); // or the number of occurrence you're expecting
});

Если вы заинтересованы в JSON-представлении ваших компонентов, вы можете использовать фермент-json-пакет , который предназначен для этой цели

...