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

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

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

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

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

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

実行 / デバッグ構成を介してテストデバッグを起動する
デバッグするテストの横にブレークポイントを設定します。 実行 ツールウィンドウでテストをダブルクリックするか、 F4 を押すと、失敗したテストに移動できます。
上記のように Mocha 実行 / デバッグ構成を作成します。
構成の一覧から Mocha 実行/デバッグ構成を選択し、一覧またはツールバーの
をクリックします。
開いた デバッグツールウィンドウ で、通常どおり進めてください: プログラムをステップ実行、 一時停止と再開、 中断時の調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などを行えます。
ソースマップを無視して実際に実行されているコードをステップ実行するには、
を デバッグ ツールウィンドウのツールバーで押してください。
コードカバレッジを監視する
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 マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに 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" } }エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。
テストの実行
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発と同様に進めてください。エディターから単一テストを直接実行・デバッグするか、または実行/デバッグ構成を作成し、一部または全てのテストを テストの実行や テストのデバッグで起動します。
