Mocha
Mocha(英語) は、非同期テストシナリオの実行に特に役立つ JavaScript テストフレームワークです。PhpStorm の外部から Mocha テストを実行し、ツリービューに配置されたテスト結果を調べ、そこからテストソースに簡単に移動できます。エディターのテストの横に、PhpStorm はテストのステータスを表示し、テストをすばやく実行またはデバッグするオプションを提供します。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Node.js に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Mocha をインストールする
埋め込まれたターミナル(Alt+F12)で、次のいずれかのコマンドを入力します。
npm install mocha
をプロジェクトにローカルインストールします。グローバルインストール用の
npm install -g mocha
npm install --save-dev mocha
は、Mocha を開発依存関係(英語)としてインストールします。
Mocha の公式サイトでスタートする(英語)詳細を参照してください。
テストを書く
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
テストの実行
PhpStorm を使用すると、Mocha テストをエディターから簡単に実行したり、実行 / デバッグ構成を作成してテストの一部または全部を実行することができます。
エディターから単一のテストを実行する
ガターで または をクリックし、リストから実行 <テスト名> を選択します。
ガターのテストステータスアイコン および により、エディターでテストが成功したか失敗したかを確認することもできます。
Mocha 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで をクリックし、リストから Mocha を選択します。「実行 / デバッグ構成: Mocha」ダイアログが開きます。
使用するノードインタープリターと
mocha
パッケージの場所を指定します。アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。
オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。これを行うには、追加 Mocha オプションフィールドに
--watch
フラグを追加します。実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
パターンを定義して、一致するファイル(
*.test.js
など)のテストのみを実行することもできます。テストを含むファイルが test フォルダーに格納されている場合は、このフォルダーへのパスを、./folder1/folder2/test/*.test.js などの作業ディレクトリを基準としたパターンで指定します。実行するテストで使用するインターフェース(英語)を選択します。
Mocha 実行構成を介してテストを実行する
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
クリックして違いを確認してくださいリンクを使用して差分ビューアーを開き、実際の結果を期待値と比較します。
選択したテストのファイル名がリンクとして表示されます。このリンクをクリックして、ソースコードに移動します。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
失敗したテストの再実行
テスト結果ツールバーの をクリックします。PhpStorm は、前回のセッション中に失敗したすべてのテストを実行します。
特定の失敗したテストを再実行するには、そのコンテキストメニューで
を選択します。または、失敗したテストの横にあるガターで をクリックし、リストから
を選択します。
詳細は、テストの再実行を参照してください。
ナビゲーション
PhpStorm を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから
または を選択するか、Ctrl+Shift+T を押します。テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
失敗したテストの場合、PhpStorm はスタックトレースからテストの失敗ラインに移動します。正確な行がスタックトレースにない場合は、テスト定義に移動します。
デバッグテスト
PhpStorm を使用すると、エディターから Mocha テストのデバッグをすぐに開始することも、テストの一部または全部をデバッグするための実行 / デバッグ構成を作成することもできます。
エディターから単一のテストのデバッグを開始する
デバッグするテストの横のガターにブレークポイントを設定します。実行ツールウィンドウでテストをダブルクリックするか、F4 を押すと、失敗したテストに移動できます。
ガターで または をクリックし、リストからデバッグ <テスト名> を選択します。
デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を一時停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。
実行 / デバッグ構成を介してテストデバッグを起動する
デバッグするテストの横にブレークポイントを設定します。実行ツールウィンドウでテストをダブルクリックするか、F4 を押すと、失敗したテストに移動できます。
上記のように Mocha 実行 / デバッグ構成を作成します。
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。
開いたデバッグツールウィンドウで、通常どおりに続行します。テストを実行、一時停止と再開、中断時にテストを調査、
デバッガーコンソールで JavaScript コードスニペットを実行など。
コードカバレッジを監視する
PhpStorm を使用すると、Mocha テストでカバーされている(英語)コードの量を監視することもできます。PhpStorm は、専用のカバレッジツールウィンドウにこの統計を表示し、カバーされた行とカバーされていない行をエディターとプロジェクトツールウィンドウ Alt+1 に視覚的にマークします。カバレッジを監視するには、Istanbul(英語) のコマンドラインインターフェースである nyc(英語) をインストールする必要があります。
ニューヨークをインストールする
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install --save-dev nyc
カバレッジでテストを実行する
テストを開始します。
上記のように Mocha 実行 / デバッグ構成を作成し、メインツールバーのリストから選択して、リストの右側にある をクリックします。
または、エディターからのカバレッジを使用して特定のスイートまたはテストを実行します。左側のガターで または をクリックし、リストからカバレッジで <test_name> を実行するを選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。レポートから、ファイルに移動して、どの行が覆われていたか(緑色にマーキングされているか、どの行が覆われていないか)、赤色に表示されているかを確認できます。
Docker コンテナー内の Node.js で Mocha テストを実行する
PhpStorm を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内で Mocha(英語) テストを実行できます。
始める前に
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Node.js リモートインタープリタープラグインをインストールして有効にします。
設定 | プラグインページのインストール済みタブで、Node.js および 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 サイト(英語)の指示に従ってテストを作成します。
ローカル開発の場合と同様に続行します。エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、上記のテストの実行およびデバッグテストに従ってテストの一部またはすべてを起動します。
関連ページ:
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
実行 / デバッグ構成ダイアログ
このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...
実行 / デバッグ構成: Mocha
作成: このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Mocha」を参照してください。このダイアログで、Mocha テストフレームワークを使用して JavaScript 単体テストを実行およびデバッグするための設定を作成します。始める前に:Node.js をダウンロードしてインストールします。設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Node...
テスト結果を調べる
PhpStorm でテストが実行されている間、テスト実行は実行ツールウィンドウのその実行構成のタブに表示されます。テスト実行が終了すると、そのタブでテスト結果を確認できます。右側のコンソールには、現在のテストセッションの出力が表示されます。テストの実行に関する詳細情報と、テストが失敗したか無視された理由を確認できます。テスト結果リストの上にあるテスト結果ツールバーを使用すると、成功したテストと無視されたテストの表示と非表示を切り替えたり、各テストの実行にかかった時間を表示したり、テスト結果をエク...
テストの実行
ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションが必要なく、追加のオプションを構成したくない場合は、次のオプションを使用してテストを実行できます。そのクラス内のすべてのテストを実行するには、テストクラスにキャレットを置きます。または、テストメソッドにキャレットを置き、を押します。または、テストクラスまたはテストメソッドの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、テストの状態に応じ...
テストランナータブ
テストランナータブは、テストセッションの開始時に実行ツールウィンドウで開き、同じツールバーボタンを備えています。実行ツールバーは、実行ツールウィンドウのツールバーとほとんど同じですが、テスト固有のボタンを備えています。左側のペインには、現在の実行 / デバッグ構成内のすべてのテストのツリービューが表示されます。ルートノードは、実行するように選択されたテストを表します。ネストされたノードは、テストスイートとテストケースの階層を表します。リーフノードは個々のテストを表します。各テストのステータスはア...