Тесты в Jest мощные, но отладка тестов Jest может оказаться сложной.

Для меня отладка тестов с использованием Jest обычно состояла из нескольких console.log statements. Может быть действительно сложно выяснить проблему в тесте без возможности пошагового выполнения кода. К счастью, Chrome Node DevTools позволяет нам использовать debugger или точки останова, так что мы можем шагать по нашему коду и изучать объекты. Это может позволить нам разрешить некоторые из тех сложных ситуаций, когда console.log просто не предоставляет достаточно информации, всего за несколько шагов.

  • Вставьте debugger в свой тест

  • На новой вкладке Chrome введите chrome://inspect
  • Нажмите «Открыть выделенный DevTools для узла».

  • В вашем терминале введите
node —-inspect node_modules/.bin/jest --runInBand <path_to_test>

Примечание * <path_to_test> - это фактический путь к вашему тесту

Используя параметр Jest —-runInBand, мы можем заставить Jest запускать каждый тест последовательно (в том порядке, в котором они появляются в вашем файле). Это позволяет консоли останавливаться на операторе debugger, а не продолжать выполнение других тестов в других процессах. Ознакомьтесь с документацией здесь. В дополнение к вышеупомянутой опции одиночного запуска у вас также есть возможность объединить ее с режимом Jest --watch, который будет повторно запускать тест после каждого сохраненного изменения.

Ваш тест должен быть приостановлен в Chrome DevTools, где теперь вы можете использовать все инструменты, которые обычно используются в инспекторе Chrome.

Упростите процесс отладки, превратив эту команду в сценарий NPM. Добавьте приведенный ниже код в свои package.json сценарии и запустите его из командной строки.

npm run test:debug <path_to_test>

{
  "scripts": {
    "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
  }
}

Дополнительным бонусом для моих коллег-пользователей VSCode является плагин Debugger for Chrome, и вы можете воспроизвести тот же процесс прямо в своем редакторе!

Удачной отладки!