В этой статье мы настроим приложение 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
- Откройте нужный файл спецификации jest в vscode и сделайте его активной вкладкой.
- Добавьте
debugger
операторов в этот файл спецификации. - Откройте вид
Debug
(Ctrl + Shift + D). - Установите активную конфигурацию на
Debug Unit Tests
и нажмитеStart Debugging
(зеленая стрелка). - Внутри
DEBUG CONSOLE
вы должны увидеть прослушивание и подключение отладчика. - Через некоторое время выполнение должно остановиться на операторе отладчика, и вы сможете отлаживать код :)
Посетите репозиторий vue-todo-app, чтобы увидеть его в действии.