React × Supabase × Vercel で TODO アプリを作ってみた②～ Vitest で単体テスト編～🔍

React × Supabase × Vercel シリーズ

ある程度、独立した内容になっていますが、ご興味あればどうぞ 💁‍♂️

• ① 作ってデプロイ編
• ② Vitest で単体テスト編 ← 本記事
• ③ GitHub Actions で CI/CD 編

はじめに

Create React App (CRA) + React のテストでは Jest を使うのが主流でしたが、Vite + React のテストでは Vitest を使うのが定番のようです。

前回 Vite + React で以下の TODO アプリを作りました。

こちらのアプリを Vitest でテストしてみます ✊

手順 🧑‍🏫

1. 必要なパッケージのインストール

Vitest をインストールします。

npm install --save-dev vitest

コンポーネントのレンダリング や ユーザーインタラクション のテストをするなら以下も必要です。

npm install --save-dev @testing-library/react @testing-library/jest-dom jsdom

開発用依存 (devDependencies) としてインストールするので --save-dev オプションをつけます。

2. vitest.config.ts の設定

Vitest の設定をします。

特にカスタマイズしないなら、おまじない的に以下を書いておけば大丈夫 👌

vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
  },
});

3. テストコードを書く

例えば、TodoUtil のテストはこんな感じ 💁‍♂️

src/utils/TodoUtil.test.ts

import { describe, expect, test } from 'vitest';
import { TodoUtil } from './TodoUtil';

const todoItems = [
  { id: 1, text: 'メモリーズ', done: false },
  { id: 2, text: 'メモリーズ・カスタム', done: true },
  { id: 3, text: '三日月ロック その3', done: false },
  { id: 4, text: '夜を駆ける', done: false },
];

describe('filterTodoItems', () => {
  test('キーワードでフィルターできる', () => {
    const result = TodoUtil.filterTodoItems(todoItems, 'メモリーズ', true);
    expect(result).toEqual([
      { id: 1, text: 'メモリーズ', done: false },
      { id: 2, text: 'メモリーズ・カスタム', done: true },
    ]);
  });

  test('完了済みタスクを除外できる', () => {
    const result = TodoUtil.filterTodoItems(todoItems, '', false);
    expect(result).toEqual([
      { id: 1, text: 'メモリーズ', done: false },
      { id: 3, text: '三日月ロック その3', done: false },
      { id: 4, text: '夜を駆ける', done: false },
    ]);
  });

  test('キーワードに一致しない場合は空配列', () => {
    const result = TodoUtil.filterTodoItems(todoItems, '夜に駆ける', true);
    expect(result).toEqual([]);
  });

  test('キーワードも完了除外も指定なしなら全件返す', () => {
    const result = TodoUtil.filterTodoItems(todoItems, '', true);
    expect(result).toEqual([
      { id: 1, text: 'メモリーズ', done: false },
      { id: 2, text: 'メモリーズ・カスタム', done: true },
      { id: 3, text: '三日月ロック その3', done: false },
      { id: 4, text: '夜を駆ける', done: false },
    ]);
  });
});

ユーティリティ関数のテストなので React Testing Library (RTL) などは使っていません。

4. 実行

npx vitest run

もしくは package.json に

package.json

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

スクリプトを追加して

npm run test

実行結果

実行結果をペタリ

おわりに

Vitest はテストランナーなので、テストコードの書き方自体は Jest とそんなに変わらない印象 🤔

CI に組み込むならこんな感じで書くと良さげ？👇

- name: Run unit tests
  run: npx vitest run

GitHub Actions で CI/CD にチャレンジするときの宿題 ✍️