PhpStorm 2020.2ヘルプ

Karma

Karma(英語)はクライアントサイドのJavaScriptをテストするためのツールです。Karmaは、実際のブラウザで実行されているアプリケーションに対してテストを実行します。これにより、テスト結果の正確性と信頼性が保証されます。PhpStormはKarmaと統合されているため、IDE内部からテストの実行範囲を実行、デバッグ、および監視できます。テスト結果はツリービューで表示され、そこからテストソースに簡単に移動できます。テストステータスはエディターのテストの横に表示され、すばやく実行またはデバッグすることができます。

始める前に

  1. Node.js(英語)をダウンロードしてインストールします。

  2. JetBrainsリポジトリからプラグインをインストールする説明に従って、設定/環境設定 | プラグインページでKarmaプラグインをインストールして有効にします。

Karmaとプラグインのインストール

  • 埋め込まれたターミナルAlt+F12)で、次のいずれかのコマンドを入力します。

    • Karmaおよび必要なすべてのプラグインがpackage.jsonですでに定義されている場合は、npm install

    • Karmaおよび必要なプラグイン(たとえばkarma-jasmineまたはjasmine-core)を開発依存関係(英語)としてインストールするには:

      npm install --save-dev karma npm install --save-dev <required_karma_plugin> <another_required_karma_plugin>

    KarmaオフィシャルWebサイト(英語)の詳細を参照してください。

npmとYarnで説明されているように、Node.jsとNPMページkarmaパッケージをインストールすることもできます。

Karma構成ファイルの生成

Karmaテストは、対話モードで生成されたkarma.conf.js構成ファイルに従って実行されます。既にプロジェクトにkarma.conf.jsがある場合は、この手順をスキップしてください。Karmaの設定の詳細については、KarmaオフィシャルWebサイト(英語)を参照してください。

Karma構成ファイルを作成するには

  1. ターミナルを開き、オペレーティングシステムに応じて次のいずれかを入力してkarma.conf.js生成ウィザードを開始します。

    • macOSおよびLinuxの場合:
      ./node_modules/karma/bin/karma init

    • Windowsの場合:
      npm install -g karma-cli
      karma init

  2. ウィザードの質問に答えて、使用するテストフレームワークと自動的にキャプチャーされるブラウザを指定します。

    Karmaファイル: パターン・マッチング(英語)も参照してください。

テストの実行

PhpStormを使用すると、Karmaテストをエディターから簡単に実行したり、実行/デバッグ構成を作成してテストの一部または全部を実行することができます。

エディターから単一のテストを実行するには

  • 左側のガターの the Run button または the Rerun button をクリックして、リストから実行<テスト名>を選択します。

    ガターのテストステータスアイコン Test passed および Test failed により、エディターでテストが成功したか失敗したかを確認することもできます。

Karma実行構成を作成するには

  1. 実行/デバッグ構成ダイアログ(メインメニューの実行 | 構成の編集)を開き、左側のペインで the Add button をクリックして、リストからKarmaを選択します。実行/デバッグ構成: Karmaダイアログが開きます。

  2. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

    オプションで、Node.jsに渡すNode.js固有のオプションパラメータ環境変数(英語)を指定します。

  3. karma パッケージの場所とkarma.conf.jsへのパスを指定します。

  4. アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにプロジェクトのルートフォルダーが表示されます。この定義済み設定を変更するには、目的のフォルダーへのパスを指定するか、リストから以前に使用したフォルダーを選択します。

  5. 必要に応じて、Karmaに渡すコマンドラインオプションを指定して、karma.conf.js構成ファイルのデフォルト設定を上書きします。

    例:Headless Chromeでテストを実行またはデバッグするには、Karmaオプションフィールドに --browsers ChromeHeadless と入力します。詳細はヘッドレスChromeによる自動テスト(英語)を参照してください。

    使用可能なすべてのCLIオプションを表示するには、ターミナル Alt+F12karma start --help と入力します。

実行構成を介してテストを実行するには

  1. メインツールバーのリストからKarma実行/デバッグ構成を選択し、リストの右側にある the Run icon をクリックします。

    ws_select_run_configuration_karma.png

  2. Karmaテストサーバーは自動的に起動します。実行ツールウィンドウのKarmaサーバータブで、テストサーバーからのメッセージを表示および分析します。

  3. 実行ツールウィンドウのテスト・ランナータブのテスト実行の監視

失敗したテストを再実行する

  • テストランナータブで、ツールバーの Rerun Failed Tests button をクリックします。PhpStormは前のセッションで失敗したすべてのテストを実行します。

    Rerun a failed Karma test

  • 特定の失敗したテストを再実行するには、そのコンテキストメニューで実行<テスト名>を選択します。

詳細はテストの再実行を参照してください。

ナビゲーション

PhpStormを使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストにジャンプできます。

  • テストとそのサブジェクトの間、またはその逆にジャンプするには、エディターでファイルを開き、コンテキストメニューからジャンプ | テストまたはジャンプ | テスト対象を選択するか、Ctrl+Shift+Tを押します。

  • テスト結果からテスト定義にジャンプするには、テスト・ランナータブでテスト名を2回クリックするか、コンテキストメニューからソースに移動を選択します。エディターでテストファイルが開き、カーソルがテスト定義に置かれます。

  • 失敗したテストの場合、PhpStormはスタックトレースからテストの失敗ラインに移動します。正確な行がスタックトレースにない場合は、テスト定義に移動します。

テストのデバッグ

PhpStormを使用すると、エディターからKarmaテストのデバッグをすぐに開始することも、テストの一部または全部をデバッグするための実行/デバッグ構成を作成することもできます。

エディターから単一のテストのデバッグを開始するには

  • 左側のガターの the Run button または the Rerun button をクリックして、リストからデバッグ<テスト名>を選択します。

実行/デバッグ構成を介してテストデバッグを開始するには

  1. 上記の説明に従って、Karma実行/デバッグ構成を作成します。

  2. メインツールバーのリストからKarma実行/デバッグ構成を選択し、リストの右側にある the Debug icon をクリックします。

    ws_select_run_configuration_karma.png

  3. 開いたデバッグツールウィンドウで、通常どおり続行します。テストのステップ実行、テストの実行の一時停止と再開一時停止 時のテストの確認など。

コードカバレッジの監視

PhpStormを使用すると、Karmaテストでカバーされる(英語)コードの量も監視できます。PhpStormは、この統計を専用のツールウィンドウに表示し、カバーされている行とカバーされていない行をエディターで視覚的にマークします。カバレッジを監視するには、karma-coverageパッケージをインストールし、karma.conf.jsを更新する必要があります。

karma-coverage をインストールするには

  • 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install --save-dev karma-coverage

karma-coverage 定義を構成ファイルに追加するには

  1. エディターでkarma.conf.jsを開きます。

  2. reporters 定義を見つけ、coverage を次の形式の値のリストに追加します。

    reporters: ['progress', 'coverage']

  3. preprocessors 定義を追加し、カバレッジスコープを次の形式で指定します。

    preprocessors: {'**/*.js': ['coverage']}

カバレッジでテストを開始する

  1. 上記の説明に従って、Karma実行/デバッグ構成を作成します。

  2. メインツールバーのリストからKarma実行/デバッグ構成を選択し、リストの右側にある the Run with Coverage icon をクリックします。

    ws_select_run_configuration_karma.png

    または、エディターのテストアイコンを使用して、特定のスイートまたはカバレッジ付きのテストをすばやく実行します。

    ws_mocha_quickly-run-with-coverage.png
  3. カバレッジツールウィンドウでコードカバレッジを監視します。

    Karmaテストが実行されるたびに、カバレッジレポートが実際にディスク上に生成されます。カバレッジレポートの形式は、次のように設定ファイルで設定できます。

    // karma.conf.js module.exports = function(config) { config.set({ ... // optionally, configure the reporter coverageReporter: { type : 'html', dir : 'coverage/' } ... });};

    次の type 値を使用できます。

    • html は注釈付きソースコードを含む一連のHTMLファイルを生成します。

    • lcovonlylcov.infoファイルを生成します。

    • lcov はHTML + .lcovファイルを生成します。このフォーマットはデフォルトで適用されます。

    • cobertura は、Hudsonを簡単に統合するためのcobertura-coverage.xmlファイルを生成します。

    • text-summary は、通常はコンソールに、カバレッジの簡潔なテキスト要約を生成します。

    • text は、すべてのファイルのカバレッジを持つ詳細なテキストテーブルを生成します。

最終更新日: 2020年6月05日

関連ページ:

プラグインを管理する

プラグインはPhpStormのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コー...

npmおよびYarn

PhpStormはnpm、Yarn、Yarn 2、およびpnpmと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、アップグレード、および削除できます。Node.jsとNPMページは、パッケージを管理するための専用UIを提供します。もちろん、組み込みのターミナルのコ...

Node.jsとNPM

macOSのPhpStorm |プリファレンス | 言語とフレームワーク | Node.jsとNPMThis page appears only when theNode.jsbundled plugin is enabled on the設定/環境設定 | プラグインpage as describ...

実行/デバッグ構成ダイアログ

実行 | 構成の編集このダイアログを使用して、実行/デバッグ構成を作成、編集、調整、または削除したり、新しく作成されたすべての実行/デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。プロジェクト構成は構成タイプによってグループ化されています。デフォルトの構成テンプレートは、ダイアロ...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。PhpStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

テストの監視と管理

Test progress and results are displayed in the dedicatedtest runner tabsof the実行tool window.You canrerun,終了し、一時停止するexecution of tests same way as you