Jest
Jest は、特にクライアント側の JavaScript アプリケーションおよび React(英語) アプリケーション用のテストプラットフォームです。プラットフォームの詳細については、Jest(英語) の公式 Web サイトを参照してください。
PhpStorm の Jest でテストを実行し、デバッグすることができます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターでテストの横に表示され、すぐに実行したりデバッグすることができます。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
Jest をインストールして構成する
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install --save-dev jest
Jest 公式 Web サイトでオンラインドキュメント(英語)および Jest の設定(英語)の詳細を参照してください。
テストの実行
PhpStorm を使用すると、Jest テストをエディターから簡単に実行したり、実行 / デバッグ構成を作成してテストの一部または全部を実行することができます。
JavaScript および TypeScript コードの Vitest テストの作成の詳細については、Vitest 公式 Web サイトの Vitest の特徴(英語)を参照してください。
エディターから単一のテストを実行する
ガターで
または
をクリックし、リストから実行 <テスト名> を選択します。
ガターのテストステータスアイコン
および
により、エディターでテストが成功したか失敗したかを確認することもできます。
プロジェクトツールウィンドウからフォルダー内のすべてのテストを実行する
プロジェクトツールウィンドウで、テストを含むフォルダーを選択し、実行 'Tests in <folder name>' を選択します。
Jest 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Jest を選択します。「実行 / デバッグ構成: Jest」ダイアログが開きます。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、PhpStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、PhpStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。
jest、react-scripts、react-script-ts、react-super-scripts、react-awesome-scripts パッケージの場所を指定します。
アプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。
実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
必要に応じて、使用する jest.config.js または jest.config.ts ファイルを指定します。リストから関連ファイルを選択するか、
をクリックして開いたダイアログで選択するか、フィールドにパスを入力します。
フィールドが空の場合、PhpStorm は
jest
キーを持つ package.json ファイルを探します。検索は、作業ディレクトリから上に向かってファイルシステムで実行されます。適切な package.json ファイルが見つからない場合、Jest のデフォルト設定(英語)がオンザフライで生成されます。オプション:
関連するソースファイルの変更時に自動的に再実行されるテストを構成します。これを行うには、Jest オプションフィールドに
--watch
フラグを追加します。テストセッション中に実行ツールウィンドウの変更のウォッチトグルボタンを押して、後でウォッチ(英語)モードをオンにすることもできます。以下の変更時にテストを自動的に再実行する (ウォッチモード) を参照してください。
オプション:
コマンドを実行するための環境変数を指定します。PhpStorm は、これらの変数を
process.env
の補完リストに表示します。Node オプションフィールドに、必要に応じて、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。許容されるオプションは次のとおりです。
実行中に CoffeeScript ファイルをオンザフライで JavaScript にコンパイルするには、
--require coffeescript/register
を使用します。このモードでは、
coffeescript
パッケージの一部である register.js ファイルがプロジェクト内にある必要があります。CoffeeScript コンパイラーをインストールするに従って、coffeescript
パッケージがローカルにインストールされていることを確認してください。Node.js v7 を Chrome デバッグプロトコル(英語)サポートに使用している場合は、
--inspect
または--inspect-brk
パラメーターを使用します。それ以外の場合、デフォルトでデバッグプロセスは V8 デバッグプロトコル(英語)を使用します。プロジェクトで ECMAScript モジュール(英語)を使用するには、
— experimental-vm-modules
フラグを Node オプションフィールドに追加します。
実行構成を介してテストを実行する
構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。
失敗したテストの再実行
テスト結果ツールバーの
をクリックします。PhpStorm は、前回のセッション中に失敗したすべてのテストを実行します。
特定の失敗したテストを再実行するには、そのコンテキストメニューで
を選択します。
詳細は、テストの再実行を参照してください。
変更時にテストを自動的に再実行する (ウォッチモード)
PhpStorm は、テスト関連のソースファイルに変更が加えられるとすぐにテストが自動的に再実行される監視(英語)モードをサポートしています。その結果、手動でテストを再実行したり、Jest 実行 / デバッグ構成を再起動したりすることなく、コードに変更を加えるだけで済みます。
テストランナータブで、変更のウォッチトグルボタンを押します。
あるいは、実行 / デバッグ構成の Jest オプションフィールドに
--watch
フラグを追加します。上記の Jest 実行構成を作成するを参照してください。
ナビゲーション
PhpStorm を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。
PhpStorm を使用すると、ファイルと関連するテストファイルの間、およびテストまたはスイートの定義とテストランナータブ内の結果の間を移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから
または を選択するか、Ctrl+Shift+T を押します。テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
テストまたはスイートの定義からテストランナータブの結果に移動するには、ガターで
または
をクリックし、リストからテストツリーで <test_name> を選択しますを選択します。
失敗したテストの場合、PhpStorm はスタックトレースからテストの失敗ラインに移動します。正確な行がスタックトレースにない場合は、テスト定義に移動します。
スナップショットテスト
PhpStorm と Jest の統合により、スナップショットテストなどの優れた機能がサポートされます。
.toMatchSnapshot()
メソッドでテストを実行すると、Jest は __snapshots__ フォルダーにスナップショットファイルを作成します。テストから関連するスナップショットに移動するには、テストの横のガターで をクリックするか、
.toMatchSnapshot()
メソッドのコンテキストメニューから必要なスナップショットを選択します。
![Jest スナップショットテスト: テストファイルから対応するスナップショットに移動する Jest snapshot testing: jump from a test file to the corresponding snapshot](https://resources.jetbrains.com/help/img/idea/2024.1/ws_go_to_jest_snapshhot.png)
スナップショットがレンダリングされたアプリケーションと一致しない場合、テストは失敗します。これは、コードの一部の変更によりこの不一致が発生したか、スナップショットが古いため更新する必要があることを示しています。
この不一致の原因を確認するには、テストランナータブの右側のペインにある差異を見るにはクリックしてくださいリンクから PhpStorm 組み込み差分ビューアーを開きます。
![Jest snapshots: compare the expected and actual snapshots in the PhpStorm Diff Viewer](https://resources.jetbrains.com/help/img/idea/2024.1/ws_jest_diff_view.png)
実行ツールウィンドウのテストランナータブから、古いスナップショットを直接更新できます。
特定のテストのスナップショットを更新するには、テスト名の横にあるクリックしてスナップショットを更新するリンクを使用します。
テストの古いスナップショットをすべてファイルから更新するには、テストファイル名の横にあるクリックして失敗したスナップショットを更新しますを使用します。
![Jest スナップショットテスト: スナップショットの更新 Jest snapshot testing: update snapshots](https://resources.jetbrains.com/help/img/idea/2024.1/ws_jest_update_snapshot.png)
デバッグテスト
PhpStorm を使用すると、エディターから Jest テストのデバッグをすぐに開始することも、テストの一部または全部をデバッグするための実行 / デバッグ構成を作成することもできます。
必要に応じてブレークポイントを設定します。
エディターから単一のテストのデバッグを開始するには、ガターで
または
をクリックし、リストからデバッグ <テスト名> を選択します。
フォルダー内のすべてのテストのデバッグを開始するには、プロジェクトツールウィンドウでフォルダーを選択し、コンテキストメニューからデバッグ 'Tests in <folder name>' を選択します。
実行 / デバッグ構成を介してテストデバッグを開始するには、上記の説明に従って Jest 実行 / デバッグ構成を作成します。
次に、構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
開いたデバッグツールウィンドウで、通常どおりに続行します。テストの実行、一時停止と再開、中断時にテストを調査、
コードカバレッジを監視する
PhpStorm を使用すると、Jest テストでカバーされている(英語)コードの量を監視することもできます。PhpStorm は、専用のカバレッジツールウィンドウにこの統計を表示し、カバーされた行とカバーされていない行をエディターとプロジェクトツールウィンドウで視覚的にマークします。
カバレッジでテストを実行する
上記のように Jest 実行 / デバッグ構成を作成します。
メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある
をクリックします。
または、エディターからのカバレッジを使用して特定のスイートまたはテストをすばやく実行します。ガターで
または
をクリックし、リストからカバレッジで <test_name> を実行するを選択します。
カバレッジツールウィンドウでコードカバレッジを監視します。このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。レポートから、ファイルに移動して、どの行が覆われていたか(緑色にマーキングされているか、どの行が覆われていないか)、赤色に表示されているかを確認できます。
Docker コンテナー内の Node.js で Jest テストを実行する
PhpStorm を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内で Jest(英語) テストを実行できます。
始める前に
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Node.js リモートインタープリタープラグインをインストールして有効にします。
設定 | プラグインページのインストール済みタブで、Node.js および Docker に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Docker の説明に従って、Docker をダウンロード、インストール、設定します。
Docker で Node.js リモートインタープリターを構成するまたは Docker Compose を介して、プロジェクトのデフォルトとして設定します。また、このリモートインタープリターに関連付けられているパッケージマネージャーがプロジェクトのデフォルトとして設定されていることを確認してください。
package.json を開き、Jest が
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": { "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1" } }エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。
テストの実行
Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。
ローカル開発の場合と同様に続行します。エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、上記のテストの実行およびデバッグテストに従ってテストの一部またはすべてを起動します。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_plugins_settings.png)
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_runConfigMenu.png)
実行 / デバッグ構成ダイアログ
このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ws_js-jest_test_rc_env_var_completion.png)
実行 / デバッグ構成: Jest
作成: このダイアログでは、Jest テストを実行するための構成を作成します。JavaScript および TypeScript コードの Vitest テストの作成の詳細については、Vitest 公式 Web サイトの Vitest の特徴を参照してください。始める前に:Node.js をダウンロードしてインストールします。設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フ...
![](https://pleiades.io/icons/phpstorm.png)
Node.js
このページは、プラグインのインストールに従って、設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。次の Node.js バージョンは、PhpStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細情報 Node インタープリターこのフィールドでは、現在のプロ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/fileWatcherExampleImage1.png)
CoffeeScript
PhpStorm では、JavaScript にコンパイルされる CoffeeScript を使用できます。PhpStorm は *.coffee ファイルを認識し、それらにのマークを付けます。CoffeeScript コードにブレークポイントを直接設定でき、PhpStorm はコンパイル中に生成されたソースマップを使用してブレークポイントを認識します。PhpStorm は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。シンボ...
![](https://resources.jetbrains.com/help/img/idea/2024.1/ps_test_result_phpunit.png)
テスト結果を調べる
PhpStorm でテストが実行されている間、テスト実行は実行ツールウィンドウのその実行構成のタブに表示されます。テスト実行が終了すると、そのタブでテスト結果を確認できます。右側のコンソールには、現在のテストセッションの出力が表示されます。テストの実行に関する詳細情報と、テストが失敗したか無視された理由を確認できます。テスト結果リストの上にあるテスト結果ツールバーを使用すると、成功したテストと無視されたテストの表示と非表示を切り替えたり、各テストの実行にかかった時間を表示したり、テスト結果をエク...