jsのユニットテストを書いたことがなかったので書いてみようかと思い、
最近の流行りを調べてみるとvitest
なるものがあるらしいので、やってみる。
vitest とは
> Vitest aims to position itself as the Test Runner of choice for Vite projects, and as a solid alternative even for projects not using Vite.
Vitest は、Vite プロジェクトに最適なテスト ランナーとしての地位を確立することを目指しており、Vite を使用しないプロジェクトでも確実な代替手段となることを目指しています。
https://vitest.dev/guide/why.html
viteプロジェクトとの相性がばっちりで、viteプロジェクト以外でも良い感じに使えます、ということらしい。
A test runner that uses the same configuration of your App (through
vite.config.js
), sharing a common transformation pipeline during dev, build, and test time. That is extensible with the same plugin API that lets you and the maintainers of your tools provide first-class integration with Vite. A tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite.テストランナーは、アプリの同じ構成(vite.config.js)を使用し、開発、ビルド、テスト時に共通の変換パイプラインを共有します。
https://vitest.dev/guide/why.html
同じプラグインAPIで拡張可能であり、あなたやあなたのツールのメンテナがViteとファーストクラスの統合を提供できるようにします。
Viteを最初から意識して作られたツールで、Hot Module Reload (HMR)のようなDXの改良を利用しています。これがVitestです。
Viteによって実現された非常に高速なユニットテストフレームワークです。
なるほど、、、?vite.config.js
を使って、ユニットテストも動かせるから、テスト用に複雑な設定も必要ないし、簡単だし超高速ですよ、ということらしいです。多分。
ちょこちょこ公式docでも出てきていたjest
っていうのが、長いことフロントエンドのユニットテストフレームワークのデファクトスタンダードだったみたいだけど、
jestをviteプロジェクトで使おうとすると、jestとviteの設定を別々に良い感じに書かなければいけなくて、大変だったみたい。
vitestならその辺を良い感じにやってくれる、ということなんでしょう。
導入してみる
公式
公式のgetting startedに沿って入れてみようかな。
とりあえずviteで適用なプロジェクトを作る。
$ npm create vite@latest
✔ Project name: … test-vitest
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
Scaffolding project in /Users/waku/work/test-vitest...
Done. Now run:
cd test-vitest
npm install
npm run dev
$ cd test-vitest
$ npm i
added 47 packages, and audited 48 packages in 19s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ npm run dev
> test-vitest@0.0.0 dev
> vite
VITE v3.2.4 ready in 367 ms
➜ Local: http://localhost:5173/
vueとtypescriptを使うことにしました。
vitestを入れる
$ npm i -D vitest
added 21 packages, and audited 69 packages in 9s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
無事入りました。
テスト動かしてみる
とりあえず、npx vitest
でテスト実行できるっぽいので、動かしてみる。
$ npx vitest
DEV v0.25.2 /Users/waku/work/test-vitest
include: **/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}
exclude: **/node_modules/**, **/dist/**, **/cypress/**, **/.{idea,git,cache,output,temp}/**, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress}.config.*
watch exclude: **/node_modules/**, **/dist/**
No test files found, exiting with code 1
動いた。
includeが、おそらくテスト対象のファイルの検索条件のことで、デフォルトだと
*/.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}
となっている。
適当な場所に上記の条件を満たすファイルを置けばテストしてくれると思うので、src/example.test.ts
を作って、テスト動かしてみる。
$ npx vitest
DEV v0.25.2 /Users/waku/work/test-vitest
❯ src/example.test.ts (0)
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL src/example.test.ts [ src/example.test.ts ]
Error: No test suite found in file /***/test-vitest/src/example.test.ts
テスト対象ファイルとして認識されたっぽい。
多分テストコードがなくて怒られているので、テスト適当に書いてみる。
公式からテストコード拝借して実行してみる。
import { describe, expect, test } from 'vitest'
const person = {
isActive: true,
age: 32,
}
describe('person', () => {
test('person is defined', () => {
expect(person).toBeDefined()
})
test('is active', () => {
expect(person.isActive).toBeTruthy()
})
test('age limit', () => {
expect(person.age).toBeLessThanOrEqual(32)
})
})
いざテスト実行。
$ npx vitest
DEV v0.25.2 /Users/waku/work/test-vitest
✓ src/example.test.ts (3)
Test Files 1 passed (1)
Tests 3 passed (3)
Start at 23:47:15
Duration 844ms (transform 413ms, setup 0ms, collect 19ms, tests 3ms)
PASS Waiting for file changes...
動いた。
1つのテストファイルで3つのテストが無事通りました。と書いてあります。
わざと失敗するようにテスト書き換えてみます。
FAIL src/example.test.ts > person > age limit
AssertionError: expected 32 to be less than or equal to 31
❯ src/example.test.ts:18:24
16|
17| test('age limit', () => {
18| expect(person.age).toBeLessThanOrEqual(31)
| ^
19| })
20| })
- Expected "32"
+ Received "31"
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
Test Files 1 failed (1)
Tests 1 failed | 2 passed (3)
Start at 23:48:58
Duration 24ms
コードの変更をwatchしてくれていて、速攻テストされました…驚き。
3つ目のテストコードを書き換えて、失敗させてみましたが、
FAIL src/example.test.ts > person > age limit
AssertionError: expected 32 to be less than or equal to 31
という感じで、テスト失敗した場所と内容を出力してくれました。
へーなるほど。という感じで、とりあえずごく簡単な例ですが、ユニットテスト導入して動かせました。
感想
- 導入がめちゃ簡単。テスト書き始めるまでが相当簡単。
- watch機能がすごい。いちいちテスト再実行しなくても勝手に走らせてくれて良い。
まとめ
vitest 動かすところまでしかしていませんが、もっと複雑なテスト書いてみたい。
気が向いたらやってみよう。
コメント