はじめに
Vitestを使用して環境構築からテストの実行までやってみます。今までテストを試したこと無い方を対象として解説します。
Vitestとは
Jestの互換性があり、実行速度が速いのが特徴のテストフレームワークです。
環境構築
筆者のnode
のバージョンは以下を使用します。公式ではv14.18
以上を必須としています。
$ node -v
v18.17.1
始めにviteのプロジェクトを作成します。選択項目は以下を選択してください。
$ npm init vite@latest
✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript
プロジェクトファイルに移動して、パッケージをインストールします。
$ cd vite-project
$ npm install
vitestをインストールします。
$ npm install -D vitest
package.json
に"test": "vitest"
を追加します。この追加により、ターミナルでnpm run test
と入力することでテストができるようになります。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
- "preview": "vite preview"
+ "preview": "vite preview",
+ "test": "vitest"
},
"devDependencies": {
"typescript": "^5.0.2",
Vitestではsrc/**/*.test.{ts,js}
のような設定をしなくても、デフォルトで*.test.ts
や*.spec.ts
のファイルをテスト対象とします。
以上で環境構築は完成です。
テストしてみる
足し算のテストをしてみます。src/sample.test.ts
ファイルを作成して以下のコードを入力します。expect
の内容とtoBe
の内容を比較して、イコールであれば成功とするテストです。
import { test, expect } from 'vitest'
const add = (a: number, b: number) => {
return a + b
}
test('1 + 2 = 3', () => {
expect(add(1, 2)).toBe(3)
})
ターミナルでテストを実行してみます。以下のように PASS Waiting for file changes...
と表示されていればテスト成功です。
$ npm run test
RERUN src/sample.test.ts x7
✓ src/sample.test.ts (1)
✓ 1 + 2 = 3
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 22:24:05
Duration 8ms
PASS Waiting for file changes...
press h to show help, press q to quit
試しにテスト失敗の表示を確認してみます。以下のコードを追加して保存してください。
test('1 + 2 = 4', () => {
expect(add(1, 2)).toBe(4)
})
ターミナルを確認するとFAIL Tests failed. Watching for file changes...
と表示され、テストが失敗していることが分かります。
❯ src/sample.test.ts (2)
✓ 1 + 2 = 3
× 1 + 2 = 4
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL src/sample.test.ts > 1 + 2 = 4
AssertionError: expected 3 to be 4 // Object.is equality
- Expected
+ Received
- 4
+ 3
❯ src/sample.test.ts:12:21
10|
11| test('1 + 2 = 4', () => {
12| expect(add(1, 2)).toBe(4)
| ^
13| })
14|
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
Test Files 1 failed (1)
Tests 1 failed | 1 passed (2)
Start at 22:57:37
Duration 10ms
FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit
まとめ
Vitestで環境構築からテストの実行までやってみました。テストを導入することで不具合の早期発見や予防につながり品質向上が期待できるので、Viteのプロジェクトでテストを導入してない方はVitestの導入をおすすめします。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です!
ご興味がある方は以下リンクよりご確認ください。