WebStorm 2024.3 ヘルプ

JavaScript のテスト

WebStorm を使用すると、Karma(英語)Vitest(英語)Jest(英語)Protractor(英語)Cucumber.js(英語)Mocha(英語)Node.js テストランナー(英語)を使用して JavaScript ユニットテストを実行およびデバッグできます。

テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの隣に表示され、すぐに実行またはデバッグするオプションがあります。

Run single test from the editor

Jest、Karma、Mocha については、WebStorm のコードカバレッジレポートを参照することもできます。

WebStorm を使用すると、テストに移動アクション(Ctrl+Shift+T または移動 | テスト)を使用して、ソースコードから関連するテストファイルにすばやく移動できます。例: auth.js から auth.test.js に移動できます。

テストとスイートの名前、およびこのファイルで定義されているその他のシンボルを表示する構造ビューを使用して、テストファイルをすばやく移動することもできます。

Structure view for tests

構造ツールウィンドウに移動するには、Ctrl+7 を押します。または、Ctrl+F12 を押して構造ビューをポップアップとしてエディターに開きます。

テストの実行とデバッグ

JavaScript のテストを開始する前に、選択したテストランナーが対応するページに記載されているようにプロジェクトにインストールされて設定されていることを確認してください。

テストのデバッグセッション中に、テストのステップ実行、テストの実行の停止と再開一時停止時のテストの検査コンソールでの JavaScript コードスニペットの実行などを行うことができます。

Mocha、Karma、Jest、Vitest を使用して単一のテストを迅速に実行またはデバッグする

  • テストを実行するには、その隣のガターで the Run button または Rerun をクリックし、リストから実行 <テスト名> を選択します。

  • テストをデバッグするには、必要に応じてブレークポイントを設定し、テストの横のガターで the Run button または Rerun をクリックし、リストからデバッグ <テスト名> を選択します。

Run and debug tests from the editor

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

  1. 実行 / デバッグ構成ダイアログ ( 実行 | 実行構成の編集 ) で、Add New Configuration をクリックし、適切な構成タイプを選択します。

  2. デフォルト設定を受け入れるか、必須フィールドにカスタム値を入力します。特定のテストフレームワークについてはヘルプを参照してください。

実行 / デバッグ構成を使用してテストを実行またはデバッグする

  • テストを実行するには、必要な構成を選択し、構成のリストまたはツールバーで the Run button または Run with Coverage をクリックします。

    Run widget: Run Test
  • テストをデバッグするには、必要に応じてブレークポイントを設定し、必要な構成を選択して、構成リストまたはツールバーの Debug をクリックします。

    Run widget: Debug Test

関連ページ:

プログラムのステップスルー

ステップは、プログラムの段階的な実行を制御するプロセスです。WebStorm は、次の行に直接移動する必要があるか、中間のメソッド呼び出しもインスペクションする必要があるかなど、戦略に応じて使用される一連のステップアクションを提供します。ステップアクションは、ウィンドウツールバーとメニューにあります。ステップオーバー:現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接...

デバッガーセッションを開始する

デバッガーセッションは実行 / デバッグ構成に基づいています。構成タイプは、アプリケーションのタイプとランタイム環境によって異なります。一度に異なる設定で複数のデバッガーセッションを実行できます。構成を通じて、アプリケーションを起動するだけでなく、アプリケーションが起動する前に、WebStorm にいくつかのパラメーターを使用したり、いくつかのアクションを実行したりするように指示することもできます。例:Node.js 固有のコマンドラインオプションを Node.js 実行可能ファイルに渡すことが...

中断されたプログラムを調べる

デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、ブレークポイントに到達するか、プログラムを手動で一時停止するまで、プログラムは正常に実行されます。その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。コールスタックを調べる:プログラムが一時停止されると、この時点に到達したコールスタックがフレームペインに表示されます。マルチプロセス Node.js アプリケーションまたはサービスワーカーをデバッグしていると...

対話型デバッガーコンソール

対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、WebStorm は完成のための異形を提案します。該当する明細を選択してを押します。We...

ブレークポイント

ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類:WebSto

実行 / デバッグ構成ダイアログ

このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...