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

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

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\18\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

vstest.console .\MyProj.esproj /TestAdapterPath:"C:\Program Files\Microsoft Visual Studio\2022\Enterprise\Common7\IDE\Extensions\Microsoft\JavaScript"

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

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

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

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

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

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

   • 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 を開き、既定のコードを次のコードに置き換えます。

   • Jest
   • Mocha

   {
     "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
   • Mocha

   • 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で、test セクションの末尾に scripts セクションを追加します。

    • Jest
    • Mocha

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

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

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

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

    • Jest
    • Mocha

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

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

    

    注

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

    Von Bedeutung

    Testsからの出力がテスト検出中にReadOnlySpanエラーを表示する場合は、Visual Studioの最新リリースにアップグレードします。 それでもエラーが発生する場合は、 MSBuild の既知の問題に対して次の回避策を使用します。 Visual Studio 2022 の場合は、 Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform フォルダーを開き、 System.Memory.dll の名前を別の名前に変更します。 この修正により、テスト検出が有効になります。 この回避策は、コード カバレッジの使用と互換性がありません。

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

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

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

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