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

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

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

• Mocha (mochajs.org)
• ジャスミン (Jasmine.github.io)
• Tape (github.com/substack/tape)
• Jest (jestjs.io)
• Vitest (vitest.dev)

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

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

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

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

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

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

単体テストを追加する (.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 によってテストが検出されて表示されます。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。

   

   手記

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

テストの実行 (.esproj)

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

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

一部の単体テスト フレームワークでは、通常、生成された 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. [参照] タブで、次のパッケージを検索し、それぞれをインストールします。

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

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

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

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

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

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

   Jest

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

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

   フォルダー スクリプトは、アプリの 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"
     ]
   }
   

   フォルダー スクリプトは、アプリの 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
   • jest-editor-support
   • @types/jest

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

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

   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. ソリューション エクスプローラーで、テスト フォルダーを右クリックし、[新しい項目追加]選択し、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 でテストを検出して表示します。 テストが最初に表示されない場合は、プロジェクトをリビルドして一覧を更新します。 次の図は、Jest の例と、2 つの異なる単体テスト ファイルを示しています。

    

    手記

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

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

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

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

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

手記

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

手記

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