IntelliJ IDEA 2021.1 ヘルプ

JSTestDriver

IntelliJ IDEA は JSTestDriver テストフレームワーク(英語)との統合をサポートします。

始める前に

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

    このプラグインを通して、IntelliJ IDEA は JSTestDriver サーバーとアサーションフレームワークを提供します。テスト作成中に、プラグインは単体テストフレームワークを検出し、<テストフレームワーク> のサポートを追加する インテンションアクションを提案します。

プロジェクトでテストフレームワークを構成する

  1. 選択したフレームワークをダウンロードして IntelliJ IDEA JavaScript ライブラリとして構成してください。

  2. 以下のいずれか 1 つを実行します:

    • ライブラリスコープにプロジェクトフォルダーを追加します

    • <テストフレームワーク> のサポートを追加するインテンションアクションを使用して、テスト作成中にオンザフライでフレームワークサポートを有効にします。

    • Jasmine を使用するには、構成ファイルに jasmine-jstd-adapter を追加します。

      jsTestDriver.conf を開き、次のコードを入力します。

      load: lib/jasmine/jasmine.js lib/jasmine-jstd-adapter/JasmineAdapter.js

テストランナー構成ファイルを手動で作成する

テストランナー構成ファイルは、ロード順序をロードするためのテストファイルと実動ファイルを定義します。IntelliJ IDEA は拡張子 .jstd または .conf を持つファイルをテストランナー構成ファイルとして扱います。

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

  1. プロジェクトツリーで、本番フォルダーとテストフォルダーの親フォルダーを選択し、コンテキストメニューで新規 | ファイルを選択します。

  2. 新規ファイルダイアログボックスが開き、拡張子 .jstd または .conf を持つ構成ファイルの名前を入力します。

  3. エディターで新しいファイルを開き、現在のフォルダーへのフルパスと、それに関連してロードするファイルへのパスを指定します。ファイル名パターンにはワイルドカードを使用します。

  4. YAML(英語) を使用して構成ファイルを完成させます。テストランナー構成ファイルの説明(英語)を参照してください。

テストを実行

IntelliJ IDEA を使用すると、エディターから 1 つの JSTestDriver テストをすぐに実行することも、実行 / デバッグ構成を作成してテストの一部または全部を実行することもできます。

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

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

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

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

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

  2. 実行するテスト、構成ファイルへのパス、テスト実行前に実行するアクティビティを指定します。

WebStorm のデフォルト JSTestDriver テストサーバーを起動するには

  1. プロジェクトに少なくとも 1 つの設定ファイルがあることを確認してください。

  2. JSTestDriver サーバーツールウィンドウ(表示 | ツールウィンドウ | JSTestDriver サーバー)を開き、ツールバーの the Run button をクリックします。

ユニットテストでサーバーを停止するには

  • ツールバーの the Stop the local server button をクリックします。

ブラウザーをキャプチャーするには

  1. JSTestDriver サーバーを起動するがまだ実行されていない場合は、JSTestDriver サーバーツールウィンドウに切り替えます。

  2. JSTestDriverリモートコンソールを使用してローカルブラウザーを起動するには、次のいずれかの操作を行います。

    • 選択したブラウザーを示すアイコンをクリックします。

    • ブラウザーがすでに開かれている場合は、URL を使用してブラウザーをキャプチャーする読み取り専用フィールドの内容をコピーし、URL をアドレスバーに貼り付けます。

    いずれの場合も、選択したブラウザーを示すアイコンがアクティブになります。

  3. JSTestDriver サーバーツールウィンドウに切り替え、今開いたブラウザーを示すアイコンをクリックします。IntelliJ IDEA は、テストを実行する準備ができていることを知らせるメッセージを表示します。

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

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

  2. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、test rest = ults を分析します。詳細については、テスト結果を調べるを参照してください。

ナビゲーション

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

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

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

デバッグテスト

JSTestDriver テスト用のデバッグセッションは、実行 / デバッグ構成によってのみ開始されます。

デバッグテストを開始するには

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

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

  3. 開いたデバッグツールウィンドウでは、通常通りに進めます。テストをステップ実行、テスト実行の停止・再開中断中のテストを調査コンソールで JavaScript のコードスニペットを実行する、などです。

コードカバレッジの監視

IntelliJ IDEA を使用すると、コードのどの程度が Karma テストでカバーされている(英語)かを監視することもできます。IntelliJ IDEA は、この統計を専用のカバレッジツールウィンドウに表示し、エディターとプロジェクトツールウィンドウでカバーされた線とカバーされていない線を視覚的にマークします。

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

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

  2. JSTestDriver サーバーを起動するブラウザーをキャプチャーして、テストを実行します。

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

  4. カバレッジツールウィンドウでコードカバレッジを監視します。

カバレッジ分析からファイルを除外するには

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

  2. カバレッジタブで、除外するファイルへのパスを指定します。

関連ページ:

プラグインを管理する | IntelliJ IDEA

プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を学ぶのに役立ちます、プラグイン設定を開く設定 / 環境設定ダイアログで、プラグインを選択します。マーケットプレースタブを使用して...

インテンションアクション | IntelliJ IDEA

エディターで作業するときに、IntelliJ IDEA はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを変更する方法を見つけるとすぐに、エディターの現在の行の横に黄色いバルブアイコンが表示されます。このアイコンをクリックすると、このコード単位で使用可能なインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、幅広い状況をカバーします。インテンションの完全なリストを表示し、設定 / 環境設定ダイアログ...

JavaScript ライブラリを構成する | IntelliJ IDEA

IntelliJ IDEA では、ライブラリは、IntelliJ IDEA が編集するプロジェクトコードから取得する関数とメソッドに加えて、IntelliJ IDEA の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。IntelliJ IDEA は、コーディング支援(つまり、コード補完、構文ハイライト、ナビゲーション、ドキュメントの参照)を強化するためにのみライブラリを使用します。ライブラリはプ...

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

このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、または削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。プロジェクト構成は構成タイプによってグループ化されています。デフォルトの構成テンプレートは、ダイアログの左側のテンプレートノードにまとめられています。共通:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名前実行 / デバッグ構成の名前を指定して、たとえば実...

テスト結果を調べる | IntelliJ IDEA

IntelliJ IDEA がテストの実行を完了すると、テストランナータブの実行ツールウィンドウに結果が表示されます。右側のコンソールには、現在のテストセッションの出力が表示されます。テストの実行に関する詳細情報と、テストが失敗したか無視された理由を確認できます。テスト結果のリストの上にあるテストランナーツールバーを使用すると、成功したテストと無視されたテストを表示および非表示にしたり、各テストの実行、エクスポート、インポート、およびテスト結果のソートにかかった時間を表示したりできます。IDE...

デバッグツールウィンドウ | IntelliJ IDEA

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。セッション:使用可能なデバッグセッションは、デバッグツールウィンドウの上部でタブに分割されています。特定の実行 / デバッグ...