Jestⶠⶁⶠⱼⶠ
Jest はクライアントサイド JavaScript アプリケーションおよび React アプリケーション向けのテストプラットフォームです。 プラットフォームの詳細については、 Jest(英語) の公式 Web サイトを参照してください。
RubyMine で Jest のテストを実行・デバッグできます。 テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。 テストのステータスは、エディターでテストの横に表示され、すぐに実行したりデバッグすることができます。
始める前に
Jest をインストールして構成する
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev jest
Jest 公式 Web サイトで オンラインドキュメント(英語)および Jest の設定(英語)の詳細を参照してください。
テストの実行
RubyMine を利用すると、エディターから単一の Jest テストを素早く実行したり、実行 / デバッグ構成を作成してすべてまたは一部のテストを実行できます。
JavaScript および TypeScript コードの Vitest テストの作成の詳細については、Vitest 公式 Web サイトの Vitest の機能(英語)を参照してください。
エディターから単一のテストを実行する
ガターで
または 
をクリックし、リストから <test_name> を実行する。 を選択します。
エディターのガターにある テストステータスアイコン
および 
でテストが合格したか失敗したかを確認できます。
プロジェクトツールウィンドウからフォルダー内のすべてのテストを実行する
プロジェクト ツールウィンドウ（Alt+1 ）で、テストが入っているフォルダーを選択し、次に 「フォルダー名」にあるテストの実行 を選択します。
Jest 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Jestⶠⶁⶠⱼⶠ を選択します。 実行/デバッグ構成: Jestダイアログが開きます。使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、RubyMine は ノードランタイム フィールドから JavaScript ランタイム ページのプロジェクトデフォルトインタープリターを自動的に使用します。 ほとんどの場合、RubyMine がプロジェクトのデフォルトランタイムを検出し、自動的にそのフィールドに入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。jest、 react-scripts、 react-script-ts、 react-super-scripts、 react-awesome-scripts パッケージの場所を指定します。
アプリケーションの作業ディレクトリを指定します。 デフォルトでは、 作業ディレクトリ フィールドにはプロジェクトのルートフォルダーが表示されます。 この事前定義された設定を変更するには、目的のフォルダーへのパスを指定してください。
実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
オプション:
使用する jest.config.js または jest.config.ts ファイルを指定してください。リストから該当ファイルを選択するか、
をクリックして表示されるダイアログで選択するか、フィールドにパスを直接入力してください。フィールドが空の場合、RubyMine は
jestキーを持つ package.json ファイルを探します。 検索は、 作業ディレクトリから上に向かってファイルシステムで実行されます。 適切な package.json ファイルが見つからない場合、 Jest のデフォルト設定(英語)がオンザフライで生成されます。オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。 これを行うには、 Jest オプション フィールドに
--watchフラグを追加します。テストセッション中に 実行 ツールウィンドウの 変更をウォッチする トグルボタンを押して、後で ウォッチモードをオンにすることもできます。以下の 変更時にテストを自動的に再実行する (ウォッチモード)を参照してください。
オプション:
コマンドを実行するための環境変数を指定します。 RubyMine はこれらの変数を
process.envの補完リストに表示します。
ノード オプション フィールドに、必要に応じて、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。 許容されるオプションは次のとおりです。
実行中に CoffeeScript ファイルをオンザフライで JavaScript にコンパイルするには、
--require coffeescript/registerを使用します。このモードでは、
coffeescriptパッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。 そのため、 CoffeeScript コンパイラーのインストールで説明されている通り、coffeescriptパッケージがローカルにインストールされていることを確認してください。Chrome デバッグプロトコル(英語)サポートには
--インスペクションまたは--inspect-brkパラメーターを使用します。プロジェクトで ECMAScript モジュール(英語)を使用するには、
—experimental-vm-modulesフラグを ノード オプション フィールドに追加します。
実行構成を介してテストを実行する
構成の一覧から Jest 実行 / デバッグ構成を選択し、一覧またはツールバーの
をクリックします。実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を調べる を参照してください。
失敗したテストの再実行
テスト結果ツールバーの
をクリックします。 RubyMine は、前回のセッション中に失敗したすべてのテストを実行します。特定の失敗したテストを再実行するには、そのコンテキストメニューで を選択します。
詳細は、 テストの再実行を参照してください。
変更時にテストを自動的に再実行する (ウォッチモード)
RubyMine は、テスト関連ソースファイルに変更があるたびにテストが自動で再実行される ウォッチモードをサポートしています。 その結果、手動でテストを再実行したり、 Jestⶠⶁⶠⱼⶠ 実行 / デバッグ構成を再起動したりすることなく、コードに変更を加えるだけで済みます。
テストランナータブで、 変更をウォッチする トグルボタンを押します。
あるいは、実行／デバッグ構成の Jest オプション フィールドに
--watchフラグを追加し、上記の Jest 実行構成を作成するを参照してください。
ナビゲーション
RubyMine を使うと、ファイルと関連するテストファイル間や テストランナータブのテスト結果からテストへ移動できます。
RubyMine を利用すると、ファイルと関連するテストファイル、またはテスト・スイート定義と テストランナータブ内の結果との間を移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから または を選択するか、 Ctrl+Shift+T を押します。
テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
テストまたはスイートの定義から テストランナー タブの結果に移動するには、ガターで
または をクリックし、リストから テストツリーで <test_name> を選択 を選択します。
失敗したテストの場合、RubyMine はスタックトレースからテストの失敗行に移動します。 正確な行がスタックトレースにない場合は、テスト定義に移動します。
スナップショットテスト
RubyMine と Jest の統合では、スナップショットテストなどの優れた機能がサポートされています。
.toMatchSnapshot() メソッドでテストを実行すると、Jest は __snapshots__ フォルダーにスナップショットファイルを作成します。 テストから関連するスナップショットに移動するには、テストの横のガターで 
をクリックするか、 .toMatchSnapshot() メソッドのコンテキストメニューから必要なスナップショットを選択します。
スナップショットがレンダリングされたアプリケーションと一致しない場合、テストは失敗します。 これは、コードの一部の変更によりこの不一致が発生したか、スナップショットが古いため更新する必要があることを示しています。
この不一致の原因を確認するには、 テストランナー タブの右ペインにある 差異を見るにはクリック リンクから RubyMine の組み込み 差分ビューアーを開いてください。
実行 ツールウィンドウの テストランナー タブから、古いスナップショットを直接更新できます。
特定のテストのスナップショットを更新するには、テスト名の横にある クリックしてスナップショットを更新 リンクを使用します。
テストの古いスナップショットをすべてファイルから更新するには、テストファイル名の横にある クリックして失敗したスナップショットを更新 を使用します。
デバッグテスト
RubyMine で、エディターから単一の Jest テストをすぐにデバッグしたり、実行 / デバッグ構成を作成して一部またはすべてのテストをデバッグできます。
必要に応じて ブレークポイントを設定します。
エディターから単一のテストのデバッグを開始するには、ガターで
または をクリックし、リストから <test_name> をデバッグする。 を選択します。フォルダー内のすべてのテストのデバッグを開始するには、 プロジェクト ツールウィンドウでフォルダーを選択し、コンテキストメニューから 「フォルダー名」にあるテストのデバッグ を選択します。
実行 / デバッグ構成を介してテストデバッグを開始するには、 上記の説明に従ってJest 実行 / デバッグ構成を作成します。
次に、構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
開いた デバッグツールウィンドウ で、通常どおり操作します： プログラムをステップ実行、 実行の停止・再開、 中断時の調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。
コードカバレッジを監視する
RubyMine を利用すれば、 Jest テストでどれだけコードがカバーされているかも確認できます。 RubyMine は、この統計情報を専用の カバレッジ ツールウィンドウに表示し、カバーされた行とカバーされていない行をエディターと プロジェクト ツールウィンドウ (Alt+1) で視覚的にマークします。
カバレッジでテストを実行する
上記のように Jest 実行 / デバッグ構成を作成します。
メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある
をクリックします。または、エディターからカバレッジ付きで特定のスイートまたはテストをすばやく実行できます。ガターで
または をクリックし、リストから カバレッジで <test_name> を実行する を選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。 このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。 レポートから、ファイルに移動して、どの行が覆われていたか（緑色にマーキングされているか、どの行が覆われていないか）、赤色に表示されているかを確認できます。
Docker コンテナー内の Node.js で Jest テストを実行する
RubyMine を使用すると、ローカルと同様に Docker コンテナー内で Jest テストを実行できます。
始める前に
JetBrains Marketplace からプラグインをインストールする方法に従い、 設定 | プラグイン ページ、 Marketplace タブで Node.js および Node.js リモートインタープリター プラグインをインストールしてください。
設定で Docker プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Docker と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
Docker をダウンロード、インストールし、 Docker の説明に従って設定してください。
Docker で Node.js リモートランタイムを構成するまたは Docker Compose 経由でインストールし、プロジェクトの デフォルトとして設定してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。
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" } }エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行する。 を選択します。
テストの実行
Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発と同様に操作してください。エディターから単一テストを実行・デバッグしたり、 テストの実行および テストのデバッグで説明されているように、実行/デバッグ構成を作成して一部または全テストを起動できます。