⚗️
Visual Studio のテストエクスプローラーから Vitest のテストを実行する

2024/12/29に公開
Windows 上でのプログラム開発の話です。
(Visual Studio Code ではなく) Visual Studio で C# 等 .NET 言語の単体テストプロジェクトを開いたとき、その実装されているテストの実行は、Visual Studio の「テストエクスプローラー」というウィンドウから実行するのが一般的かと思います。
その Visual Studio のテストエクスプローラーですが、実は、JavaScript (TypeScript) のテストも実行することができます。ちょっと古いですが、下記リンク先に紹介記事があります。
https://dev.to/j_sakamoto/run-javascript-unit-tests-for-a-razor-class-library-on-visual-studio-2022-test-explorer-2n2k
上記記事は 2022 年当時に motcha を使ったテストコードを例に紹介していますが、今回は Vitest を使ったテストコードに対して同じように、Visual Studio のテストエクスプローラーからそれら JavaScript テストの実行ができるようにしてみます。
まずはしかるべき作業フォルダを用意し、その作業フォルダ内で以下のようにコマンドを実行して、Visual Studio 用の単体テストプロジェクトを作成します。
$ mkdir ./MyTest
$ cd ./Mytest
$ dotnet new nunit
$ _
上記手順ですと、カレントフォルダに "MyTest.csproj" というプロジェクトファイルが出来上がっているはずですので、これを Visual Studio で開き、さらに Visual Studio 内のエディタで編集用に開きます。そうして以下のようにプロジェクトファイルを書き換えます。
MyTest.csproj
<Project Sdk="Microsoft.NET.Sdk">
  ...
  <!-- 👇 以下の PropertyGroup を追加 -->
  <PropertyGroup>

    <!-- Visual Studio がテストコードを探すフォルダを指定 -->
    <JavaScriptTestRoot>tests\</JavaScriptTestRoot>

    <!-- テストフレームワーク,ランナーは Vitest を使用することを指定 -->
    <JavaScriptTestFramework>Vitest</JavaScriptTestFramework>

  </PropertyGroup>
  ...

  <!-- 👇 以下の ItemGroup を追加 -->
  <ItemGroup>

    <!-- node_modules フォルダ以下は Visual Studio 的には完全に無視する -->
    <None Remove="node_modules\**" />
    <Compile Remove="node_modules\**" />
    <EmbeddedResource Remove="node_modules\**" />

    <!-- Visual Studio 内での TypeScript 編集時、tsconfig.json の記載内容に従って言語サーバーが動作するようにする -->
    <None Remove="tsconfig.json" />
    <Content Include="tsconfig.json" />

  </ItemGroup>
  ...
</Project>
次は JavaScript/TypeScript 側の準備です。以下のようにして JavaSrcipt プロジェクト構成を初期化します。
$ npm init -y
$ npm install --save-dev vitest
$ tsc --init
$ _
あとは、先ほど .csproj ファイル内に指定したように tests フォルダ内にテストコードを書きます。
tests/script.test.ts
import { test, expect, describe } from 'vitest';
...
describe('test for PWA Updater script', () => {
    ...
    test('default 1st execution', async () => {
        ...
以上です。
これで、これら Vitest を使った・TypeScript で書いたテストコードが、Visual Studio のテストエクスプローラーに検出・認識され、実行できるようになります。

 し・か・し実行できるようになります... が、動作は遅いです😭
いったんテストの実行が始まるとさくっと終わるのですが、テストが起動するまでに少うし待たされます。めちゃめちゃ待たされる程ではないものの、3秒くらいかかります。素の vitest コマンドに慣れた身としてはこの 3 秒が耐えられません。

 結論Visual Studio のテストエクスプローラーへの Vitest テストの統合は、他の C# 部分のテストコードと一緒にならべて俯瞰・実行できるため、そのような C# 部分と JavaScript (TypeScript) 部分とが混在するプロジェクトは、最後の目視チェックを一気通貫で実行できるので、これはこれで便利です。まぁ、どのみち、CI/CD でテスト走るんですが。
とはいえ、絶賛開発中でコード変更とテスト実行のイテレーションを激しく行なっている最中は、素の vitest コマンドを走らせておくか (コード変更のたびに自動で瞬足でテスト再実行してくれます)、Visual Studio ではなく Visual Studuio Code とその Vitest 拡張を組み合わせて、そちらで行なうのがよいでしょう。
し・か・し

結論

Discussion
