Снимки Jest все чаще используются для тестирования компонентов React. Моментальные снимки обычно тестируют начальную отрисовку компонента, в то время как тестирование в стиле DOM должно использоваться для более интерактивного и манипулятивного тестирования.

Например

  • Чтобы протестировать кнопку, которая переключается, мы можем использовать снимок для проверки начального состояния рендеринга и стиля. Затем мы напишем тест стиля dom, чтобы проверить функциональность переключения, имитируя нажатие кнопки и проверяя, что кнопка менялась при нажатии, как ожидалось.

В этом посте мы будем обсуждать моментальные снимки конкретно, но чтобы узнать больше о модульном тестировании с Jest в целом, зайдите на страницу: https://jestjs.io/docs/en/tutorial-react.

Основы тестирования снимков

Что такое тест снимка:

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

  • Встроен в Jest - дополнительная библиотека не используется - тип модульного теста
  • Только одно из более чем 20 утверждений, поставляемых с Jest.
  • Тесты на визуализированный HTML
  • Не предназначен для замены логики и интерактивных модульных тестов, это просто дополнительный тест для визуализированной разметки.

Документация:

Мои любимые часто задаваемые вопросы из документации Jest:

В чем разница между тестированием снимков и визуальным регрессионным тестированием?

Моментальное тестирование и визуальное регрессионное тестирование - это два разных способа тестирования пользовательского интерфейса, и они служат разным целям. Инструменты визуального регрессионного тестирования делают снимки экрана веб-страниц и сравнивают полученные изображения попиксельно. При тестировании снимков значения сериализуются, сохраняются в текстовых файлах и сравниваются с использованием алгоритма сравнения. Существуют различные компромиссы, которые следует учитывать, и мы перечислили причины, по которым тестирование снимков было построено в блоге Jest.

Заменяет ли тестирование снимков модульное тестирование?

Тестирование моментальных снимков - лишь одно из более чем 20 утверждений, поставляемых с Jest. Цель моментального тестирования - не заменить существующие модульные тесты, а предоставить дополнительную ценность и сделать тестирование безболезненным. В некоторых сценариях тестирование моментальных снимков потенциально может устранить необходимость в модульном тестировании для определенного набора функций (например, компонентов React), но они также могут работать вместе.

Зачем нужны снимки:

  1. Экономит время - меньше строк кода нужно писать при тестировании небольших базовых компонентов.
  • Пример утверждения со снимком:
expect(button).toMatchSnapshot();
  • Пример утверждения без снимка:
expect(button).toBeTruthy();
expect(button.find(‘ButtonText’)).toHaveLength(1);
expect(button.find(‘ButtonText’).text()).toMatch(‘Save Class’);
expect(button.find(‘Image’)).toHaveLength(1);
expect(button.find(‘Image’).prop(‘src’)).toBeTruthy();
expect(button.find(‘Image’).prop(‘src’)).toContain(‘saveWhite.svg’);
  • Более подробный тест - он предназначен не только для проверки того, что все элементы отображаются, но и связанных стилей.
  • Выделяет изменения в других компонентах при внесении в общий ресурс - например, повторно используемое значение компонента / темы.
  • Например: изменение значения темы для среднего fontSize приведет к сбою моментальных снимков, использующих это указанное значение темы. Таким образом, кажущиеся небольшими изменения будут выделены во всех затронутых компонентах.

Лифты:

  • Вам нужно прочитать исходный снимок и убедиться, что в нем есть все, что вы хотите / ожидаете от этого компонента.
  • Затем, по мере появления изменений, вы должны подтвердить, что все было изменено, удалено или добавлено.

Хороший вариант использования теста снимков:

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

Пример: создать и протестировать снимок для компонента баннера:

describe('<Banner/>', () => {
  it(‘Snapshot renders correctly’, () => {
    const wrapper = toJson(
      <Banner message=’Snapshot Test’ />
    );
    expect(wrapper).toMatchSnapshot();
  });
})

Это создаст новый файл в локальной __snapshots__ папке с обработанной HTML-разметкой при запуске yarn test. Вам нужно будет прочитать разметку и убедиться, что ваш компонент отрисовывается должным образом. После проверки вы можете зафиксировать этот код.

По мере продолжения работы и внесения изменений может потребоваться обновление некоторых снимков. В зависимости от личных предпочтений вы можете запустить yarn test -w, чтобы следить за обновлениями в режиме реального времени, или вы можете запустить yarn test, чтобы выполнить все тесты одновременно. Когда изменение затрагивает моментальный снимок компонента, вы получите уведомление об ошибке для этого моментального снимка и получите различие кода. Изучив разницу, вы можете решить либо изменить свой код, чтобы сохранить снимок, либо сгенерировать новый снимок. Чтобы создать новый снимок на основе изменений кода, вы можете запустить yarn test -u для обновления. Опять же, вы хотите зафиксировать это изменение снимка, чтобы другие участники проекта могли сравнивать его.

Надеюсь, это помогло вам лучше понять тестирование снимков. Удачного кодирования! :)

использованная литература