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

2025-08-07

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

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

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

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

Mocha (mochajs.org)
ジャスミン (Jasmine.github.io)
テープ (github.com/substack/tape)
Jest (jestjs.io)

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

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 の場合、手順は似ています。

ソリューションエクスプローラーで React プロジェクトを右クリックし、[プロジェクトファイルの編集]選択します。
.esproj ファイルに次のプロパティが存在し、値が表示されていることを確認します。
```
<PropertyGroup>
  <JavaScriptTestRoot>src\</JavaScriptTestRoot>
  <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>
</PropertyGroup> 
```
この例では、Vitest をテストフレームワークとして指定します。代わりに、Mocha、Tape、Jasmine、または Jest を指定できます。

JavaScriptTestRoot 要素は、単体テストがプロジェクトルートの src フォルダー内にあることを指定します。また、テスト フォルダーを指定することも一般的です。
ソリューションエクスプローラーで、npm ノードを右クリックし、[ 新しい npm パッケージインストール] を選択します。

npm パッケージのインストールダイアログを使用して、次の npm パッケージをインストールします。
- vitest
このパッケージは、依存関係の 下のpackage.json ファイルに追加されます。

注

jest を使用している場合は、jest-editor-support npm パッケージと jest パッケージが必要です。
package.jsonで、test セクションの末尾に scripts セクションを追加します。
```
"scripts": {
   ...
   "test": "vitest"
},
```
ソリューションエクスプローラーで src フォルダーを右クリックし、[新しい項目追加] を選択し、App.test.tsxという名前新しいファイルを追加します。

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

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

import { describe, it, expect } from 'vitest';

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

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

注

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

Von Bedeutung

[出力] ウィンドウの [テスト ] からの出力でテスト検出中に ReadOnlySpan エラーが表示される場合は、既知の MSBuild の問題に対してこの回避策を使用します。 Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform フォルダーを開き、System.Memory.dll の名前を別の名前に変更します。この修正により、テスト検出が有効になります。

テストの実行 (.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 単体テストの追加が含まれています。

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

プロジェクトの例については、「既存の ASP.NET Core アプリに TypeScript を追加するを参照してください。単体テストのサポートについては、標準の ASP.NET Core プロジェクトテンプレートから開始することをお勧めします。
ソリューションエクスプローラー (右側のウィンドウ) で、ASP.NET Core プロジェクトノードを右クリックし、[ソリューションの NuGet パッケージの管理] 選択。
[参照] タブで、次のパッケージを検索し、それぞれをインストールします。
- Microsoft.TypeScript.MSBuild
- Npm
NuGet パッケージを使用して、npm TypeScript パッケージの代わりに TypeScript のサポートを追加します。
ソリューションエクスプローラーで、プロジェクトノードを右クリックし、[プロジェクトファイルの編集]選択します。

Visual Studio で .csproj ファイルが開きます。
要素の PropertyGroup ファイルに次の要素を追加します。

この例では、テストフレームワークとして Jest または Mocha を指定します。代わりにテープまたはジャスミンを指定できます。
- Jest
- Mocha
JavaScriptTestRoot 要素は、単体テストがプロジェクトルートの テスト フォルダーに含まれることを指定します。
```
<PropertyGroup>
   ...
   <JavaScriptTestRoot>tests\</JavaScriptTestRoot>
   <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
   <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>
```
JavaScriptTestRoot 要素は、単体テストの場所を指定します。 Mocha の構成を簡略化するために、この例では、テストルートを出力フォルダー wwwroot\js\tests\ にポイントします。
```
<PropertyGroup>
   ...
   <JavaScriptTestRoot>wwwroot\js\tests\</JavaScriptTestRoot>
   <JavaScriptTestFramework>Mocha</JavaScriptTestFramework>
   <GenerateProgramFile>false</GenerateProgramFile>
</PropertyGroup>
```
ソリューションエクスプローラーで、ASP.NET Core プロジェクトノードを右クリックし、[新しい項目の追加] 選択します。 TypeScript JSON 構成ファイルを選択し、その後、で [の追加] を選択します。

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

Visual Studio によって、tsconfig.json ファイルがプロジェクトルートに追加されます。このファイルを使用して、TypeScript コンパイラのオプションを構成できます。
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 を追加する」を参照してください。
```
{
  "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 を追加する」を参照してください。
ソリューションエクスプローラーでプロジェクトを右クリックし、[追加]>[新しいアイテム] を選択します (または Ctrl + SHIFT + A キーを押します)。検索ボックスを使用して npm ファイルを検索し、npm 構成ファイルを選択し、既定の名前を使用して、[の追加] クリックします。

package.json ファイルがプロジェクトルートに追加されます。
ソリューションエクスプローラーで、[依存関係] の下にある 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"
```
- モカ
- 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"
```
package.jsonで、test セクションの末尾に scripts セクションを追加します。
- Jest
- Mocha
```
"scripts": {
   ...
   "test": "jest"
},
```
```
"scripts": {
   ...
   "test": "mocha"
},
```
ソリューションエクスプローラーで、テストフォルダーを右クリックし、[新しい項目追加]選択し、App.test.tsxという名前新しいファイルを追加します。

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

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

Jest
Mocha

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

var assert = require('assert');

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

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

注

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

Von Bedeutung

[出力] ウィンドウの [テスト ] からの出力でテスト検出中に ReadOnlySpan エラーが表示される場合は、既知の MSBuild の問題に対してこの回避策を使用します。 Program Files\Microsoft Visual Studio\2022\<version>\Common7\IDE\Extensions\TestPlatform フォルダーを開き、System.Memory.dll の名前を別の名前に変更します。この修正により、テスト検出が有効になります。

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

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

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

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

注

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

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

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_tests と run_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 つの要素をプロパティグループに追加します。

Von Bedeutung

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

<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 の場合は、テストエクスプローラーで単体テストを見つけることができないため、outfileまたはオプションを使用しないでください。

テストの実行 (Node.js)

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

Visual Studio でテストを実行する

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

注

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

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

次のコマンド使用して、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 が見つからないことを示すエラーが表示された場合は、通常のコマンドプロンプトではなく、開発者コマンドプロンプトを開いていることを確認してください。