JetBrains Rider 2024.1 ヘルプ

Jest

Jest は、にクライアント側の JavaScript アプリケーションおよび React(英語) アプリケーション用のテストプラットフォームです。プラットフォームの詳細については、Jest(英語) の公式 Web サイトを参照してください。

JetBrains Rider の Jest でテストを実行し、デバッグすることができます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターでテストの横に表示され、すぐに実行したりデバッグすることができます。

始める前に

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

  2. 設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

Jest をインストールして構成する

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

    npm install --save-dev jest

Jest 公式 Web サイトでオンラインドキュメント(英語)および Jest の設定(英語)の詳細を参照してください。

テストの実行

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

JavaScript および TypeScript コードの Vitest テストの作成の詳細については、Vitest 公式 Web サイトの Vitest の特徴(英語)を参照してください。

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

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

    Run single test from the editor

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

プロジェクトツールウィンドウからフォルダー内のすべてのテストを実行する

  • プロジェクトツールウィンドウで、テストを含むフォルダーを選択し、実行 'Tests in <folder name>' を選択します。

    Run all tests in a folder

Jest 実行構成を作成する

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

  2. 使用する Node.js インタープリターを指定します。

    プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、the Browse button をクリックして新しいインタープリターを構成することもできます。

  3. jestreact-scriptsreact-script-tsreact-super-scriptsreact-awesome-scripts パッケージの場所を指定します。

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

  5. 実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。

  6. 必要に応じて、使用する jest.config.js または jest.config.ts ファイルを指定します。リストから関連ファイルを選択するか、the Browse button をクリックして開いたダイアログで選択するか、フィールドにパスを入力します。

    フィールドが空の場合、JetBrains Rider は jest キーを持つ package.json ファイルを探します。検索は、作業ディレクトリから上に向かってファイルシステムで実行されます。適切な package.json ファイルが見つからない場合、Jest のデフォルト設定(英語)がオンザフライで生成されます。

  7. オプション:

    関連するソースファイルの変更時に自動的に再実行されるテストを構成します。これを行うには、Jest オプションフィールドに --watch フラグを追加します。

    テストセッション中に実行ツールウィンドウの変更のウォッチトグルボタンを押して、後でウォッチ(英語)モードをオンにすることもできます。以下の変更時にテストを自動的に再実行する (ウォッチモード) を参照してください。

  8. オプション:

    コマンドを実行するための環境変数を指定します。JetBrains Rider は、これらの変数を process.env の補完リストに表示します。

    Completion for environment variables from Jest run configuration
  9. Node オプションフィールドに、必要に応じて、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。許容されるオプションは次のとおりです。

    • 実行中に CoffeeScript ファイルをオンザフライで JavaScript にコンパイルするには、--require coffeescript/register を使用します。

      このモードでは、coffeescript パッケージの一部である register.js ファイルがプロジェクト内にある必要があります。CoffeeScript コンパイラーをインストールするに従って、coffeescript パッケージがローカルにインストールされていることを確認してください。

    • Node.js v7 を Chrome デバッグプロトコル(英語)サポートに使用している場合は、--inspect または --inspect-brk パラメーターを使用します。それ以外の場合、デフォルトでデバッグプロセスは V8 デバッグプロトコル(英語)を使用します。

    • プロジェクトで ECMAScript モジュール(英語)を使用するには、 — experimental-vm-modules フラグを Node オプションフィールドに追加します。

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

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

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

失敗したテストの再実行

  • テスト結果ツールバーの the Rerun Failed Tests icon をクリックします。JetBrains Rider は、前回のセッション中に失敗したすべてのテストを実行します。

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

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

変更時にテストを自動的に再実行する (ウォッチモード)

JetBrains Rider は、テスト関連のソースファイルに変更が加えられるとすぐにテストが自動的に再実行される監視(英語)モードをサポートしています。その結果、手動でテストを再実行したり、Jest 実行 / デバッグ構成を再起動したりすることなく、コードに変更を加えるだけで済みます。

  • テストランナータブで、変更のウォッチトグルボタンを押します。

    Turn on the Watch Changes mode
  • あるいは、実行 / デバッグ構成の Jest オプションフィールドに --watch フラグを追加します。上記の Jest 実行構成を作成するを参照してください。

ナビゲーション

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

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

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

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

  • テストまたはスイートの定義からテストランナータブの結果に移動するには、ガターで the Test passed icon または the Test failed icon をクリックし、リストからテストツリーで <test_name> を選択しますを選択します。

    Jump from test definition to the Test Tree
  • 失敗したテストの場合、JetBrains Rider はスタックトレースからテストの失敗ラインに移動します。正確な行がスタックトレースにない場合は、テスト定義に移動します。

    Jump to the failure line from a failed Jest test

スナップショットテスト

JetBrains Rider と Jest の統合により、スナップショットテストなどの優れた機能がサポートされます。

.toMatchSnapshot() メソッドでテストを実行すると、Jest は __snapshots__ フォルダーにスナップショットファイルを作成します。テストから関連するスナップショットに移動するには、テストの横のガターで the Go to snapshot (camera) icon をクリックするか、.toMatchSnapshot() メソッドのコンテキストメニューから必要なスナップショットを選択します。

Jest snapshot testing: jump from a test file to the corresponding snapshot

スナップショットがレンダリングされたアプリケーションと一致しない場合、テストは失敗します。これは、コードの一部の変更によりこの不一致が発生したか、スナップショットが古いため更新する必要があることを示しています。

この不一致の原因を確認するには、テストランナータブの右側のペインにある差異を見るにはクリックしてくださいリンクから JetBrains Rider 組み込み差分ビューアーを開きます。

Jest snapshots: compare the expected and actual snapshots in the JetBrains Rider Diff Viewer

実行ツールウィンドウのテストランナータブから、古いスナップショットを直接更新できます。

  • 特定のテストのスナップショットを更新するには、テスト名の横にあるクリックしてスナップショットを更新するリンクを使用します。

  • テストの古いスナップショットをすべてファイルから更新するには、テストファイル名の横にあるクリックして失敗したスナップショットを更新しますを使用します。

Jest snapshot testing: update snapshots

デバッグテスト

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

  • 必要に応じてブレークポイントを設定します

  • エディターから単一のテストのデバッグを開始するには、ガターで the Run button または the Rerun icon をクリックし、リストからデバッグ <テスト名> を選択します。

  • フォルダー内のすべてのテストのデバッグを開始するには、プロジェクトツールウィンドウでフォルダーを選択し、コンテキストメニューからデバッグ 'Tests in <folder name>' を選択します。

    Debug all tests in a folder
  • 実行 / デバッグ構成を介してテストデバッグを開始するには、上記の説明に従って Jest 実行 / デバッグ構成を作成します。

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

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

コードカバレッジを監視する

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

カバレッジでテストを実行する

  1. 上記のように Jest 実行 / デバッグ構成を作成します。

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

    または、エディターからのカバレッジを使用して特定のスイートまたはテストをすばやく実行します。ガターで the Run button または the Rerun button をクリックし、リストからカバレッジで <test_name> を実行するを選択します。

    Run Jest tests with coverage from the editor
  3. カバレッジツールウィンドウでコードカバレッジを監視します。このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。レポートから、ファイルに移動して、どの行が覆われていたか(緑色にマーキングされているか、どの行が覆われていないか)、赤色に表示されているかを確認できます。

    Jest Coverage report

Docker コンテナー内の Node.js で Jest テストを実行する

JetBrains Rider を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内で Jest(英語) テストを実行できます。

始める前に

  1. Node.jsNode.js リモートインタープリターDocker に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。

  2. Docker の説明に従って、Docker をダウンロード、インストール、設定します。

  3. Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。

  4. package.json を開き、Jest が devDependencies セクションにリストされていることを確認します。

    { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1" } }
  5. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

テストの実行

  1. Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。

  2. ローカル開発の場合と同様に続行します。エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、上記のテストの実行およびデバッグテストに従ってテストの一部またはすべてを起動します。

関連ページ:

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

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

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

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

実行 / デバッグ構成: Jest

作成: このダイアログでは、Jest テストを実行するための構成を作成します。JavaScript および TypeScript コードの Vitest テストの作成の詳細については、Vitest 公式 Web サイトの Vitest の特徴を参照してください。始める前に:Node.js をダウンロードしてインストールします。設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フ...

言語およびフレームワーク: CoffeeScript

JetBrains Rider では、JavaScript にコンパイルされる CoffeeScript を使用できます。JetBrains Rider は *.coffee ファイルを認識し、それらにのマークを付けます。CoffeeScript コードにブレークポイントを直接設定でき、JetBrains Rider はコンパイル中に生成されたソースマップを使用してブレークポイントを認識します。JetBrains Rider は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、C...

ブレークポイント

ブレークポイントを使用すると、特定のステートメントでプログラムの実行を一時停止し、変数値、コールスタック、その他のプログラムパラメーターを分析したり、式を評価したり、プログラムをステップ実行したりできます。JetBrains Rider では、次の型のブレークポイントを操作できます。行ブレークポイント、コード内の特定の文に設定できます。実行がこの行に達すると、デバッガーはプログラムの実行を中断します。行ブレークポイントは実行可能な行にのみ設定できます。コメント、宣言、空行は、行ブレークポイントの...

デバッグウィンドウ

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