Vite+TypescriptのプロジェクトにVitestを導入する方法

Vitestのインストール


npm i -D vitest

vite.config.ts編集

下記ハイライト行を追加


// vite.config.ts
/// <reference types="vitest" />

import { defineConfig } from 'vite';

export default defineConfig({
...
	test: {
		globals: true,
	},
});

package.json編集

下記ハイライト行のnpm scriptsを追加


	"scripts": {
		"dev": "vite",
		"build": "tsc && vite build",
		"test": "vitest"
	},

テスト用のファイル作成

srcディレクトリにテスト用の簡単なsum関数を作成します。


// src/test.ts

export const sum = (num1: number, num2: number): number => {
    return num1 + num2;
};

テストファイルの作成


// src/sum.test.ts

import { sum } from "./sum";

// describeなしでもいけるが、これを書いて関連するtestをまとめておくとレポートが見やすくなる
describe("Calculate", () => {
    test("sum", () => {
        expect(sum(2, 3)).toBe(5);
    });
});

テストの実行

npm run testコマンドでテストを実行します。


npm run test

> sample-vite@0.0.0 test
> vitest


 DEV  v0.23.1 /Users/simmon/Desktop/sample-vite

 ✓ src/sum.test.ts (1)

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  18:55:37
  Duration  479ms (transform 252ms, setup 0ms, collect 5ms, tests 2ms)


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

参考