【完全始め方ガイド】Vitestでテストの自動化を行おう！

Vitestとは？

Vitest（ヴィーテスト）は、JavaScriptやTypeScriptのコードをテストするためのフレームワークです。特に、Viteを使用したプロジェクトに適しており、高速なテスト実行と使いやすい設定が特徴です。

また、Jestとよく似た書き方ができるため、Jestを使ったことがある方はすぐに馴染めるのもメリットの一つです。

Vitestのメリット

✅ 1. テストの実行がとても速い

VitestはViteのビルド技術を活用しているため、従来のテストフレームワーク（例：Jest）よりもはるかに高速に動作します。特に、テストの変更をすぐに反映できる「ウォッチモード（–watch）」を使うと、より効率的に開発を進められます。

✅ 2. 設定がシンプルで簡単

Vitestはデフォルトでも十分に動作するため、最小限の設定で使い始めることができます。また、Viteとの相性が良いため、Viteを使っているプロジェクトでは簡単に統合できます。

✅ 3. Jestとの互換性がある

VitestはJestと似たAPIを提供しているため、Jestのテストコードをほぼそのまま移行することができます。既存のJestの知識を活かしながら、より高速なテスト環境を構築できます。

✅ 4. ホットモジュールリプレースメント（HMR）対応

ViteのHMR機能を活用し、コードを変更すると関連するテストだけが再実行されるため、開発時のストレスが軽減されます。

Vitestのインストールとセットアップ

1. Vitestをプロジェクトにインストールする

まず、プロジェクトにVitestを追加します。以下のコマンドを実行してください。

npm install vitest --save-dev

または、Yarnを使用している場合は以下のコマンドになります。

yarn add vitest --dev

2. package.jsonにテストスクリプトを追加する

package.json にテスト実行用のスクリプトを追加すると、簡単にテストを実行できるようになります。

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

この設定を行うことで、以下のコマンドでテストを実行できます。

npm run test

3. 設定ファイルを作成する（必要に応じて）

Vitestはデフォルトの設定でも動作しますが、カスタマイズしたい場合はvitest.config.ts を作成して設定を変更できます。

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true, // グローバルなテストAPIを有効にする
    environment: 'jsdom', // DOMを使う場合（Reactなどのテストに必要）
    coverage: { // カバレッジレポートの設定
      reporter: ['text', 'json', 'html']
    }
  }
});

この設定を追加することで、より柔軟にテスト環境を構築できます。

基本的なテストの書き方

1. シンプルなテスト

まずは、足し算の計算結果を確認する簡単なテストを見てみましょう。

import { describe, it, expect } from 'vitest';

describe('数学のテスト', () => {
  it('1 + 1 は 2 になる', () => {
    expect(1 + 1).toBe(2);
  });
});

このテストの構成

  • describe：関連するテストをグループ化します。（省略可能）
  • it：個別のテストケースを定義します。
  • expect：期待する結果を記述します。

このテストを実行するには、以下のコマンドを実行してください。

npm run test

また、テストの変更を自動的に反映させる「ウォッチモード」を使う場合は、以下のコマンドを実行します。

npx vitest --watch

2. 非同期処理のテスト

非同期関数のテストも簡単に行えます。例えば、次のような関数をテストしてみましょう。

import { describe, it, expect } from 'vitest';

// 非同期関数の例
const fetchData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('データ取得成功'), 1000);
  });
};

describe('非同期処理のテスト', () => {
  it('fetchData は正しい値を返す', async () => {
    const data = await fetchData();
    expect(data).toBe('データ取得成功');
  });
});

このように、async/await を使って非同期処理の結果をテストできます。

3. モックを使ったテスト

API通信などの外部依存を含む処理をテストする場合、モックを活用すると便利です。

import { vi, describe, it, expect } from 'vitest';

// fetchをモック化
global.fetch = vi.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ message: '成功' })
  })
);

describe('APIのテスト', () => {
  it('fetchが正しく動作する', async () => {
    const response = await fetch('https://api.example.com');
    const data = await response.json();

    expect(data.message).toBe('成功');
  });
});

vi.fn() を使うことで、関数をモック化し、期待するデータを返すように設定できます。これにより、外部のAPIに依存せずにテストを実行できるようになります。

まとめ

Vitestは、Viteを使用したプロジェクトと非常に相性が良いテストフレームワークです。

✅ Vitestのメリット

  1. 高速なテスト実行（Viteの仕組みを活用）
  2. 設定がシンプルで導入しやすい
  3. Jestとの互換性があり、移行しやすい
  4. ホットモジュールリプレースメント（HMR）対応で、変更を素早く反映

Jestに比べて、より軽量で高速なテスト環境を作れるため、特にViteを使っているプロジェクトには最適です。

ぜひ、Vitestを活用して、効率的なテスト環境を構築してみてください！

📌 Vitest公式サイト：https://vitest.dev/

公式ドキュメントには、より詳しい使い方や設定方法が載っているので、ぜひチェックしてみてください！ 😊

関連する記事はこちら！！

初心者向けPlaywright徹底解説！Webアプリテストの自動化を始めよう
こんにちは！今回は、テスト自動化ツール Playwright の基本について解説します。特に、「自動化って難しそう…」と思っている方に向けて、手順やポイントを一つひとつ丁寧に説明します！ Playwrightとは Playwrightの概要...
annotations-lab.com
2024.12.21
タイトルとURLをコピーしました