テスト

Visual Studio Code は、コードのテストのための豊富な機能セットを提供します。プロジェクト内のテストを自動的に検出、実行、デバッグし、テストカバレッジの結果を取得できます。VS Code の GitHub Copilot は、プロジェクトのテストフレームワークのセットアップを支援し、テストコードの生成と失敗したテストの修正に役立ちます。

この記事では、VS Code でのテストの開始方法、一般的なテスト拡張機能の検索方法、およびテスト機能の探索について説明します。また、VS Code の Copilot がテストをより速く作成するのにどのように役立ち、失敗したテストの修正をどのように支援できるかについても学習します。

VS Code でのテストについて

VS Code のテストサポートは言語固有であり、インストールされているテスト拡張機能に依存します。言語拡張機能またはスタンドアロン拡張機能は、特定の言語またはテストフレームワークのテスト機能を実装できます。

VS Code には、コードをテストするための次の機能があります

• 複数のテストフレームワークのサポート: 言語拡張機能とスタンドアロンテスト拡張機能は、Jest、Mocha、Pytest、JUnit など、さまざまな言語とテストランナーのサポートを提供します。

• 一元化されたテスト管理: テストエクスプローラーは、プロジェクト内のテストを管理および実行するための一元化された場所を提供します。テストエクスプローラーは、テスト拡張機能によっては、プロジェクト内のテストを自動的に検出する場合があります。

• 統合されたテスト結果: エディターでテストコードと並んでインラインでテストステータスを表示するか、テストエクスプローラーですべてのテストを表示します。詳細なテスト結果は、テスト結果パネルで確認できます。

• デバッグ: テストをデバッグして、テストの失敗を診断します。ブレークポイント、ウォッチ変数など、VS Code の豊富なデバッグサポートを活用してください。

• テストカバレッジ: カバレッジ付きでテストを実行して、コードのどの程度がテストでカバーされているかを確認します。

• AI 支援テスト: VS Code の GitHub Copilot を使用して、テストフレームワークのセットアップ、テストコードの生成、および失敗したテストの修正を支援します。

• タスク統合: テストを実行するタスクを作成して、テスト作業を容易にします。コードを変更したときにバックグラウンドでテストを実行することもできます。

VS Code でのテスト入門

VS Code でのテストを開始するには、次の手順に従います

1. 拡張機能ビューを開き、プロジェクトのテスト拡張機能をインストールします。拡張機能をテストカテゴリ (@category:"testing") でフィルタリングします。

2. アクティビティバーのビーカーアイコン () を選択して、テストエクスプローラーを開き、プロジェクト内のテストを検出します。

3. テストエクスプローラーまたはエディターから直接テストを実行およびデバッグします。

テスト用拡張機能

テストをサポートする拡張機能は、Visual Studio Marketplace で見つけることができます。また、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、テストカテゴリでフィルタリングすることもできます。

テストビューでの自動テスト検出

テストビューは、テストを管理および実行するための一元化された場所を提供します。テストビューにアクセスするには、アクティビティバーのビーカーアイコン () を選択します。また、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) で [テスト: テストエクスプローラービューにフォーカス] コマンドを使用することもできます。

テストを含むプロジェクトがある場合、テストエクスプローラービューはワークスペース内のテストを検出してリスト表示します。デフォルトでは、検出されたテストはテストエクスプローラーのツリービューに表示されます。ツリービューはテストの階層構造と一致しているため、テストのナビゲートと実行が容易になります。

テストエクスプローラーから再生ボタンを選択して、テストを実行できます。テストの実行とデバッグの詳細については、「テストの実行とデバッグ」セクションを参照してください。

多数のテストがある場合は、フィルターオプションを使用して、関心のあるテストをすばやく見つけることができます。[フィルター] ボタンを使用して、ステータスでテストをフィルター処理したり、現在のファイルのテストのみを表示したりできます。検索ボックスを使用して、名前で特定のテストを検索したり、@ 記号を使用してステータスで検索したりすることもできます。

[その他のアクション] メニューでは、並べ替えや表示オプションなど、その他の機能にアクセスできます。

新しいテストを追加したり、テストを変更したりする場合は、[テストの更新] ボタンを使用して、テストエクスプローラーのテストリストを更新します。コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) で [テストエクスプローラー: テストの再読み込み] コマンドを使用することもできます。

AI を使用したテストの作成

テストの作成は時間がかかり、見過ごされがちです。Copilot は、アプリケーションのテストコードを作成することにより、テストの作成プロセスを迅速化できます。単体テスト、統合テスト、エンドツーエンドテストなどを作成するために使用できます。

VS Code で Copilot を使用してテストを作成するには、次のいずれかの方法を使用できます

• エディタースマートアクション

  1. オプションで、アプリケーションコードのブロックを選択します

  2. エディターで右クリックし、[Copilot] > [テストを生成] を選択します

• チャットプロンプト

  1. テストを生成するアプリケーションコードファイルを開きます

  2. Copilot 編集 (⇧⌘I (Windows Ctrl+Shift+I、Linux Ctrl+Shift+Alt+I))、チャットビュー (⌃⌘I (Windows、Linux Ctrl+Alt+I))、またはエディターのインラインチャット (⌘I (Windows、Linux Ctrl+I)) を開きます

  3. このコードのテストを生成します。エッジケースのテストも追加してください。などのプロンプトを入力して、テストを生成します。

     プロンプトに #file と入力して、プロンプトに追加のコンテキストを追加します。たとえば、このコードのテストを生成します #file:calculator.js

     ヒント

     単体テストの生成、モックオブジェクト、または GitHub Copilot ドキュメントのエンドツーエンドテストのプロンプトの例をさらに取得します。

Copilot は、アプリケーションコードのテストケースコードを生成します。すでにテストファイルがある場合、Copilot はそこにテストを追加するか、必要に応じて新しいファイルを作成します。Copilot にさらにプロンプトを提供することで、生成されたテストをさらにカスタマイズできます。たとえば、別のテストフレームワークを使用するように Copilot に依頼できます。

VS Code での Copilot の使用の詳細をご覧ください。

テストの実行とデバッグ

プロジェクト内のテストの検出後、テストを実行およびデバッグし、VS Code 内から直接テスト結果を表示できます。

テストエクスプローラーで、セクションヘッダーのコントロールを使用して、すべてのテストを実行またはデバッグします。特定のノードで実行/デバッグアイコンを選択して、ツリービューで特定のテストを実行またはデバッグすることもできます。

エディターでテストコードを表示しているときに、エディターガターの再生コントロールを使用して、その位置でテストを実行します。

ガターコントロールを右クリックして、テストのデバッグなどの他のアクションを表示します。

1 つ以上のテストを実行すると、エディターガターとテストエクスプローラーのツリービューに、対応するテストステータス (合格/不合格) が表示されます。テストが失敗すると、テストエラーメッセージがエディターにオーバーレイとして表示されることに注意してください。

テストエクスプローラーの [出力を表示] ボタンを使用して、[テスト結果] パネルでテスト出力を表示します。

テストカバレッジ

テストカバレッジは、コードのどの程度がテストでカバーされているかの測定値です。テストされていないコードの領域を特定するのに役立ちます。VS Code は、対応するテスト拡張機能がテストカバレッジをサポートしている場合、カバレッジ付きのテストの実行とカバレッジ結果の表示をサポートしています。

カバレッジ付きでテストを実行できます。テストの実行とデバッグと同じように実行できます。テストエクスプローラービュー、エディターガター、またはコマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) の対応するアクションを使用します。

カバレッジ付きでテストを実行した後、さまざまな場所でカバレッジ結果を表示できます

• テストカバレッジビューで

  ツリービューには、テストとそのカバレッジ率が表示されます。カラーインジケーターは、カバレッジ率に関する視覚的な手がかりも提供します。各行にカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。

  

• エディターでオーバーレイとして

  テストカバレッジのあるコードファイルの場合、エディターはガターにカラーオーバーレイを表示して、どの行がテストでカバーされているかを示します。ガターにカーソルを合わせると、カバーされた行の場合、行が実行された回数を示すインジケーターもあることに注意してください。エディターのタイトルバーで [インラインカバレッジを表示] ボタンを選択するか、[テスト: インラインカバレッジを表示] コマンド (⌘; ⇧⌘I (Windows、Linux Ctrl+; Ctrl+Shift+I)) を使用して、カバレッジオーバーレイを切り替えることもできます。

  

• エクスプローラービューで、コードファイルのカバレッジ率を表示します

  エクスプローラービューには、コードファイルのカバレッジ率が表示されます。エクスプローラーでファイルまたはノードにカーソルを合わせると、カバレッジ結果に関する詳細が表示されます。

  

• 差分エディターで

  差分エディターが開いている場合、カバレッジ結果はエディターでの表示方法と同様に、差分エディターにも表示されます。

タスク統合

VS Code のタスクは、コマンドラインを入力したり、新しいコードを作成したりすることなく、VS Code 内でスクリプトを実行し、プロセスを開始するように構成できます。VS Code では、テストを実行するデフォルトのテストタスクを定義し、オプションでテストを実行するためのキーボードショートカットを作成できます。

デフォルトのテストタスクを構成するには、[タスク: デフォルトのテストタスクを構成] コマンドを使用します。VS Code は、たとえば package.json ファイルに基づいて、テストタスクを自動的に検出しようとします。デフォルトのテストタスクを選択すると、タスクをカスタマイズするために tasks.json ファイルが開きます。

次のコードスニペットは、node --test コマンドをデフォルトのテストタスクとして指定する tasks.json ファイルを示しています。

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": [],
      "label": "npm: test",
      "detail": "node --test src/tests/**.js"
    }
  ]
}

テストタスクを実行するには、[タスク: テストタスクを実行] コマンドを使用するか、コマンドのキーボードショートカットを作成します。

タスクの使用と構成の詳細をご覧ください。

テスト構成設定

VS Code でのテストエクスペリエンスをカスタマイズするために構成できる設定が複数あります。各言語拡張機能は、その言語でのテストに固有の追加設定を提供する場合があります。構成できる一般的な設定を次に示します

すべてのテスト関連の設定は、設定エディター (⌘, (Windows、Linux Ctrl+,)) で確認できます。

次のステップ

• Python、Java、またはC# でのテスト入門

• VS Code の Copilot と AI 支援テストの詳細をご覧ください

• タスクの使用と構成の詳細をご覧ください