次の方法で共有


Visual Studio での JavaScript と TypeScript の単体テスト

コマンド プロンプトに切り替えることなく、より一般的な JavaScript フレームワークの一部を使用して、Visual Studio で単体テストを記述して実行できます。 Node.js プロジェクトと ASP.NET Core プロジェクトの両方がサポートされています。

サポートされているフレームワークは次のとおりです。

サポートされているフレームワークは次のとおりです。

お気に入りのフレームワークがサポートされていない場合は、「単体テスト フレームワーク のサポートを追加する」を参照してください。

CLI ベースのプロジェクト (.esproj) の単体テストを記述する

CLI ベースのプロジェクト Visual Studio 2022 でサポートされ、テスト エクスプローラーで動作します。 Vitest は React プロジェクトと Vue プロジェクト (以前は Jest) 用の組み込みのテスト フレームワークであり、Karma と Jasmine は Angular プロジェクトに使用されます。 既定では、各フレームワークによって提供される既定のテストと、作成した追加のテストを実行できます。 テスト エクスプローラーで [ 実行] ボタンをクリックするだけです。 まだテスト エクスプローラーを開いていない場合は、メニュー バーの [テストテスト エクスプローラー] 選択すると、テスト エクスプローラーを見つけることができます。

コマンド ラインから単体テストを実行するには、ソリューション エクスプローラーでプロジェクトを右クリック ターミナルで開く] を選択し、テストの種類に固有のコマンドを実行します。

単体テストの設定については、次を参照してください。

ここでは簡単な例も示します。 ただし、完全な情報については、上記のリンクを使用してください。

単体テストを追加する (.esproj)

次の例は、Visual Studio 2022 バージョン 17.12 以降で提供されている TypeScript React プロジェクト テンプレートに基づいています。これは、スタンドアロン TypeScript React Project テンプレートです。 Vue と Angular の場合、手順は似ています。

  1. ソリューション エクスプローラーで React プロジェクトを右クリックし、[プロジェクト ファイルの編集]選択します。

  2. .esproj ファイルに次のプロパティが存在し、値が表示されていることを確認します。

    <PropertyGroup>
      <JavaScriptTestRoot>src\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
    </PropertyGroup> 
    

    この例では、Vitest をテスト フレームワークとして指定します。 代わりに、Mocha、Tape、Jasmine、または Jest を指定できます。

    JavaScriptTestRoot 要素は、単体テストがプロジェクト ルートの src フォルダー内にあることを指定します。 また、テスト フォルダーを指定することも一般的です。

  3. ソリューション エクスプローラーで、npm ノードを右クリックし、[ 新しい npm パッケージインストール] を選択します。

    npm パッケージのインストール ダイアログを使用して、次の npm パッケージをインストールします。

    • vitest

    このパッケージは、依存関係の下の package.json ファイルに追加されます。

    手記

    jest を使用している場合は、jest-editor-support npm パッケージと jest パッケージが必要です。

  4. package.jsonで、scripts セクションの末尾に test セクションを追加します。

    "scripts": {
       ...
       "test": "vitest"
    },
    
  5. ソリューション エクスプローラーで src フォルダーを右クリックし、[新しい項目追加] を選択し、App.test.tsxという名前 新しいファイルを追加します。

    これにより、src フォルダーの下に新しいファイルが追加されます。

  6. App.test.tsxに次のコードを追加します。

    import { describe, it, expect } from 'vitest';
    
    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    
  7. テスト エクスプローラーを開き (テスト>テスト エクスプローラーのを選択) すると、Visual Studio によってテストが検出されて表示されます。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。

    テスト エクスプローラーのテスト検出 (.esproj) のスクリーンショット。

    手記

    TypeScript の場合、テスト エクスプローラーで単体テストを見つけることができないため、tsconfig.jsonoutfile オプションを使用しないでください。 outdir オプションを使用できますが、package.jsontsconfig.json などの構成ファイルがプロジェクト ルートにあることを確認します。

テストの実行 (.esproj)

テスト エクスプローラーで [すべての の実行] リンク クリックして、テストを実行できます。 または、1つ以上のテストまたはグループを選択し、右クリックして、ショートカットメニューから[実行]を選択してテストを開始することもできます。 テストはバックグラウンドで実行され、テスト エクスプローラーによって自動的に更新され、結果が表示されます。 さらに、右クリックし、[デバッグ] を選択して、選択したテストをデバッグすることもできます。

次の図は、2 つ目の単体テストが追加された例を示しています。

テスト エクスプローラーの結果 (.esproj) のスクリーンショット。

一部の単体テスト フレームワークでは、通常、生成された JavaScript コードに対して単体テストが実行されます。

手記

ほとんどの TypeScript シナリオでは、TypeScript コードでブレークポイントを設定し、テスト エクスプローラーでテストを右クリックし、[デバッグ]選択することで、単体テストをデバッグできます。 ソース マップを使用する一部のシナリオなど、より複雑なシナリオでは、TypeScript コードでブレークポイントに到達するのが難しい場合があります。 回避策として、debugger キーワードを使用してみてください。

手記

プロファイリング テストとコード カバレッジは現在サポートされていません。

ASP.NET Core の単体テストを記述する

ASP.NET Core プロジェクトで JavaScript と TypeScript の単体テストのサポートを追加するには、必要な NuGet パッケージを含めることで、TypeScript、Npm、単体テストのサポートをプロジェクトに追加する必要があります。

単体テストの追加 (ASP.NET Core)

次の例は、ASP.NET Core Model-View-Controller プロジェクト テンプレートに基づいており、Jest または Mocha 単体テストの追加が含まれています。

  1. ASP.NET Core Model-View-Controller プロジェクトを作成します。

    プロジェクトの例については、「既存の ASP.NET Core アプリに TypeScript を追加する を参照してください。 単体テストのサポートについては、標準の ASP.NET Core プロジェクト テンプレートから開始することをお勧めします。

  2. ソリューション エクスプローラー (右側のウィンドウ) で、ASP.NET Core プロジェクト ノードを右クリックし、[ソリューションの NuGet パッケージの管理] 選択

  3. [参照] タブで、次のパッケージを検索し、それぞれをインストールします。

    NuGet パッケージを使用して、npm TypeScript パッケージの代わりに TypeScript のサポートを追加します。

  4. ソリューション エクスプローラーで、プロジェクト ノードを右クリックし、[プロジェクト ファイルの編集]選択します。

    Visual Studio で .csproj ファイルが開きます。

  5. PropertyGroup 要素の .csproj ファイルに次の要素を追加します。

    この例では、テスト フレームワークとして Jest または Mocha を指定します。 代わりにテープまたはジャスミンを指定できます。

    JavaScriptTestRoot 要素は、単体テストがプロジェクト ルートの テスト フォルダーに含まれることを指定します。

    <PropertyGroup>
       ...
       <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
       <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
       <GenerateProgramFile>false</GenerateProgramFile>
    </PropertyGroup>
    
  6. ソリューション エクスプローラーで、ASP.NET Core プロジェクト ノードを右クリックし、[新しい項目の追加] 選択します。 TypeScript JSON 構成ファイルを選択し、その後、で [の追加] を選択します。

    すべての項目テンプレートが表示されない場合は、[すべてのテンプレートの表示]選択し、項目テンプレートを選択します。

    Visual Studio によって、tsconfig.json ファイルがプロジェクト ルートに追加されます。 このファイルを使用して、TypeScript コンパイラのオプションを構成することができます。

  7. tsconfig.json を開き、既定のコードを次のコードに置き換えます。

    {
      "compileOnSave": true,
      "compilerOptions": {
         "noImplicitAny": false,
         "noEmitOnError": true,
         "removeComments": false,
         "sourceMap": true,
         "target": "es5",
         "outDir": "wwwroot/js"
      },
      "include": [
        "scripts/**/*"
      ],
      "exclude": [
       "node_modules",
       "tests"
      ]
    }
    

    Jest の場合、TypeScript テストを JavaScript にコンパイルする場合は、exclude セクションから tests フォルダーを削除します。

    フォルダー スクリプトは、アプリの TypeScript コードを配置できる場所です。 コードを追加するプロジェクトの例については、「既存の ASP.NET Core アプリに TypeScript を追加する」を参照してください。

  8. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加]>[新しいアイテム] を選択します (または Ctrl + SHIFT + A キーを押します)。 検索ボックスを使用して npm ファイルを検索し、npm 構成ファイルを選択し、既定の名前を使用して、[の追加] クリックします。

    package.json ファイルがプロジェクト ルートに追加されます。

  9. ソリューション エクスプローラーで、[依存関係] の下にある npm ノードを右クリックし、[新しい npm パッケージのインストール]選択します。

    手記

    一部のシナリオでは、ソリューション エクスプローラーに npm ノードが表示されない場合があります。これは、説明されている既知の問題が原因です。 npm ノードを表示する必要がある場合は、プロジェクトをアンロードし (プロジェクトを右クリックし、[プロジェクトのアンロード]選択します)、プロジェクトを再読み込みして npm ノードを再表示できます。 または、プロジェクトをビルドして、パッケージ エントリを package.json に追加してインストールすることもできます。

    npm パッケージのインストール ダイアログを使用して、次の npm パッケージをインストールします。

    • jest
    • jest-editor-support
    • @types/jest

    これらのパッケージは、devDependencies の package.json ファイルに追加されます。

     "@types/jest": "^29.5.8",
     "jest": "^29.7.0",
     "jest-editor-support": "^31.1.2"
    
  10. package.jsonで、scripts セクションの末尾に test セクションを追加します。

    "scripts": {
       ...
       "test": "jest"
    },
    
  11. ソリューション エクスプローラーで、テスト フォルダーを右クリックし、[新しい項目追加]選択し、App.test.tsxという名前 新しいファイルを追加します。

    これにより、test フォルダーの下に新しいファイルが追加されます。

  12. App.test.tsxに次のコードを追加します。

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    
  13. テスト エクスプローラーを開き (Windowsテスト エクスプローラーテスト 選択) し、Visual Studio でテストを検出して表示します。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。 次の図は、Jest の例と、2 つの異なる単体テスト ファイルを示しています。

    テスト エクスプローラーのテスト検出 (ASP.NET Core) のスクリーンショット。

    手記

    TypeScript の場合、テスト エクスプローラーで単体テストを見つけることができないため、tsconfig.jsonoutfile オプションを使用しないでください。 outdir オプションを使用できますが、package.jsontsconfig.json などの構成ファイルがプロジェクト ルートにあることを確認します。

テストの実行 (ASP.NET Core)

テスト エクスプローラーで [すべての の実行] リンク クリックして、テストを実行できます。 または、1つ以上のテストまたはグループを選択し、右クリックして、ショートカット メニューから [実行] を選択することでテストを実行できます。 テストはバックグラウンドで実行され、テスト エクスプローラーによって自動的に更新され、結果が表示されます。 さらに、右クリックし、[デバッグ] を選択して、選択したテストをデバッグすることもできます。

次の図は、Jest の例を示しています。2 つ目の単体テストが追加されています。

テスト エクスプローラーの結果のスクリーンショット (ASP.NET Core)。

一部の単体テスト フレームワークでは、通常、生成された JavaScript コードに対して単体テストが実行されます。

手記

ほとんどの TypeScript シナリオでは、TypeScript コードでブレークポイントを設定し、テスト エクスプローラーでテストを右クリックし、[デバッグ]選択することで、単体テストをデバッグできます。 ソース マップを使用する一部のシナリオなど、より複雑なシナリオでは、TypeScript コードでブレークポイントに到達するのが難しい場合があります。 回避策として、debugger キーワードを使用してみてください。

手記

プロファイリング テストとコード カバレッジは現在サポートされていません。

単体テスト フレームワークのサポートを追加する

JavaScript を使用して検出および実行ロジックを実装することで、追加のテスト フレームワークのサポートを追加できます。

手記

ASP.NET Core の場合は、Microsoft.JavaScript.UnitTest NuGet パッケージをプロジェクトに追加して、サポートを追加します。

これを行うには、次の下にあるテスト フレームワークの名前を持つフォルダーを追加します。

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks

ASP.NET Core プロジェクトに NodeJsTools フォルダーが表示されない場合は、Visual Studio インストーラーを使用して Node.js 開発ワークロードを追加します。 このワークロードには、JavaScript と TypeScript の単体テストのサポートが含まれています。

このフォルダーには、次の 2 つの関数をエクスポートする同じ名前の JavaScript ファイルが含まれている必要があります。

  • find_tests
  • run_tests

find_testsrun_tests の実装の良い例については、次の Mocha 単体テスト フレームワークの実装を参照してください。

<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter\TestFrameworks\mocha\mocha.js

使用可能なテスト フレームワークの検出は、Visual Studio の開始時に行われます。 Visual Studio の実行中にフレームワークが追加された場合は、Visual Studio を再起動してフレームワークを検出します。 ただし、実装を変更するときに再起動する必要はありません。

.NET Framework での単体テスト

Node.js と ASP.NET Core プロジェクトでのみ単体テストを記述する必要はありません。 任意の C# または Visual Basic プロジェクトに TestFramework プロパティと TestRoot プロパティを追加すると、それらのテストが列挙され、テスト エクスプローラー ウィンドウを使用して実行できます。

これを有効にするには、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[プロジェクトアンロード] を選択し、[プロジェクト編集] を選択します。 次に、プロジェクト ファイルで、次の 2 つの要素をプロパティ グループに追加します。

重要

要素を追加するプロパティ グループに条件が指定していないことを確認します。 これにより、予期しない動作が発生する可能性があります。

<PropertyGroup>
    <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Tape</JavaScriptTestFramework>
</PropertyGroup>

次に、指定したテスト ルート フォルダーにテストを追加すると、テスト エクスプローラー ウィンドウでテストを実行できるようになります。 最初に表示されない場合は、プロジェクトのリビルドが必要になる場合があります。

単体テスト .NET Core と .NET Standard

.NET Framework で説明した前述のプロパティに加えて、Microsoft.JavaScript.UnitTest NuGet パッケージをインストールし、プロパティを設定する必要もあります。

<PropertyGroup>
    <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>

一部のテスト フレームワークでは、テスト検出のために追加の npm パッケージが必要になる場合があります。 たとえば、jest には jest-editor-support npm パッケージが必要です。 必要に応じて、特定のフレームワークのドキュメントを確認してください。

Node.js プロジェクトで単体テストを記述する (.njsproj)

Node.js プロジェクトの場合は、単体テストをプロジェクトに追加する前に、使用する予定のフレームワークがプロジェクトにローカルにインストールされていることを確認します。 これは、npm パッケージのインストール ウィンドウを使用して簡単に行うことができます。

単体テストをプロジェクトに追加するには、プロジェクト内に テスト フォルダーを作成し、プロジェクト プロパティのテスト ルートとして設定することをお勧めします。 また、使用するテスト フレームワークを選択する必要もあります。

テスト ルートとテスト フレームワークの設定のスクリーンショット。

プロジェクトに単純な空白のテストを追加するには、[新しい項目の追加] ダイアログ ボックスを使用します。 JavaScript と TypeScript の両方が同じプロジェクトでサポートされています。

新しい単体テストを追加する方法のスクリーンショット。

Mocha 単体テストの場合は、次のコードを使用します。

var assert = require('assert');

describe('Test Suite 1', function() {
    it('Test 1', function() {
        assert.ok(true, "This shouldn't fail");
    })

    it('Test 2', function() {
        assert.ok(1 === 1, "This shouldn't fail");
        assert.ok(false, "This should fail");
    })
})

プロジェクトのプロパティで単体テスト オプションを設定していない場合は、プロパティ ウィンドウの Test Framework プロパティが、単体テスト ファイルの正しいテスト フレームワークに設定されていることを確認する必要があります。 これは、単体テスト ファイル テンプレートによって自動的に行われます。

Test Framework を選択するスクリーンショット。

手記

単体テスト オプションは、個々のファイルの設定よりも優先されます。

テスト エクスプローラーを開いた後 (Windowsテスト エクスプローラーテスト 選択)、Visual Studio によってテストが検出され、表示されます。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。

テスト エクスプローラーのスクリーンショット。

手記

TypeScript の場合、テスト エクスプローラーで単体テストを見つけることができないため、tsconfig.jsonoutdir または outfile オプションを使用しないでください。

テストの実行 (Node.js)

Visual Studio またはコマンド ラインからテストを実行できます。

Visual Studio でテストを実行する

テスト エクスプローラーで [すべての の実行] リンク クリックして、テストを実行できます。 または、1つ以上のテストまたはグループを選択して右クリックし、ショートカットメニューから[の実行]を選択することでテストを実行することもできます。 テストはバックグラウンドで実行され、テスト エクスプローラーによって自動的に更新され、結果が表示されます。 さらに、右クリックし、[デバッグ] を選択して、選択したテストをデバッグすることもできます。

TypeScript の場合、生成された JavaScript コードに対して単体テストが実行されます。

手記

ほとんどの TypeScript シナリオでは、TypeScript コードでブレークポイントを設定し、テスト エクスプローラーでテストを右クリックし、[デバッグ]選択することで、単体テストをデバッグできます。 ソース マップを使用する一部のシナリオなど、より複雑なシナリオでは、TypeScript コードでブレークポイントに到達するのが難しい場合があります。 回避策として、debugger キーワードを使用してみてください。

手記

現在、プロファイリング テストやコード カバレッジはサポートされていません。

コマンド ラインからテストを実行する

次のコマンド 使用して、Visual Studio の開発者コマンド プロンプトからテストを実行できます。

vstest.console.exe <path to project file>\NodejsConsoleApp23.njsproj /TestAdapterPath:<VisualStudioFolder>\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter

このコマンドは、次のような出力を示します。

Microsoft (R) Test Execution Command Line Tool Version 15.5.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Processing: NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 1::mocha
  Creating TestCase:NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js::Test Suite 1 Test 2::mocha
Processing finished for framework of Mocha
Passed   Test Suite 1 Test 1
Standard Output Messages:
 Using default Mocha settings
 1..2
 ok 1 Test Suite 1 Test 1

Failed   Test Suite 1 Test 2
Standard Output Messages:
 not ok 1 Test Suite 1 Test 2
   AssertionError [ERR_ASSERTION]: This should fail
       at Context.<anonymous> (NodejsConsoleApp23\NodejsConsoleApp23\UnitTest1.js:10:16)

Total tests: 2. Passed: 1. Failed: 1. Skipped: 0.
Test Run Failed.
Test execution time: 1.5731 Seconds

手記

vstest.console.exe が見つからないことを示すエラーが表示された場合は、通常のコマンド プロンプトではなく、開発者コマンド プロンプトを開いていることを確認してください。