PhpStorm 2026.1 Help

React アプリケーションをテストする

ジェネレーターを使用して作成されたReact アプリケーションで Jest テスト(英語)を実行およびデバッグできます。 開始する前に、 package.json dependencies オブジェクトに react-scripts パッケージが追加されていることを確認してください。

Jest テストは、エディター、 プロジェクト ツールウィンドウ、または実行 / デバッグ構成から直接実行およびデバッグできます。 詳細については、 Jest を参照してください。

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

  • ガターで the Run icon または リラン アイコン をクリックし、リストから 実行 <test_name> を選択します。

    Run single test from the editor

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

実行 / デバッグ構成を介してテストを実行する

Jest 実行 / デバッグ構成を作成する

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

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

  3. Jest パッケージ フィールドに、 react-scripts パッケージへのパスを指定します。

  4. Jest オプション フィールドに --env=jsdom と入力します。

    React をテストする: Jest 実行構成

実行 / デバッグ構成を介してテストを起動する

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

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

デバッグテスト

デバッグテスト

  1. メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、右側の 「デバッグ」ボタン をクリックします。

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

2026 年 5 月 22 日