web-dev-qa-db-ja.com

NG Testのデバッグテスト

Angular CLIおよびVSコードを使用していますが、ng testを実行したときにspecファイルのブレークポイントがヒットしていません。

構成を行う必要がありますか？

angularvisual-studio-codekarma-jasmineangular-cli
29
72GM

他の回答は完全に有効な回答ですが、約18か月間Angularを使用していたので、ブラウザでchromeツールを使用する傾向があります。

Ng testを実行してからf12を実行し、webpackコンテキストを介してspecファイルを見つけます。ブレークポイントを追加して更新すると、そのブレークポイントにヒットします。スクリーンショットごとに

enter image description here

33
72GM

VSCode（1.14.0）の新しいリリースでは、次のようになります recipe ：

Angularアプリを完全にデバッグできます（単体テストを含む）。レシピは簡単です。

15
titusfx

Angular 8.1.3 + Visual Studio Code 1.36.1アップデート

何らかの理由で_karma_webpack_プレフィックスがあるため（バージョン7にはありませんでした）、.vscode/launch.jsonにpathMappingセクションを追加する必要がありました。

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

これは、Windows 7でAngular CLI 1.0。*およびChromeを使用して機能したものです。

構成ファイルを変更する

プロジェクトのルートディレクトリで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ファイルの1つにブレークポイントを設定します。

  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

参照：

12
Andrei Sinitson

他の回答に追加するだけです：

  • 前述の 指示 @titusfxに従ってください。
  • ターミナルでng testを実行します。
  • Visual Studio Codeデバッグビューで、ドロップダウンからng testを選択します。
  • 最初にブレークポイントに到達できない場合は、ブラウザを更新する必要があります。

enter image description here

3
A-Sharabiani

デバッグして実行したい場所に「デバッガ」を追加するだけです

ng test

chromeブラウザーが開いたら、開発ツールをオンにすると、「デバッガー」で停止します

0
Joao Vitor Marques