Vitestについて

Vitestは、Viteを基盤とした次世代のテスティングフレームワークです。
その高速な実行速度と、Jestとの互換性により、フロントエンド開発者の間で注目を集めています。 (vitest.dev)

初学者向け

Vitestの特徴

• 高速なテスト実行: Viteの機能を活用し、迅速なテスト実行を実現します。
• Jestとの互換性: JestのAPIと互換性があり、既存のテストコードを容易に移行できます。
• ESM、TypeScript、JSXのサポート: これらのモダンな技術をネイティブにサポートしています。

インストール方法

以下のコマンドでVitestをプロジェクトに導入できます。

npm install -D vitest

次に、package.jsonに以下のスクリプトを追加します。

{
  "scripts": {
    "test": "vitest"
  }
}

簡単なテストの例

以下に、sum関数をテストする例を示します。

// sum.js
export function sum(a, b) {
  return a + b;
}

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

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

このテストは、sum関数が正しく動作することを確認します。

専門者向け

高度な機能

• ホットモジュールリプレースメント（HMR）: テストの変更をリアルタイムで検知し、関連するテストのみを再実行します。
• Viteとの統合: Viteの設定やプラグインを再利用し、開発環境とテスト環境の一貫性を保ちます。
• 拡張可能なAPI: プラグインやカスタムマッチャーを利用して、テスト機能を拡張できます。

設定ファイルの例

vite.config.tsにおけるVitestの設定例を以下に示します。

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.js',
  },
});

この設定では、グローバル変数の使用、jsdom環境の指定、そしてテスト前のセットアップファイルを定義しています。

テストの実行フロー

以下に、Vitestのテスト実行フローをMermaid.jsを用いて示します。

graph TD;
    A[テスト開始] --> B[設定ファイルの読み込み]
    B --> C[テストスイートの実行]
    C --> D{テスト結果}
    D -->|成功| E[次のテストスイート]
    D -->|失敗| F[エラーログの出力]
    E --> C
    F --> C

非同期テストの例

Vitestでは、非同期関数のテストも容易に行えます。

import { expect, test } from 'vitest';
import { fetchData } from './api';

test('fetches data successfully', async () => {
  const data = await fetchData();
  expect(data).toEqual({ id: 1, name: 'John' });
});

このテストでは、fetchData関数が期待通りのデータを返すことを確認しています。

ドキュメンテーションテスト

vite-plugin-doctestを使用すると、ドキュメント内のコードスニペットをテストとして実行できます。

/**
 * @import.meta.vitest
 * ```ts
 * expect(add(1, 2)).toBe(3);
 * ```
 */
export const add = (a: number, b: number) => a + b;

このように記述することで、ドキュメントとコードの整合性を保つことができます。 (zenn.dev)

---

以上が、Vitestに関する基本的な説明と高度な機能の紹介です。 詳細な情報や最新のアップデートについては、公式ドキュメントを参照してください。 (vitest.dev)