В этой статье мы настроим приложение VueJs для включения отладки юнит-тестов jest внутри vscode. Я предполагаю, что у вас есть проект приложения Vue, созданный из vue-cli и использующий webpack.

Добавить задачу отладки

Для отладки нам нужно заставить узел выполнять модульные тесты с флагом inspect-brk. Добавить следующую задачу в раздел scripts в package.json

"test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --no-cache --watch --runInBand"

Настроить преобразование ES6

В документации Unit-jest есть подробные инструкции по отладке тестов и трансформации ES6. Чтобы заставить babel работать над модульными тестами, добавьте следующее в jest.config.js

transformIgnorePatterns: ['/node_modules/(?!@babel)']

Добавить конфигурацию запуска отладки в vscode

Теперь мы добавим в vscode конфигурацию запуска с именем Debug Unit Tests. Откройте .vscode/launch.json и добавьте следующую конфигурацию.

{
  "version": "0.2.0",
  "configurations": [
   {
      "type": "node",
      "request": "launch",
      "name": "Debug Unit Tests",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "test:debug",
        "${file}"
      ],
      "port": 9229
    }
  ]
}

Отладка jest unit test

  1. Откройте нужный файл спецификации jest в vscode и сделайте его активной вкладкой.
  2. Добавьте debugger операторов в этот файл спецификации.
  3. Откройте вид Debug (Ctrl + Shift + D).
  4. Установите активную конфигурацию на Debug Unit Tests и нажмите Start Debugging (зеленая стрелка).
  5. Внутри DEBUG CONSOLE вы должны увидеть прослушивание и подключение отладчика.
  6. Через некоторое время выполнение должно остановиться на операторе отладчика, и вы сможете отлаживать код :)

Посетите репозиторий vue-todo-app, чтобы увидеть его в действии.