MENU

vitestを導入して npx vitest するまで

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)を使用し、開発、ビルド、テスト時に共通の変換パイプラインを共有します。
同じプラグインAPIで拡張可能であり、あなたやあなたのツールのメンテナがViteとファーストクラスの統合を提供できるようにします。
Viteを最初から意識して作られたツールで、Hot Module Reload (HMR)のようなDXの改良を利用しています。これがVitestです。
Viteによって実現された非常に高速なユニットテストフレームワークです。

https://vitest.dev/guide/why.html


なるほど、、、?
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 動かすところまでしかしていませんが、もっと複雑なテスト書いてみたい。
気が向いたらやってみよう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする