Mocha
Mocha(英語) は、非同期テストシナリオの実行に特に役立つ JavaScript テストフレームワークです。RubyMine の外部から Mocha テストを実行し、ツリービューに配置されたテスト結果を調べて、そこからテストソースに簡単に移動できます。テストの横にあるエディターで、RubyMine はテストのステータスを表示し、テストをすばやく実行またはデバッグするオプションを示します。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Node.js に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Mocha をインストールする
埋め込まれたターミナル(Alt+F12)で、次のいずれかのコマンドを入力します。
npm install mocha
をプロジェクトにローカルインストールします。グローバルインストール用の
npm install -g mocha
npm install --save-dev mocha
は、Mocha を開発依存関係(英語)としてインストールします。
Mocha の公式サイトでスタートする(英語)詳細を参照してください。
テストを書く
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
テストの実行
RubyMine を使用すると、Mocha テストをエディターから簡単に実行したり、実行 / デバッグ構成を作成してテストの一部または全部を実行することができます。
エディターから単一のテストを実行する
ガターで または をクリックし、リストから実行 <テスト名> を選択します。
また、ガターにあるテストステータスアイコン および により、テストが成功したか失敗したかをエディターで直接確認することもできます。
Mocha 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで をクリックし、リストから Mocha を選択します。実行 / デバッグ構成: Mocha ダイアログが開きます。
使用するノードインタープリターと
mocha
パッケージの場所を指定します。アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。
オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。これを行うには、追加 Mocha オプションフィールドに
--watch
フラグを追加します。実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
パターンを定義して、一致するファイル(
*.test.js
など)のテストのみを実行することもできます。テストを含むファイルが test フォルダーに格納されている場合は、このフォルダーへのパスを、./folder1/folder2/test/*.test.js などの作業ディレクトリを基準としたパターンで指定します。実行するテストで使用するインターフェース(英語)を選択します。
Mocha 実行構成を介してテストを実行する
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
クリックして違いを確認してくださいリンクを使用して差分ビューアーを開き、実際の結果を期待値と比較します。
選択したテストのファイル名がリンクとして表示されます。このリンクをクリックして、ソースコードに移動します。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
失敗したテストの再実行
テスト結果ツールバーの をクリックします。RubyMine は、前回のセッション中に失敗したすべてのテストを実行します。
特定の失敗したテストを再実行するには、そのコンテキストメニューで
を選択します。または、失敗したテストの横にあるガターで をクリックし、リストから
を選択します。
詳細は、テストの再実行を参照してください。
ナビゲーション
RubyMine を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから
または を選択するか、Ctrl+Shift+T を押します。テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
失敗したテストの場合、RubyMine はスタックトレースからテストの失敗ラインに移動します。正確な行がスタックトレースにない場合は、テスト定義に移動します。
デバッグテスト
RubyMine を使用すると、エディターから Mocha テストのデバッグをすぐに開始することも、テストの一部または全部をデバッグするための実行 / デバッグ構成を作成することもできます。
エディターから単一のテストのデバッグを開始する
デバッグするテストの横のガターにブレークポイントを設定します。実行ツールウィンドウでテストをダブルクリックするか、F4 を押すと、失敗したテストに移動できます。
ガターで または をクリックし、リストからデバッグ <テスト名> を選択します。
デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。
実行 / デバッグ構成を介してテストデバッグを起動する
デバッグするテストの横にブレークポイントを設定します。実行ツールウィンドウでテストをダブルクリックするか、F4 を押すと、失敗したテストに移動できます。
上記のように Mocha 実行 / デバッグ構成を作成します。
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。
開いたデバッグツールウィンドウで、通常どおりに続行します。テストを実行、テスト実行の停止と再開、中断時にテストを確認、デバッガーコンソールで JavaScript コードスニペットを実行するなど。
コードカバレッジを監視する
RubyMine を使用すると、コードのどの程度が Mocha テストでカバーされている(英語)かを監視することもできます。RubyMine は、この統計を専用のカバレッジツールウィンドウに表示し、エディターとプロジェクトツールウィンドウでカバーされた線とカバーされていない線を視覚的にマークします。カバレッジを監視するには、Istanbul(英語) のコマンドラインインターフェースである nyc(英語) をインストールする必要があります。
ニューヨークをインストールする
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install --save-dev nyc
カバレッジでテストを実行する
テストを開始します。
上記の説明に従って Mocha 実行 / デバッグ構成を作成し、メインツールバーのリストからそれを選択し、リストの右側にある をクリックします。
あるいは、エディターからカバレッジを含む特定のスイートまたはテストを実行します。左側のガターで または をクリックし、リストからカバレッジで <test_name> を実行するを選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。レポートから、ファイルに移動して、どの行が覆われていたか(緑色にマーキングされているか、どの行が覆われていないか)、赤色に表示されているかを確認できます。
Docker コンテナー内の Node.js で Mocha テストを実行する
RubyMine を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内で Mocha(英語) テストを実行できます。
始める前に
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、Node.js および Node.js リモートインタープリタープラグインを設定 | プラグインページのマーケットプレースタブにインストールします。
Docker プラグインが設定で有効になっていることを確認してください。Ctrl+Alt+S を押して IDE 設定を開き、 を選択します。「インストール済み」タブをクリックします。検索フィールドに「Docker 」と入力します。プラグインの詳細については、「プラグインのマッピング」を参照してください。
Docker の説明に従って、Docker をダウンロード、インストール、設定します。
Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。
package.json を開き、Mocha が
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": { "chai": "^4.3.4", "eslint": "^8.1.0", "http-server": "^14.0.0", "mocha": "^9.1.3" } }エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。
テストの実行
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発の場合と同様に続行します。エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、上記のテストの実行およびデバッグテストに従ってテストの一部またはすべてを起動します。
関連ページ:
プラグインのインストール
プラグインは RubyMine のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して IDE 設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...
テスト結果の表示と調査
テストを実行すると、実行ツールウィンドウに進行状況とテストセッションの結果が表示されます。ここでは、テストの統計を表示したり、スタックトレースに移動したり、成功したテストを表示または非表示にしたりできます。アプリケーションの実行と同じ方法で、テストの実行を再実行および終了できます。一般的な実行アクションに加えて、次のことができます。テスト結果のフィルタリングと並べ替え、テスト結果間を移動する、以前のテストの結果を表示する、テスト結果のエクスポート、テスト結果のフィルタリングと並べ替え:をクリッ
テストの実行
ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションが必要なく、コードカバレッジなどの追加オプションを構成したくない場合は、次のオプションを使用してテストを実行できます。そのクラスのすべてのテストを実行するには、テストクラスにキャレットを置きます。または、テストメソッドにキャレットを置き、を押します。または、テストクラスまたはテストメソッドの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、...
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。RubyMine は、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグウィンドウのツールバーにあります。ステップオーバー:現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接移動する
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止します、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが中断されると、現在のフレームスタックがフレームペインに表示されます。フレームはアクティブなメソッド呼び出しに対
実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザーページとその HTML DOM 構造を実装する HTML ソースコードが表示されます。ブラウザーまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。現在のところ、この機能は Google Chrome でのみサポートされており、デバッグセッション中にのみサポートされています。始める前に:JavaScript と TypeScript バンドルプラグインが設定で有効になって...