Я хочу отлаживать тесты Кармы в VS Code, но я не выяснил, как это сделать. Есть ли способ сделать это, или мне придется использовать другую IDE (WebStorm)?
Как отладить тесты кармы в коде Visual Studio?
Ответ 1
Пытаться
{
"name": "jasmine",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
"stopOnEntry": false,
"args": [
"JASMINE_CONFIG_PATH=${workspaceRoot}/spec/support/jasmine.json"
],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
}
}
Ответ 2
Вы можете отлаживать Karma, подключив отладчик к экземпляру Chrome. Вы бы хотели настроить свою конфигурацию launch.json
примерно так:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach Karma Chrome",
"address": "localhost",
"port": 9333,
"pathMapping": {
"/": "${workspaceRoot}/",
"/base/": "${workspaceRoot}/"
}
}
]
}
Но вам также необходимо настроить karma.conf.js config
, чтобы он запускал экземпляр Chrome с инструментами разработки, слушающими порт 9333
, например:
browsers: [
'ChromeDebugging'
],
customLaunchers: {
ChromeDebugging: {
base: 'Chrome',
flags: [ '--remote-debugging-port=9333' ]
}
},
При такой настройке вы можете просто запустить свой сервер кармы (с захваченным браузером), а затем начать отладку в Visual Studio.
Если вы хотите узнать больше, я сделал учебник по отладке Karma с помощью кода Visual Studio.
Ответ 3
Использование Angular CLI 1.7.4: с помощью следующих шагов я смог отладить приложение Angular hello world с помощью кода Visual Studio:
-
Создайте свежий проект HelloWorld:
ng new HelloWorld
-
Откройте проект в Visual Studio Code
code HelloWorld
-
Создайте новую конфигурацию Debug:
-
.vscode/launch.json
создается и открывается. Заменить его содержание следующим:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Karma Tests",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"url": "http://localhost:9876/debug.html",
// "runtimeArgs": [
// "--headless"
// ],
"pathMapping": {
"/": "${workspaceRoot}",
"/base/": "${workspaceRoot}/"
},
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
"meteor://💻app/*": "${webRoot}/*"
}
}
]
}
-
Откройте
karma.conf.js
иkarma.conf.js
следующие изменения: -
Откройте терминал и запустите тесты кармы:
ng test
-
Откройте
app.component.spec.ts
и установите точкуapp.component.spec.ts
: -
Выберите "Тесты кармы" в меню отладки:
-
Нажмите
F5
чтобы начать отладку. VSCode должен остановиться в точке останова:
Ответ 4
Вот более простая конфигурация (в launch.json
):
{
"type": "chrome",
"request": "launch",
"name": "Test",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/Test",
"url": "http://localhost:9876/debug.html",
"runtimeArgs": [
"--headless"
]
}
Важный:
- Измените
webRoot
на папку, из которой Karma обслуживает ваши тесты. - Это предполагает, что Karma работает на порту 9876. Если это не так, измените
url
соответствующим образом.
Эта конфигурация проще по ряду причин:
- Вам не нужно помнить, чтобы нажать кнопку "Отладка" в пользовательском интерфейсе Karma или обновить страницу после подключения отладчика.
- Вам не нужно добавлять собственный модуль запуска в конфигурацию Karma. Вам просто нужно убедиться, что у вас есть
singleRun: false
. Вы даже можете установитьbrowsers: []
, так как VS Code запустит свой собственный браузер (в автономном режиме, поэтому вы его не увидите). - Я работаю в режиме без головы, потому что вам больше не нужно видеть браузер, поскольку вы можете выполнять отладку в коде VS.
- Обратите внимание, что вам все равно нужно запустить Karma перед запуском отладчика. Вы можете улучшить эту конфигурацию, добавив
preLaunchTask
который автоматически запускает Karma. Вам нужно будет настроить его в качестве фоновой задачи.
Ответ 5
Я последовал за @Awsed отличным объяснением [Спасибо!] И смог заставить все работать, с несколькими заметными оговорками:
Кажется, что ошибка в VSCode вызывает проблемы с отслеживанием строк точки прерывания в файлах спецификаций. Я не ударил свою точку останова даже после правильной настройки, потому что VSCode, похоже, путается о том, в какой строке находится точка останова, особенно если вы меняете какой-либо код. Я не мог найти никаких средств для этого (даже после двух перезагрузок и повторного запуска VSCode несколько раз). Я смог узнать это, перейдя в тестовый файл, который не был изменен через некоторое время и смог успешно ударить точку останова. Поэтому я переместил точку останова в разные места на странице в файле, с которым у меня возникли проблемы, и смог найти местоположение, которое оно (наконец) попало бы в точку останова.
Кроме того, я не рекомендую использовать Chrome без заголовка, так как кнопка "Стоп" не убивает процесс, и вы не можете найти его в диспетчере задач, так как он безгласен - вам нужно использовать команду, чтобы убить его (например, https ://superuser.com/questions/1288388/how-can-i-kill-all-headless-chrome-instances-from-the-command-line-on-windows); если вы этого не сделаете, вы не сможете запустить его снова.
Ответ 6
Для тех, кто пришел сюда в поисках тестов на угловую отладку кармы - см. vscode-recipe от Microsoft.