Node.js のテスト
WebStorm を使うと、多数のフレームワークで Node.js アプリケーションをテストできます。
現在のページでは、非同期テストシナリオの実行に特に役立つ JavaScript テストフレームワークである 組み込みの Node.js テストランナー(英語)または Mocha(英語) を使用したテストについて説明します。 WebStorm の外部から Mocha テストを実行し、ツリー表示に並んだテスト結果を確認し、そこからテストソースへ簡単に移動できます。 エディターのテストの横に、WebStorm はテストのステータスを表示し、素早く実行またはデバッグできるオプションを提供します。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
設定で Node.js プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Node.js と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
組み込みの Node.js テストランナー
バージョン 20 以降、Node.js には 組み込みの Node.js テストランナー(英語)の安定バージョンが付属しています。 WebStorm は組み込みのテストランナーとの統合をサポートしているため、サードパーティフレームワークをインストールして構成しなくてもテストを実行できます。
TypeScript コードのテストもサポートされています。詳細については、 TypeScript をテストする を参照してください。
Node.js バージョン 20 以降がコンピューターにインストールされており、 ローカル Node.js ランタイムとして構成されていることを確認してください。
Node.js 公式 Web サイト(英語)の説明に従ってテストファイルを作成します。
ガター内：
単一のテストの横にある
をクリックして実行します。テストスイートの横にある
をクリックして、テストスイート内のすべてのテストを実行します。
実行 ツールウィンドウでテスト結果を確認し、詳細は テスト結果を調べるを参照してください。
テストの再実行:
単一のテストを再実行するには、 実行 ツールウィンドウでテストを選択し、コンテキストメニューから 「<test name>」を実行； を選択するか、 Alt+Shift+R を押します。
または、テストの横にあるガターアイコンを使用して再実行します。 無視されたテスト、失敗したテスト、成功したテストを再実行するには、「
」、「
」または「
」をクリックします。
スイート全体を再実行するには、 実行 ツールウィンドウのツールバーで
をクリックします。
または、スイートの横にあるガターアイコンをクリックします。
サードパーティのテストフレームワークを使用してコードをテストする
任意のフレームワークを利用できますが、推奨は Mocha です。
Mocha をインストールする
埋め込まれた ターミナル （Alt+F12 ）で、次のいずれかのコマンドを入力します。
npm install mochaをプロジェクトにローカルインストールします。グローバルインストール用の
npm install -g mochanpm install --save-dev mochaは、Mocha を 開発依存関係(英語)としてインストールします。
Mocha の公式サイトでスタートする(英語)詳細を参照してください。
Node.js 標準アサート機能(英語)の効率的な代替品として チャイ期待ライブラリ(英語)をインストールします。
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev chai
Mocha テストを作成する
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
Mocha テストを実行する
WebStorm を使うと、エディターからすぐに単体の Mocha テストを実行したり、実行/デバッグ構成を作成して一部またはすべてのテストを実行できます。
エディターから単一の Mocha テストを実行する
ガターで
または 
をクリックし、リストから <test_name> を実行 を選択します。
ガターの テストステータスアイコン
および 
により、エディターでテストが成功したか失敗したかを確認することもできます。
Mocha 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Mocha を選択します。 「実行/デバッグ構成：Mocha 」ダイアログが開きます。使用する Node.js ランタイムと
mochaパッケージの場所を指定します。アプリケーションの作業ディレクトリを指定します。 デフォルトでは、 作業ディレクトリ フィールドにはプロジェクトのルートフォルダーが表示されます。 この事前定義された設定を変更するには、目的のフォルダーへのパスを指定してください。
オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。 これを行うには、 追加の Mocha オプション フィールドに
--watchフラグを追加します。実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
一致するファイル（例:
*.test.js）のテストのみを実行するパターンを定義することもできます。 テストを含むファイルが別のフォルダー（例: テスト ）に保存されている場合は、パターン内でそのフォルダーへのパスを作業ディレクトリからの相対パスで指定します。./folder1/folder2/test/*.test.js実行するテストで使用する インターフェース(英語)を選択します。
Mocha 実行構成を介してテストを実行する
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を確認するを参照してください。
クリックして違いを確認する。 リンクを使用して 差分ビューアー を開き、実際の結果を期待値と比較します。
選択したテストのファイル名がリンクとして表示されます。 このリンクをクリックして、ソースコードに移動します。
実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細については、 テスト結果を確認するを参照してください。
失敗した Mocha テストを再実行する
テスト結果ツールバーの
をクリックします。 WebStorm は前回のセッションで失敗したすべてのテストを実行します。
特定の失敗したテストを再実行するには、そのコンテキストメニューで を選択します。
または、失敗したテストの横にあるガターで
をクリックし、リストから を選択します。
詳細は、 テストの再実行を参照してください。
ナビゲーション
WebStorm を使用すると、ファイルと関連するテストファイル間や、 テストランナータブのテスト結果からテストへジャンプできます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから または を選択するか、 Ctrl+Shift+T を押します。
テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
失敗したテストについては、WebStorm がスタックトレースからテストの失敗行へ移動します。 正確な行がスタックトレースにない場合は、テスト定義に移動します。
デバッグテスト
テストが不明な理由で失敗した場合は、そのテストをデバッグして、テストが古いのか、ソースコードの変更によってアプリケーションの意図した動作が崩れてしまったのかを確認できます。
WebStorm を使うと、エディターからすぐに単一の Mocha テストのデバッグを開始したり、テストの一部または全部をデバッグするための実行/デバッグ構成を作成できます。
エディターから単一のテストのデバッグを開始する
デバッグするテストの横のガターにブレークポイントを設定します。 実行 ツールウィンドウでテストをダブルクリックするか、 F4 を押すと、失敗したテストに移動できます。
ガターで
または をクリックし、リストから デバッグ <テスト名> を選択します。デバッグ ツールウィンドウで、通常どおり操作してください： プログラムをステップ実行、 実行の停止および再開、 中断時に調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 HTML DOM の確認などができます。
Mocha 実行 / デバッグ構成を使用したデバッグテスト
デバッグするテストの横にブレークポイントを設定します。 実行 ツールウィンドウでテストをダブルクリックするか、 F4 を押すと、失敗したテストに移動できます。
上記のように Mocha 実行 / デバッグ構成を作成します。
構成のリストから Mocha 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
開いた デバッグツールウィンドウ で、通常どおり操作してください： プログラムをステップ実行、 実行を停止・再開、 一時停止時の確認 、コールスタックや変数の調査、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。
詳細については 失敗したテストをデバッグするを参照してください。
コードカバレッジを監視する
WebStorm を使えば、どれだけのコードが Mocha テストでカバーされているかも確認できます。 WebStorm は、この統計情報を専用の カバレッジ ツールウィンドウに表示し、エディターおよび プロジェクト ツールウィンドウ(Alt+1 )でカバー済みと未カバーの行を視覚的にマークします。 カバレッジを監視するには、 Istanbul(英語) のコマンドラインインターフェースである nyc(英語) をインストールする必要があります。
ニューヨークをインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev nyc
カバレッジでテストを実行する
テストを開始：
上記のように Mocha 実行 / デバッグ構成を作成し、メインツールバーのリストから選択して、リストの右側にある
をクリックします。
または、エディターからのカバレッジを使用して特定のスイートまたはテストを実行します。左側のガターで
または をクリックし、リストから カバレッジで <test_name> を実行する を選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。 このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。 レポートから、ファイルに移動して、どの行が覆われていたか（緑色にマーキングされているか、どの行が覆われていないか）、赤色に表示されているかを確認できます。
Docker コンテナー内の Node.js でテストを実行する
WebStorm を使うと、ローカルと同じ方法で Docker コンテナー内で Mocha テストを実行できます。
始める前に
Node.js、 Node.js リモートインタープリター、 Dockerに必要なプラグインが 設定 | プラグイン ページ・タブ インストール済み で有効になっていることを確認してください。 詳細については、 プラグイン管理を参照してください。
Docker をダウンロード、インストール、設定し、 Docker の説明に従ってください。
Docker で Node.js リモートランタイムを構成するまたは Docker Compose 経由でインストールし、プロジェクトの デフォルトとして設定してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。
package.json を開き、必要なテストフレームワークが
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", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1", "mocha": "^9.1.3", "nyc": "^15.1.0" } }エディターの任意の場所を右クリックして、コンテキストメニューから 「<package manager> install」を実行 を選択します。
テストの実行
Mocha オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発時と同様に進めてください。エディターから単一テストの実行・デバッグや、実行/デバッグ構成を作成して一部またはすべてのテストを起動できます。詳細は上記の テストを実行および テストをデバッグを参照してください。