RubyMine 2024.1 ヘルプ

Jest

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

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

始める前に

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

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

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

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

    npm install --save-dev jest

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

テストの実行

RubyMine を使用すると、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 インタープリターを指定します。

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

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

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

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

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

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

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

  7. オプション:

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

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

  8. オプション:

    コマンドを実行するための環境変数を指定します。RubyMine は、これらの変数を 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 をクリックします。RubyMine は、前回のセッション中に失敗したすべてのテストを実行します。

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

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

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

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

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

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

ナビゲーション

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

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

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

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

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

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

    Jump to the failure line from a failed Jest test

スナップショットテスト

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

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

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

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

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

Jest snapshots: compare the expected and actual snapshots in the RubyMine Diff Viewer

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

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

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

Jest snapshot testing: update snapshots

デバッグテスト

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

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

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

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

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

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

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

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

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

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

  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 テストを実行する

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

始める前に

  1. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、Node.js および Node.js リモートインタープリタープラグインを設定 | プラグインページのマーケットプレースタブにインストールします。

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

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

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

  5. 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" } }
  6. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

テストの実行

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

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

関連ページ:

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

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

Node.js

開始する前に、JetBrains マーケットプレイスからプラグインをインストールするに従って、Node.js プラグインが設定 | プラグインページのタブマーケットプレースにインストールされていることを確認してください。次の Node.js バージョンは、RubyMine 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細情報 Node...

CoffeeScript

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

テスト結果の表示と調査

テストを実行すると、実行ツールウィンドウに進行状況とテストセッションの結果が表示されます。ここでは、テストの統計を表示したり、スタックトレースに移動したり、成功したテストを表示または非表示にしたりできます。アプリケーションの実行と同じ方法で、テストの実行を再実行および終了できます。一般的な実行アクションに加えて、次のことができます。テスト結果のフィルタリングと並べ替え、テスト結果間を移動する、以前のテストの結果を表示する、テスト結果のエクスポート、テスト結果のフィルタリングと並べ替え:をクリッ

テストの実行

ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションが必要なく、コードカバレッジなどの追加オプションを構成したくない場合は、次のオプションを使用してテストを実行できます。そのクラスのすべてのテストを実行するには、テストクラスにキャレットを置きます。または、テストメソッドにキャレットを置き、を押します。または、テストクラスまたはテストメソッドの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、単純な場合(たとえば、コード行に到達したときにプログラムを一時停止する場合)や、より複雑なロジック(追加の条件に対するチェック、ログメッセージの書き込みなど)を伴う場合があります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類:RubyMine