Моментальные тесты - отличный способ протестировать пользовательский интерфейс, не проверяя вручную, что каждый элемент виден, оформлен и находится в нужном месте. Каждый тест снимка имеет файл снимка, 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