JetBrains Rider 2024.1 ヘルプ

JSTestDriver

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

始める前に

  • JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページのマーケットプレースタブに JSTestDriver プラグインをインストールして有効にします。

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. 開いた新規ファイルダイアログで、拡張子 .jstd または .conf が付いた構成ファイルの名前を入力します。

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

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

テストを実行

JetBrains Rider を使用すると、エディターから 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 サーバーツールウィンドウに切り替え、今開いたブラウザーを示すアイコンをクリックします。JetBrains Rider は、テストを実行する準備ができていることを知らせるメッセージを表示します。

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

  1. 構成のリストから JSTestDriver 実行 / デバッグ構成を選択し、リストまたはツールバーの the Run icon をクリックします。

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

ナビゲーション

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

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

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

デバッグテスト

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

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

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

  2. 構成のリストから JSTestDriver 実行 / デバッグ構成を選択し、リストまたはツールバーの the Debug icon をクリックします。

  3. 開いたデバッグウィンドウで、通常どおりに続行します。テストを実行、停止して再開テストの実行、中断時にテストを確認、コンソールで JavaScript コードスニペットを実行するなど。

コードカバレッジの監視

JetBrains Rider を使用すると、Karma テストでカバーされている(英語)コードの量を監視することもできます。JetBrains Rider は、専用のカバレッジツールウィンドウにこの統計を表示し、カバーされた行とカバーされていない行をエディターとソリューションエクスプローラーで視覚的にマークします。

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

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

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

  3. 構成のリストから JSTestDriver 実行 / デバッグ構成を選択し、リストまたはツールバーの the Run with Coverage icon をクリックします。

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

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

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

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

Jest Karma

関連ページ：

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

プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから JetBrains Rider が取得する関数とメソッドに加えて、JetBrains Rider の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。JetBrains Rider は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト pac...

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

このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集…リンクから利用できます。共通設定：実行構成を編集するとき（ただし実行構成テンプレートは編集しないとき）、次のオプションを指定できます。...

デバッグウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ（フレーム、スレッド、変数など）を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。ツールウィンドウのタブを切り替えるには、とを押します。セッション：複数のデバッグセッションを同時に実行すると、それらはデ

中断されたプログラムを調べる

フレームを分析することで、中断されたアプリケーションの状態を調べることができます。コードがデバッグモードで実行されている場合、それを一時停止するには 2 つの方法があります。検査するコード内のブレークポイントの設定で、いずれかがヒットするまで待機します。でプログラムの実行を中断します。デバッガーは、一時停止した瞬間に実行中のステートメントを終了し、次に実行する必要のあるステートメントで停止します。一時停止状態では、現在の実行ポイント（次に実行されるステートメント）は、エディターの左側のガターにあ...

対話型デバッガーコンソール

対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます（たとえば、を使用）。コンソールペインも read-eval-print ループ（REPL）なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、JetBrains Rider は完成のための異形を提案します。該当する明細を選択してを...