Vitest
https://vitest.dev/logo-shadow.svg
https://vitest.dev/
概要
Vue や Vite の作者（Evan You）によって開発された超高速な テストフレームワーク
Vite を使用して開発されているプロジェクトに最適化されている
e.g. プロジェクトと同じ設定下でテストを実行できるなど
https://vitest.dev/guide/features.html
Jest との互換性を考慮して設計されているので移行も楽
https://vitest.dev/guide/migration.html#migrating-from-jest
JavaScript でも TypeScript でも利用可能
インストール
https://vitest.dev/guide/
code:sh
$ npm install --save-dev vitest
package.json の scripts に以下を追加
code:package.json
{
...
"scripts": {
"test": "vitest",
},
...
}
デフォルトだと describe や expect などの関数を import する必要がある
これらをグローバルで利用するには以下の設定が必要
https://vitest.dev/config/#globals
1. vite.config.ts の修正
defineConfig を vite/config から import する
test.globals を true にする
code:vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: react(),
test: {
globals: true,
},
});
2. tsconfig.json の修正
compilerOptions.types に vitest/globals を 追加する
code:tsconfig.json
{
"compilerOptions": {
...
"types": "vitest/globals",
}
}
スナップショットテスト
https://vitest.dev/guide/snapshot.html#snapshot
toMatchSnapshot というアサーションを用いる
https://vitest.dev/api/expect.html#tomatchsnapshot
code:tsx
it("matches snapshot", () => {
render(<CarouselSlide />);
expect(screen.getByRole("figure")).toMatchSnapshot();
});
テストを実行すると、src/__snapshots__ を作成しその中に スナップショット ファイルを保存する
code:tsx
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[CarouselSlide > matches snapshot 1] = `
.c0 {
object-fit: cover;
width: 100%;
height: 500px;
}
<figure>
<img
class="c0"
/>
<figcaption
data-testid="caption"
<strong />
</figcaption>
</figure>
`;
その後テストが失敗すると、差分が表示される
code:sh
FAIL src/CarouselSlide.test.tsx > CarouselSlide > matches snapshot
Error: Snapshot CarouselSlide > matches snapshot 1 mismatched
- Expected
+ Received
@@ -1,8 +1,8 @@
.c0 {
object-fit: cover;
- width: 100%;
+ width: 90%;
height: 500px;
}
<figure>
<img
変更が意図的である場合、-u（--update）フラグを付けてテストを再実行するか、テスト終了後に u を押下すると、スナップショットファイルを更新できる
https://vitest.dev/guide/snapshot.html#updating-snapshots
code:sh
$ npm run test -- -u
モック
Jest 同様、モックを作成する様々な関数が提供されている
vi.fn: https://vitest.dev/api/vi.html#vi-fn
関数の スパイ を作成する
スパイ
関数が呼び出されるたびに、呼び出し引数、戻り値、インスタンスが保存される
関数を渡して振る舞いを操作することも可能
関数が与えられていない場合、呼び出されると undefined を返す
mockReset: https://vitest.dev/api/mock.html#mockreset
vi.fn などで作成したスパイを初期化する
beforeEach などで各テストの前に実行されることが望ましい
設定から自動で呼び出せるようにすることも可能
https://vitest.dev/config/#mockreset
toHaveBeenCalledWith: https://vitest.dev/api/expect.html#tohavebeencalledwith
関数が指定された引数で呼び出された場合に成功し、それ以外の場合は失敗する
vi.fn などで作成した スパイに対してのみ動作する
vi.useFakeTimers: https://vitest.dev/api/vi.html#vi-usefaketimers
setTimeout や setInterval などのタイマーを生成する関数をモックする
vi.advanceTimersByTime: https://vitest.dev/api/vi.html#vi-advancetimersbytime
時間の経過をシミュレートする
引数はミリ秒単位で受け取る