はじめに

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の内容を比較して、イコールであれば成功とするテストです。

/src/sample.test.ts

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

試しにテスト失敗の表示を確認してみます。以下のコードを追加して保存してください。

/src/sample.test.ts

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では一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。