vite-plugin-vitest-cache (vCache) を導入して Vite のテストを高速化する

はじめに

Vitest の実行時間が長くなり困ることは往々にして発生します。 Vite の plugin vite-plugin-vitest-cache (vCache) を設定することで簡単にテストの実行時間の短縮を行うことができます。

vite-plugin-vitest-cache (vCache) の設定

パッケージのインストール

npm install や yarn install 等で @raegen/vite-plugin-vitest-cache を追加します。

npm install --save-dev @raegen/vite-plugin-vitest-cache

設定の追加

README に記載されている通り vitest.config.ts (vitest.config.js) 等に vite-plugin-vitest-cache (vCache) を読み込むように設定します。

import { defineConfig } from "vitest";
import vCache from '@raegen/vite-plugin-vitest-cache';

export default defineConfig({
  plugins: [vCache()],
});

もし、 vite-plugin-vitest-cache (vCache) を CI/CD 上のみで動作させたい場合は、 process.env.CI の値が設定されている場合だけ Plugin が読み込まれるように定義すれば OKです。

import { defineConfig } from "vitest";
import vCache from '@raegen/vite-plugin-vitest-cache';

export default defineConfig({
  plugins: process.env.CI
    ? [vitePluginVitestCache()]
    : [],
});

また、必要に応じて .tests を .gitignore 等に追加します

.tests

実際に動かす

https://vitest.dev/guide/ の Getting Started の Project を用意 vite-plugin-vitest-cache (vCache) を「利用した場合」「利用しなかった場合」それぞれを用意しました。

用意したテストは簡単な内容のため実行時間に大きな差は生まれていませんが、ファイル数やテスト内容しだいでは大きな効果が出る場合もあります。

利用した場合

> npm run test

> vitest@1.0.0 test
> vitest


 DEV  v2.1.6 /Users/mziyut/Workspace/github.com/mziyut/playground/tools/vitest

[vCache] 0.3.2
[vCache] built hashes in 0.11s
 ✓ sum.test.js (1)
   ✓ adds 1 + 2 to equal 3

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  00:31:25
   Duration  404ms (transform 11ms, setup 0ms, collect 21ms, tests 1ms, environment 0ms, prepare 65ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

利用しなかった場合

> npm run test

> vitest@1.0.0 test
> vitest


 DEV  v2.1.6 /Users/mziyut/Workspace/github.com/mziyut/playground/tools/vitest

 ✓ sum.test.js (1)
   ✓ adds 1 + 2 to equal 3

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  00:34:40
   Duration  197ms (transform 11ms, setup 0ms, collect 14ms, tests 1ms, environment 0ms, prepare 57ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

さいごに

README にも記載されている通り、 vite-plugin-vitest-cache (vCache) は簡単に設定できますが cache だけに頼らず定期的にテスト内容を確認するなど健全な状態を保つことを忘れないようにしたいですね。

Ref