Отладка в упражнениях по фронтенду

Большая часть упражнений с веб-доступом в профессии Фронтенд-программист тестируются библиотекой Testing Library. В таких упражнениях в тесты импортируется функция, запускающая фронтенд-приложение, и тесты симулируют поведение пользователя: кликают по кнопкам, заполняют поля форм и «читают» тексты ошибок.

Когда тесты получают неожиданный результат, выводится ошибка, с указанием состояния DOM — что ожидалось и что было получено. Но иногда может оказаться, что в веб-доступе всё работает, а тесты падают с ошибкой.

Как локализовать ошибку

  1. Изучите текст ошибки
  2. Перейдите к файлу с тестами и посмотрите, какие шаги выполняли тесты до строчки, на которой возникла ошибка
  3. Добавьте в код отладочную печать, чтобы увидеть входные и выходные данные перед каждым условием и для каждой функции
  4. Откройте веб-доступ и в нём консоль браузера
  5. Воспроизведите шаги тестов. Возможно, последовательность шагов и сообщения в консоли помогут найти ошибку
  6. Запустите повторно тесты и посмотрите, что показала отладочная печать на вкладке OUTPUT.

Как увидеть то же, что и тесты

Дополнительную информацию можно получить и от самих тестов.

При снепшотном тестировании в файле с тестами на верхнем уровне будет объявлена функция getTree(), возвращающая форматированный HTML, который в настоящее время «видят» тесты. Его можно просто вывести через console.log(getTree()). Для этого добавьте в тесты вызов отладчика после каждого действия и запустите проверку снова. Результаты его работы попадут на вкладку OUTPUT.

При тестировании через Testing Library аналогичную работу выполняет screen.debug(), этот отладчик сам отправляет результаты в консоль:

Отладка выполнена, причины ошибки непонятны

Задайте вопрос в разделе «Обсуждение»:

  • напишите, как вы думаете, почему произошла ошибка
  • сохраните ваше решение и вставьте ссылку на него в сообщение
  • хорошо, если в сохранённом решении будет отладочная печать — это позволит участникам сообщества получить максимум информации, чтобы помочь вам разобраться
  • при составлении вопроса используйте наши рекомендации.