Как отладить тесты кармы в коде 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:

1. Создайте свежий проект HelloWorld:

   ng new HelloWorld

2. Откройте проект в Visual Studio Code

   code HelloWorld

3. Создайте новую конфигурацию Debug:

4. .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}/*"
            }
        }
    ]
}

5. Откройте karma.conf.js и karma.conf.js следующие изменения:

6. Откройте терминал и запустите тесты кармы:

   ng test

7. Откройте app.component.spec.ts и установите точку app.component.spec.ts:

8. Выберите "Тесты кармы" в меню отладки:

9. Нажмите 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.