Jest

• お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install --save-dev jest

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

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

  

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

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

• プロジェクトツールウィンドウで、テストを含むフォルダーを選択し、実行 'Tests in <folder name>' を選択します。

  

Jest 実行構成を作成する

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

2. 使用する Node.js インタープリターを指定します。

   プロジェクトエイリアスを選択すると、WebStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

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

   詳細については、「リモート Node.js インタープリターの構成」、「ローカル Node.js インタープリターの構成」、「Windows Subsystem for Linux で Node.js を使用する」を参照してください。

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

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

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

6. 必要に応じて、使用する jest.config.js または jest.config.ts ファイルを指定します。リストから関連ファイルを選択するか、 をクリックして開いたダイアログで選択するか、フィールドにパスを入力します。

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

7. オプション:

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

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

8. オプション:

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

   

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

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

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

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

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

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

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

   

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

失敗したテストの再実行

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

  

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

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

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

WebStorm は、テスト関連のソースファイルに変更が加えられるとすぐにテストが自動的に再実行される監視(英語)モードをサポートしています。その結果、手動でテストを再実行したり、Jest 実行 / デバッグ構成を再起動したりすることなく、コードに変更を加えるだけで済みます。

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

  

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

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

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

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

  

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

  

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

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

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

  

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

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

  

開いたデバッグツールウィンドウでは、通常通りに進めます。テストをステップ実行、テスト実行の停止・再開、中断中のテストを調査、コンソールで JavaScript のコードスニペットを実行する、などです。

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

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

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

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

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

   

始める前に

1. Node.js、Node.js リモートインタープリター、Docker に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。

2. Docker の説明に従って、Docker をダウンロード、インストール、設定します。

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

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

5. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

テストの実行

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

2. ローカル開発の場合と同様に続行します。エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、上記のテストの実行およびデバッグテストに従ってテストの一部またはすべてを起動します。