Mocha
Mocha(英語) は、非同期テストシナリオの実行に特に役立つ JavaScript テストフレームワークです。 PhpStorm の外部から Mocha テストを実行し、ツリービューに配置されたテスト結果を調べ、そこからテストソースに簡単に移動できます。 エディターのテストの横に、PhpStorm はテストのステータスを表示し、テストをすばやく実行またはデバッグするオプションを提供します。
始める前に
Mocha をインストールする
コマンドライン シェルまたは埋め込み ターミナル (Alt+F12 )で、次のいずれかのコマンドを入力してください:
npm install mochaをプロジェクトにローカルインストールします。グローバルインストール用の
npm install -g mochanpm install --save-dev mochaは、Mocha を 開発依存関係(英語)としてインストールします。
Mocha の公式サイトでスタートする(英語)詳細を参照してください。
テストを書く
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
テストの実行
IntelliJ IDEA を使用すると、Mocha テストをエディターから簡単に実行したり、実行 / デバッグ構成を作成してテストの一部または全部を実行することができます。
エディターから単一のテストを実行する
ガターで
または
をクリックし、リストから <テスト名> の実行 を選択します。

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

Mocha 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Mocha を選択します。 実行/デバッグ構成ダイアログ: Mocha が開きます。
使用する Node.js ランタイムと
mochaパッケージの場所を指定します。アプリケーションの作業ディレクトリを指定します。 デフォルトでは、 作業ディレクトリ フィールドにはプロジェクトのルートフォルダーが表示されます。 この事前定義された設定を変更するには、目的のフォルダーへのパスを指定してください。
オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。 これを行うには、 追加 Mocha オプション フィールドに
--watchフラグを追加します。実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
一致するファイル(例:
*.test.js)のテストのみを実行するパターンを定義することもできます。 テストを含むファイルが別のフォルダー(例: test )に保存されている場合は、パターン内でそのフォルダーへのパスを作業ディレクトリからの相対パスで指定します。./folder1/folder2/test/*.test.js実行するテストで使用する インターフェース(英語)を選択します。
Mocha 実行構成を介してテストを実行する
構成の一覧から Mocha 実行/デバッグ構成を選択し、一覧またはツールバーの
をクリックします。
実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を調べるを参照してください。
クリックして違いを確認してください リンクを使用して 差分ビューアー を開き、実際の結果を期待値と比較します。
選択したテストのファイル名がリンクとして表示されます。 このリンクをクリックして、ソースコードに移動します。
実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を調べるを参照してください。

失敗したテストの再実行
テスト結果ツールバーの
をクリックします。 PhpStorm は、前回のセッション中に失敗したすべてのテストを実行します。

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

または、失敗したテストの横にあるガターで
をクリックし、リストから を選択します。

詳細は、 テストの再実行を参照してください。
ナビゲーション
PhpStorm を使用すると、ファイルと関連テストファイルの間、または テストランナータブ のテスト結果からテストに移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから または を選択するか、 Ctrl+Shift+T を押します。
テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
失敗したテストの場合、PhpStorm はスタックトレースからテストの失敗ラインに移動します。 正確な行がスタックトレースにない場合は、テスト定義に移動します。
デバッグテスト
IntelliJ IDEA を使用すると、エディターから Mocha テストのデバッグをすぐに開始することも、テストの一部または全部をデバッグするための実行 / デバッグ構成を作成することもできます。
エディターから単一のテストのデバッグを開始する
デバッグするテストの横のガターにブレークポイントを設定します。 実行 ツールウィンドウでテストをダブルクリックするか、 F4 を押すと、失敗したテストに移動できます。
ガターで
または
をクリックし、リストから <名前> のデバッグ を選択します。
デバッグ ツールウィンドウで、通常どおり進めます: プログラムをステップ実行し、プログラムの実行を 一時停止して再開し、 中断時に調査し、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示するなどです。

実行 / デバッグ構成を介してテストデバッグを起動する
デバッグするテストの横にブレークポイントを設定します。 実行 ツールウィンドウでテストをダブルクリックするか、 F4 を押すと、失敗したテストに移動できます。
上記のように Mocha 実行 / デバッグ構成を作成します。
構成の一覧から Mocha 実行/デバッグ構成を選択し、一覧またはツールバーの
をクリックします。
開いた デバッグツールウィンドウ で、通常どおり続行します: プログラムをステップ実行し、プログラムの実行を 一時停止して再開し、 一時停止中に調査し、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示するなどです。
ソースマップを無視して実際に実行されているコードをステップ実行するには、
を デバッグ ツールウィンドウのツールバーで押してください。
コードカバレッジを監視する
PhpStorm を使用すると、 Mocha テストでコードがどの程度カバーされて(英語)いるかを監視できます。 PhpStorm は、専用の カバレッジ ツールウィンドウにこの統計情報を表示し、カバーされた行とカバーされていない行をエディターと Project ツールウィンドウ (Alt+1) で視覚的にマークします。 カバレッジを監視するには、 Istanbul(英語) のコマンドラインインターフェースである nyc(英語) をインストールする必要があります。
ニューヨークをインストールする
コマンドライン シェルまたは組み込みの ターミナル (Alt+F12 )で、次のように入力してください:
npm install --save-dev nyc
カバレッジでテストを実行する
テストを開始します。
上記のように Mocha 実行 / デバッグ構成を作成し、メインツールバーのリストから選択して、リストの右側にある
をクリックします。

または、エディターからのカバレッジを使用して特定のスイートまたはテストを実行します。左側のガターで
または
をクリックし、リストから <test_name> のカバレッジ付き実行 を選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。 このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。 レポートからファイルにジャンプし、どの行がカバーされているかは緑色で、カバーされていない行は赤色で表示されます。

Docker コンテナー内の Node.js で Mocha テストを実行する
PhpStorm を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内で Mocha(英語) テストを実行できます。
始める前に
Node.js リモートインタープリター プラグインを 設定 | プラグイン ページで、 JetBrains Marketplace からプラグインをインストールする の説明に従ってインストールして有効化します。
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" } }エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。
テストの実行
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発の場合と同様に進めます: エディターから個別のテストを直接実行およびデバッグするか、上記の テストの実行および テストのデバッグで説明しているように、一部またはすべてのテストを起動するための実行/デバッグ構成を作成します。