Vitest に触ってみる
akihisa1210ユニットテストフレームワーク Vitest に触ってみる。
akihisa1210手元の適当なプロジェクトの Jest を Vitest で置き換えてみる。
（追記）Jest からの Migration Guide があった。
Getting Started を読んで Vitest をインストールする。
インストール
npm install -D vitest
バージョン確認
$ npx vitest --version
vitest/0.5.9 linux-x64 node-v16.14.0
設定は Vite の設定ファイル vite.config.ts を読んでくれるのが売りらしい。今回は vite は使っていないので、設定ファイルが必要になったら vitest.config.ts を作ることにする。
akihisa1210テストは以下のコマンドで実行できる。自動でファイルの変更をウォッチし、テストを再実行してくれる。
npx vitest
デフォルトで test 下のファイルが実行され、以下のエラーが表示された。
ReferenceError: test is not defined
この test は Jest ではグローバルに利用できるもの。
Vitest 側の test などで置き換えると解消された。（テストコードに以下を追記）
import { test, expect } from "vitest";
続いて、以下のエラーが出るようになった。
ReferenceError: document is not defined
Jest では jsdom を使ってテストしていた箇所。
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
testEnvironmentOptions: { resources: "usable" },
collectCoverage: true,
collectCoverageFrom: ["./src/**/*.ts"],
};
テストコードの先頭に以下のコメントを付けるとエラーが解消された。
// @vitest-environment jsdom
Vitest のデフォルトのテスト環境は node だが、コメントでファイルごとにテスト環境を上書きできる。
akihisa1210続いて、以下のエラーを解消する。
ReferenceError: jest is not defined
これは jest.SpyOn() などを使っている箇所で発生しているエラー。
Vitest では jest の代わりに vi を使う。
+ import { test, expect, vi } from "vitest";
...
- const scrapeProductTitle = jest
+ const scrapeProductTitle = vi
.spyOn(AmazonScraper.prototype, "scrapeProductTitle")
.mockReturnValue("mock title");
Vitest のテストが通るようになった。
初回実行時
$ npx vitest
...
√ test/Posts.test.ts (3)
√ test/Scrapbox.test.ts (1)
√ test/bibInfo/amazonScraper.test.ts (10)
√ test/bibInfo/bibInfoFactory.test.ts (2)
√ test/site/amazon.test.ts (3)
Test Files 5 passed (5)
Tests 19 passed (19)
Time 2.91s (in thread 188ms, 1552.73%)
ファイル更新時
Re-running tests... [ test/Posts.test.ts ]
√ test/Posts.test.ts (3)
Test Files 5 passed (5)
Tests 19 passed (19)
Time 151ms
カバレッジ付きでテストを実行してみる。
c8 が必要とのことなのでインストールする。
$ npx vitest --coverage
MISSING DEP Can not find dependency 'c8'
✔ Do you want to install c8? … yes
初回実行時
$ npx vitest --coverage
...
√ test/Posts.test.ts (3)
√ test/Scrapbox.test.ts (1)
√ test/bibInfo/amazonScraper.test.ts (10)
√ test/bibInfo/bibInfoFactory.test.ts (2)
√ test/site/amazon.test.ts (3)
Test Files 5 passed (5)
Tests 19 passed (19)
Time 3.77s (in thread 202ms, 1867.44%)
ファイル更新時
√ test/Posts.test.ts (3)
Test Files 5 passed (5)
Tests 19 passed (19)
Time 201ms
他のテストフレームワークとの比較。現時点では Jest、Cypress、Web Test Runner、uvu との比較が掲載されている。
Jest との比較で推されているポイントは、設定ファイルを統合できることや、Hot Module Reload による高速なウォッチモード。
Cypress に対しては、ブラウザベースのロジックは Cypress で、それ以外のロジックは Vitest でという使い分けが提案されている。Cypress 側は E2E テストだけでなく、コンポーネントテストにも使える（Cypress のコンポーネントテストランナーは良いらしい）。