Jest

1. Node.js をダウンロードしてインストールします。

2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。

• 組み込み ターミナル (Alt+F12) で次のように入力します。

  npm install --save-dev jest

エディターから単一のテストを実行する

• ガターで または をクリックし、リストから 実行 <test_name> を選択します。

  

  エディターでテストが成功したか失敗したかは、ガターの テストステータス アイコン と で確認できます。

プロジェクトツールウィンドウからフォルダー内のすべてのテストを実行する

• プロジェクト ツールウィンドウ（Alt+1 ）で、テストが入っているフォルダーを選択し、次に 「<folder name>」内のテストを実行 を選択します。

  

Jest 実行構成を作成する

1. 実行 / デバッグ構成ダイアログ (メインメニューの 実行 | 実行構成の編集) を開き、左側のペインで をクリックし、リストから Jest を選択します。 実行/デバッグ構成：Jest ダイアログが開きます。

2. 使用する Node.js ランタイムを指定します。

   プロジェクト エイリアスを選択すると、PhpStorm は JavaScript ランタイムページの ノードランタイム フィールドにあるプロジェクトのデフォルトインタープリターを自動的に使用します。 ほとんどの場合、PhpStorm はプロジェクトのデフォルトランタイムを検出してフィールドへ自動入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

3. jest、 react-scripts、 react-script-ts、 react-super-scripts、 react-awesome-scripts パッケージの場所を指定します。

4. アプリケーションの作業ディレクトリを指定します。 デフォルトでは、 作業ディレクトリ フィールドにはプロジェクトのルートフォルダーが表示されます。 この事前定義された設定を変更するには、目的のフォルダーへのパスを指定してください。

5. 実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。

6. オプション:

   使用する jest.config.js または jest.config.ts ファイルを指定します：リストから該当ファイルを選択するか、 をクリックし、開いたダイアログで選択するか、フィールドにパスを入力してください。

   フィールドが空の場合、PhpStormは jest キーを持つ package.json ファイルを探します。 検索は、 作業ディレクトリから上に向かってファイルシステムで実行されます。 適切な package.json ファイルが見つからない場合、 Jest のデフォルト設定(英語)がオンザフライで生成されます。

7. オプション:

   関連するソースファイルの変更時に自動的に再実行されるテストを構成します。 これを行うには、 Jest オプション フィールドに --watch フラグを追加します。

   テストセッション中に 実行 ツールウィンドウの 変更のウォッチ トグルボタンを押して、後で ウォッチモードをオンにすることもできます。以下の 変更時にテストを自動的に再実行する (ウォッチモード)を参照してください。

8. オプション:

   コマンドを実行するための環境変数を指定します。 PhpStormは、これらの変数を process.env の補完リストに表示します。

   

9. ノード オプション フィールドに、必要に応じて、Node.js 実行可能ファイルに渡される Node.js 固有のコマンドラインオプションを入力します。 許容されるオプションは次のとおりです。

   • 実行中に CoffeeScript ファイルをオンザフライで JavaScript にコンパイルするには、 --require coffeescript/register を使用します。

     このモードでは、 coffeescript パッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。 CoffeeScript コンパイラーをインストールの説明に従って、 coffeescript パッケージがローカルにインストールされていることを確認してください。

   • Chrome デバッグプロトコル(英語)サポートには --インスペクション または --inspect-brk パラメーターを使用します。

   • プロジェクトで ECMAScript モジュール(英語)を使用するには、 —experimental-vm-modules フラグを ノード オプション フィールドに追加します。

実行構成を介してテストを実行する

1. 構成の一覧から Jest 実行 / デバッグ構成を選択し、一覧またはツールバーの をクリックします。

2. 実行 ツールウィンドウの テストランナー タブで、テストの実行を監視し、テスト結果を分析します。 詳細は テスト結果を調査 を参照してください。

失敗したテストの再実行

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

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

詳細は、 テストの再実行を参照してください。

変更時にテストを自動的に再実行する (ウォッチモード)

PhpStorm は、テスト関連のソースファイルに何らかの変更があった場合に、テストを自動的に再実行する ウォッチモードをサポートしています。 その結果、手動でテストを再実行したり、 Jest 実行 / デバッグ構成を再起動したりすることなく、コードに変更を加えるだけで済みます。

• テストランナータブで、 変更のウォッチ トグルボタンを押します。

  

• あるいは、実行／デバッグ構成の Jest オプション フィールドに --watch フラグを追加し、上記の Jest 実行構成を作成するを参照してください。

• テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから Go to | テスト または Go to | テスト対象 を選択するか、 Ctrl+Shift+T を押します。

• テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「ソースに移動 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。

• テストまたはスイートの定義から テストランナー タブの結果に移動するには、ガターで または をクリックし、リストから テストツリーで <test_name> を選択する を選択します。

  

• 失敗したテストの場合、PhpStorm はスタックトレースからテストの失敗行に移動します。 正確な行がスタックトレースにない場合は、テスト定義に移動します。

  

• 必要に応じて ブレークポイントを設定します。

• エディターから単一のテストのデバッグを開始するには、ガターで または をクリックし、リストから デバッグ <test_name> を選択します。

• フォルダー内のすべてのテストのデバッグを開始するには、 プロジェクト ツールウィンドウでフォルダーを選択し、コンテキストメニューから 「<folder name>」内のテストをデバッグ を選択します。

  

• 実行 / デバッグ構成を介してテストデバッグを開始するには、 上記の説明に従ってJest 実行 / デバッグ構成を作成します。

  次に、構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの をクリックします。

開いた デバッグツールウィンドウ で、通常どおり進めてください： プログラムをステップ実行、 一時停止と再開、 中断時の調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などを行えます。

カバレッジでテストを実行する

1. 上記のように Jest 実行 / デバッグ構成を作成します。

2. メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある をクリックします。

   または、エディターからカバレッジ付きで特定のスイートまたはテストをすばやく実行できます。ガターで または をクリックし、リストから カバレッジで <test_name> を実行する を選択します。

   

3. カバレッジツールウィンドウでコードカバレッジを監視します。 このレポートには、テストでカバーされたファイルの数と、その中にカバーされている行の割合が表示されます。 レポートから、ファイルに移動して、どの行が覆われていたか（緑色にマーキングされているか、どの行が覆われていないか）、赤色に表示されているかを確認できます。

   

始める前に

1. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Node.js リモートインタープリタープラグインをインストールして有効にします。

2. 設定 | プラグイン ページ、 インストール済み タブで、 Node.js および Docker の必要なプラグインが有効になっていることを確認してください。 詳細については、 プラグインの管理を参照してください。

3. Docker に記載されている手順に従って、 Docker をダウンロード、インストール、設定してください。

4. Docker で Node.js リモートランタイムを構成するまたは Docker Compose 経由でインストールし、プロジェクトの デフォルトとして設定してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーが プロジェクトのデフォルトとして設定されていることを確認してください。

5. 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" } }

6. エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。

テストの実行

1. Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。

2. ローカル開発と同様に進めてください。エディターから単一テストを直接実行・デバッグするか、または実行/デバッグ構成を作成し、一部または全てのテストを テストの実行や テストのデバッグで起動します。