【React】【vitest】環境構築

はじめに

この記事は【React】プロジェクトへの【vitest】導入方法の備忘録である。

【vitest】とは

【Vite】環境で動作する高速なテストフレームワークである。

導入方法

1. インストール

以下コマンドを実行する。

npm install -D vitest

2. 【vitest】の設定

【vitest】の設定は【vite.config.ts】で行う。
既存の【vite.config.ts】ファイルの先頭に【/// <reference types=”vitest” />】を追記し【vitest 】の型への参照を追加する。
以下に設定詳細をコメントにて記述している。

// vite.config.ts
/// <reference types="vitest" />
・・・
export default defineConfig({
  ・・・
  test: {
    // テストファイル内でグローバル変数を使用できるようにする
    globals: true,
    // テスト環境の指定
    environment: 'happy-dom',
    // テスト実行前に実行するファイルの指定
    setupFiles: './vitest.setup.ts',
    // テストファイルのパターン指定
    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
  },
});

3. コンポーネントのテスト

React コンポーネントのテストを実行する。
コンポーネントのテストを行うには、いくつか追加のライブラリのインストールが必要である。

1. 【jsdom】または【happy-dom】をインストール

【jsdom】とは DOM を JavaScript で実装したものである。
Jest では【jsdom】が内包されていますが、vitest では別途インストールする必要がある。
【happy-dom 】は【jsdom】の代替として使用することができて、【jsdom】より高速に動作する。
今回は【happy-dom】を使用する。
上記で記載した【vite.config.ts】ファイルに【environment: ‘happy-dom’】の設定を忘れないこと。

npm install -D happy-dom

2. 【@testing-library/react】のインストール

Reactコンポーネントをテストするためのライブラリである。
以下コマンドを実行する。

npm install -D @testing-library/react @testing-library/jest-dom @types/jest

3. 【@testing-library/jest-dom】のセッティング

公式ドキュメントに従いながらセットアップファイルを作り、モジュールをimportしていく。

@testing-library/jest-dom公式ドキュメント

// vitest.setup.ts
import '@testing-library/jest-dom';

// vite.config.ts
/// <reference types="vitest" />
・・・
export default defineConfig({
  ・・・
  test: {
    ・・・
    // テスト実行前に実行するファイルの指定
    setupFiles: './vitest.setup.ts',
    ・・・
  },
});

4. 【@testing-library/user-event】のセッティング

UIコンポーネントの単体・結合テストを実施する時にユーザーイベントを再現するために使用する。
以下コマンドを実行する。

@testing-library/user-event公式ドキュメント

npm install -D @testing-library/user-event

5. tsconfig のエイリアスを設定

【TypeScript】での設定を【vite 】で使い回せる【vite-tsconfig-paths】というパッケージを使う。
以下コマンドを実行する。エイリアスでのパス指定が可能となる。

npm install -D vite-tsconfig-paths

// vite.config.ts
・・・
// https://vitejs.dev/config/
export default defineConfig({
  ・・・
  plugins: [react(), tsconfigPaths()],
  ・・・
});