Vitestに入門しよう

はじめに

Vitestは、JavaScriptフロントエンド開発のための高速なテストフレームワークです。学んだ内容をまとめていきます。

Vitestの特徴

• HMRによるテストの高速化:
  HMR（ホットモジュール交換)を使用しているため、開発効率を上げることができます。
  HMRは、ソースコードの変更を検出し、関連するテストだけを即座に実行できるため、変更による影響をすぐに把握できます。
  開発しながら、テストも一緒に書いている場合に、とても便利ですね。

• Jestとの互換性がある:
  VitestはJestと互換性があり、Jestの影響を受けています。
  既存のプロジェクトでも採用しやすいです。

• Viteとの統合:
  Vitestは、高速なビルドツールであるViteをベースにしています。
  ViteはJavaScriptの依存関係を事前にバンドルし、実行時の処理を最小限に抑えて高速化を図っています。
  ちなみに、Viteを使っていないプロジェクトでも、Vitestは使用できます。

インストール

まずは、vitestをインストール

npm install -D vitest

インストールしたら、vite.config.tsファイルを以下のように編集する。

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
  },
});

VSCodeを使用している人は、以下の「Vitest」という拡張機能を入れれば便利です。

簡単なテストを書いてみよう

それでは、簡単なテストを書いていきます。
「sum.ts」ファイルと「sum.test.ts」ファイルを書いていきます。
Jestと同様に、[ファイル名].test.tsのようなファイル名にすれば、自動的にテストファイルとみなしてくれます。

sum.ts

export function sum(a: number, b: number) {
  return a + b;
}

sum.test.ts

import { expect, test } from "vitest";
import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

こちらをテストしてきましょう。
VSCodeのサイドバーにある「テスト」ボタンをクリックします。

すると、作成したテストケースが一覧で表示されており、テストしたい項目を選ぶことができます。

テストを実行してみましょう。
成功すると、以下のように表示されます。

コードを以下のようにして、テストが失敗するようにしてみましょう。

sum.test.ts

import { expect, test } from "vitest";
import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(5);
});

テスト実行してみましょう。
失敗すると、エラーの原因などが赤く表示されます。

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、