Моментальные тесты - отличный способ протестировать пользовательский интерфейс, не проверяя вручную, что каждый элемент виден, оформлен и находится в нужном месте. Каждый тест снимка имеет файл снимка, JSON, JS или HTML, который обычно находится в этом каталоге /__snapshots__. Эти снимки сериализуют пользовательский интерфейс в выбранный вами момент и сохраняют его в этом каталоге для использования в будущем для сравнения. Каждый раз, когда запускается тест снимка, создается новый снимок, который сравнивается с сохраненным снимком в __snapshots__. Вот как тесты моментальных снимков обнаруживают изменения в пользовательском интерфейсе, но что, если вы намеревались сделать это изменение? Как бы вы обновили сохраненные снимки, чтобы отразить запланированные изменения?

Это рабочий процесс, который я использую, чтобы убедиться, что тесты моментальных снимков обновляются с предполагаемыми изменениями:

  • * Запустите тест снимков, убедитесь, что он прошел - если не прошел, найдите проблему и исправьте ее, не меняйте пользовательский интерфейс, пока тест не пройдет.
  • Измените UI.
  • Повторно запустите тест снимка, он должен завершиться неудачно, и в этом случае он должен обнаружить внесенные вами изменения пользовательского интерфейса - если он не работает по другим причинам, вы, вероятно, внесли ошибку в код, которую необходимо исправить.
  • Обновите файлы снимков.
  • Повторно запустите тест снимков; он должен пройти - в случае сбоя вы, вероятно, обновили неправильные файлы моментальных снимков.
  • Зафиксируйте изменения пользовательского интерфейса и файлов моментальных снимков.

* Это мешает разработке через тестирование, поскольку мы не можем писать тесты заранее. Моментальные тесты не предназначены для стимулирования разработки; поэтому TDD к ним не применяется. Кроме того, предугадывать, как будут выглядеть снимки, и редактировать снимки вручную - пустая трата времени.

Запустите тест снимка

Я использую yarn, но вы также можете использовать npm для запуска тестов моментальных снимков:

yarn jest tests/snapshot_tests

Я использую Vue, поэтому тестовая команда использует Vue CLI, который гарантирует, что важные переменные среды Vue загружаются и работают в NodeJS. Vue CLI в конце концов действительно вызывает jest:

yarn vue-cli-service test:unit tests/snapshot_tests

Результат должен быть:

Измените UI

Я тривиально изменил формулировку лейбла.

До:

<label for="invoiceNumber">Select {{ reference_label }}</label>

После:

<label for="invoiceNumber">{{ reference_label }}</label>

Повторите тест снимков - подтвердите, что он не работает при внесении изменений

Ярлык был изменен с Select {{ reference_label }} на {{ reference_label }}. Я ожидаю, что тест снимка обнаружит это изменение, поэтому запустите тест еще раз, и вы должны получить:

Здесь следует обратить внимание на две вещи:

  • Имя снимка Transaction Form renders correctly 1 взято из имени тестового костюма Transaction From плюс имя тестового примера renders correctly, а Jest добавляет 1 - я полагаю, чтобы избежать дублирования?
  • Снимок указывает, где ошибка возникает в обработанном HTML, но не в коде Vue. Вам нужно будет перейти к номеру строки, указанному под выходными данными об ошибке (ссылка выделена синим цветом в нижней части снимка экрана), чтобы выяснить причину ошибки. Тем не менее, это отличный способ увидеть, как выглядит изменение пользовательского интерфейса, и определить, является ли изменение ошибкой или преднамеренным.

Обновите файлы снимков

При этом существующий снимок будет заменен новым с внесенными вами изменениями пользовательского интерфейса.

Использование Jest:

yarn jest tests/snapshot_tests/TransactionForm.spec.js -u

Использование Vue CLI:

yarn run vue-cli-service test:unit 'tests/snapshot_tests/TransactionForm.spec.js' -u

-u - это сокращение от --updateSnapshot.

Повторите тест снимков - он должен пройти

Использование Jest:

yarn jest tests/snapshot_tests/TransactionForm.spec.js

Использование Vue CLI:

yarn run vue-cli-service test:unit 'tests/snapshot_tests/TransactionForm.spec.js'

Зафиксируйте изменения

Теперь, когда пользовательский интерфейс обновлен, снимки обновлены и тесты проходят, вам необходимо зафиксировать все изменения:

  • Пользовательский интерфейс, конечно, меняется.
  • Обновленный файл снимка.

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

Устаревшие снимки

Иногда вы можете столкнуться с устаревшими снимками при запуске тестов снимков:

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

Исправьте это, обновив файл моментального снимка. Это заменит старый снимок новым с правильным именем. Вам нужно будет делать это каждый раз, когда вы меняете набор тестов или названия кейсов.

Источники

Больше контента на plainenglish.io