Visual Studio で JavaScript と TypeScript の単体テストを実行する

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

次のフレームワークがサポートされます。

• Mocha (mochajs.org)
• Jasmine (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)

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

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

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

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

• Jest を使用した React のテスト
• Angular テスト
• Vue.js のテスト

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

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

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

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

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

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

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

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

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

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

   • jest
   • jest-editor-support

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

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

   "scripts": {
      ...
      "test": "jest"
   },
   

5. ソリューション エクスプローラーで、src フォルダーを右クリックし、[追加]>[新しいアイテム] を選択した後、App.test.tsx という名前の新しいファイルを追加します。

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

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

   describe('testAsuite', () => {
      it('testA1', async () => {
         expect(2).toBe(2);
      });
   });
   

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

   

   Note

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

テストを実行する (.esproj)

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

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

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

Note

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

Note

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

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. [参照] タブで、以下のパッケージを検索し、それぞれをインストールします。

   • Microsoft.TypeScript.MSBuild
   • Npm
   • Microsoft.JavaScript.UnitTest

   npm TypeScript パッケージではなく、TypeScript サポートを追加するには、NuGet パッケージを使用します。

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

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

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

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

   Jest

   JavaScriptTestRoot 要素によって、単体テストはプロジェクト ルートの tests フォルダーに置かれるように指定されています。

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

   Mocha

   JavaScriptTestRoot 要素は単体テストの場所を指定します。 Mocha の構成を簡略化するために、この例では、テスト ルートを出力フォルダー *wwwroot\js\tests* に指定します。

   <PropertyGroup>
      ...
      <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
      <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
      <GenerateProgramFile>false</GenerateProgramFile>
   </PropertyGroup>
   

6. ソリューション エクスプローラーで、ASP.NET Core プロジェクト ノードを右クリックして、[追加]>[新しいアイテム] を選択します。 [TypeScript JSON 構成ファイル] を選択し、[追加] を選択します。

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

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

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

   Jest

   {
     "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 フォルダーを削除します。

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

   Mocha

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

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

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

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

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

   Note

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

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

   Jest

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

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

    "@types/jest": "^29.5.8",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2"
   

   Mocha

   • mocha
   • assert
   • @types/mocha
   • @types/node

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

    "@types/mocha": "^10.0.5",
    "@types/node": "^20.9.2",
    "assert": "^2.1.0",
    "mocha": "^10.2.0"
   

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

    Jest

    "scripts": {
       ...
       "test": "jest"
    },
    

    Mocha

    "scripts": {
       ...
       "test": "mocha"
    },
    

11. ソリューション エクスプローラーで、test フォルダーを右クリックし、[追加]>[新しいアイテム] を選択した後、App.test.tsx という名前の新しいファイルを追加します。

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

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

    Jest

    describe('testAsuite', () => {
       it('testA1', async () => {
          expect(2).toBe(2);
       });
    });
    

    Mocha

    var assert = require('assert');
    
    describe('testAsuite', function () {
       it('testA1', function () {
          assert.equal(1, 1);
       })
    })
    

13. テスト エクスプローラーを開きます ([テスト]>[Windows]>[テスト エクスプローラー] の順に選択)。すると、Visual Studio によってテストが検出され、表示されます。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。 次の図は、2 つの異なる単体テスト ファイルを含む Jest の例を示しています。

    

    Note

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

テストを実行する (ASP.NET Core)

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

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

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

Note

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

Note

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