Zenn
⚡

Vitest はどれくらい早いのか ~ Jest と比較 ~

2021/12/22に公開
Test
Vite
Vitest
tech

Vitest は Vite ベースのテスティングフレームワークです。
Vue/Vite チームの antfu 氏と、Vite チームの patak 氏が中心となって作っています。

発表されてからしばらく早期アクセスのためリポジトリ等が非公開でしたが、昨日公開されたので触ってみました。
（現在、鋭意開発中のため、まだプロダクション環境では使わないよう注意書きがあります）

インストール

Vite 2.7 と Node 14 以上の環境が必要です。
TypeScript を使用する場合でも、typescript パッケージや型定義などを追加でインストールする必要はありません。

npm install -D vitest

テスト書式

基本的なテストの書き方は Jest と同じでした。
ただし、describe などはグローバルではないので、vitest からインポートする必要があります。

add.ts
// テストする関数
export const add = (a: number, b: number): number => a + b;
add.spec.ts
import { describe, expect, it } from "vitest";
import { add } from "./add";

describe("add", () => {
  it("1 + 2 = 3", () => {
    const result = add(1, 2);

    expect(result).toBe(3);
  });
});

実行速度

上記のテストを Vitest と Jest[1] で実行した時間を比べてみました。
（結果に表示された Time の 5 回平均。Jest は s から ms に換算）

Vitest Jest
743ms 941ms

Vitest の方が 2 割程度早いですね。

watch モード

watch モードでも比較してみましょう。

Vitest Jest
0ms 114ms

コードが少ないためか Vitest が 0ms になってしまいました（何度も連続で実行していると、15 回に 1 度くらい 1ms になるのでバグではないです。CPU は i7 2.7 GHz）

別のテストも試す

上記ではコードがシンプルすぎるので、以前作成したプロジェクトのテストを追加して実行してみました。
（RGB ⇔ HLS などの変換をする関数。テストケースは 5 つ）

Vitest Jest Vitest (watch) Jest (watch)
811ms 1611ms 5ms 1326ms

通常実行では Jest の半分ですし、相変わらず watch は爆速ですね。

まとめ

"blazing fast" の謳い文句どおり、Vitest はだいぶ早いことが分かりました。テストの数が増えてくるともっと大きな差になってくるのではないかと思います。
また、TypeScript 用の設定が不要なのもよかったです。比較用の Jest をセットアップする際、typescript の他に ts-jest や @types/jest をインストールしたり、設定ファイルを書くのが手間でした。

開発が進み、プロダクションでも使えるようになる日が待ち遠しいですね。

今回使用したテストコードなどはこちらのリポジトリにあります。

脚注

  1. 1 行目の vitest からのインポートは削除した状態で実行してます。 ↩︎

Discussion