Отладочные тесты в тесте NG

Я использую Angular CLI и VS-код, но ни одна из моих точек останова в моих спецификационных файлах, кажется, не получает удар при запуске ng test?

Мне нужно сделать некоторые настройки?

ОТВЕТЫ

Ответ 1

Остальные ответы - полностью правильные ответы, но, пользуясь Angular около 18 месяцев, я стараюсь делать это в браузере - инструменты Chrome!

Запустите ng test, затем f12 и найдите файл spec через контекст веб-пакета. Добавьте точку останова (ов) и обновите, и она достигнет указанных точек останова. Согласно скриншоту

enter image description here

Ответ 2

В новой версии VSCode (1.14.0) они следуют за этим recipe:

Вы можете полностью отлаживать приложение Angular (включая модульные тесты), рецепт прост.

Ответ 3

Это то, что у меня работало с Angular CLI 1.0. * И Chrome на Windows 7.

Изменить файлы конфигурации

В корневой директории вашего проекта откройте karma.conf.js. Сразу после singleRun: false добавление , за которым следует этот раздел:

    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333' ]
      }
    }

Добавьте конфигурацию в .vscode/launch.json:

    {
      "type": "chrome",
      "request": "attach",
      "name": "Unit tests",
      "address": "localhost",
      "port": 9333,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}"
    },

Начать отладку

  1. Запустите ng test --browsers ChromeDebug

  2. Дождитесь запуска браузера Chrome. Вы увидите что-то подобное в командной строке:

    01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrency

  3. Установите .spec.ts останова в одном из ваших файлов .spec.ts.

  4. В Visual Studio Code выберите конфигурацию отладочных Unit tests модулей и нажмите F5 (кнопка "Начать отладку").

  5. Нажмите Shift+Ctrl+F5 или обновите окно Chrome, чтобы повторно запустить тесты и достичь точки останова.

Для удобства

Вы также можете изменить свой package.json и добавить новый скрипт:

"test-debug": "ng test --browsers ChromeDebug",

Тогда в следующий раз, когда вы захотите запустить ng test с отладкой, просто запустите:

npm run test-debug

Рекомендации:

Ответ 4

Просто чтобы добавить к другим ответам:

  • Следуйте указанным инструкциям @titusfx.
  • В терминале запустите ng test.
  • В представлении отладки кода Visual Studio выберите ng test из выпадающего списка.
  • вам может понадобиться обновить браузер, если вы не можете достичь точек останова в первый раз.

enter image description here

Ответ 5

Вы можете просто добавить "отладчик", где вы хотите отладить и запустить

ng test

Когда откроется браузер Chrome, включите инструменты разработчика, и он остановится на вашем "отладчике".