投稿日:

ReactプロジェクにVitestを使ってみた

今回はは、かるーーくReactプロジェクトに高速で効率的なテストフレームワークであるVitestを導入する方法についてみていきたいと思います。Vitestは、Vite（高速なビルドツール）と組み合わせて使用されるモダンなJavaScriptテストフレームワークです。

なぜVitestを選ぶのか？

  1. 高速性: Viteの高速なHMR技術を活用し、迅速なテスト実行を実現します。
  2. Jest互換: JestのAPIと互換性があり、移行が容易です。
  3. ESMサポート: ネイティブのECMAScript Modulesをサポートしています。
  4. 簡単な設定: 多くの場合、ゼロコンフィグで使用開始できます。

それでは、実際にReactプロジェクトにVitestを導入する手順を見ていきましょう。

Step 1: Reactプロジェクトの作成

Viteを使用して新しいReactプロジェクトを作成します。

npm create vite@latest my-react-vitest-project -- --template react
cd my-react-vitest-project
npm install

Step 2: Vitestのインストール

次に、Vitestと関連するテストライブラリをインストールします。

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Step 3: Vitest設定ファイルの作成

プロジェクトのルートディレクトリにvitest.config.jsファイルを作成し、以下の内容を追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.js',
  },
})
  • plugins: [react()]
    • Viteプラグインを指定します。
    • ここではReactプラグインを使用しています。
    • このプラグインにより、.jsxファイルの処理やReact特有の最適化が行われます。
  • test: { … }
    • Vitestに関する設定を指定します。
    • environment: ‘jsdom’
      • テスト実行環境としてjsdomを使用することを指定します。
      • jsdomはブラウザ環境をシミュレートするためのライブラリです。
    • globals: true
      • グローバルなテスト関数（describe, it, expect など）をインポートなしで使用できるようにします。
    • setupFiles: ‘./src/setupTests.js’
      • テスト実行前に読み込むセットアップファイルを指定します。
      • ここでは、@testing-library/jest-domのセットアップなどを行います。

Step 4: テストのセットアップファイル作成

src/setupTests.jsファイルを作成し、以下の内容を追加します。

import '@testing-library/jest-dom'

Step 5: package.jsonの更新

package.jsonファイルのscriptsセクションに、テスト実行用のコマンドを追加します。

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  "test": "vitest"　// テスト時にはこちらを利用します。
}

Step 6: サンプルコンポーネントの作成

テスト対象となるサンプルコンポーネントを作成しましょう。src/Counter.jsxファイルを作成し、以下の内容を追加します。

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  )
}

export default Counter;

このサンプルコードは、単純なカウンターであり、画面に最初に０が表示されて「Increment」をクリックすると+1になり、「Decrement」をクリックすると-1になるコードとなります。

Step 7: テストファイルの作成

最後に、src/Counter.test.jsxファイルを作成し、以下のテストを追加します。

import { render, screen, fireEvent } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import Counter from './Counter'

describe('Counter', () => {
  it('renders initial count', () => {
    render(<Counter />) 
    expect(screen.getByText('Count: 0')).toBeInTheDocument()
  })

  it('increments count', () => {
    render(<Counter />)
    fireEvent.click(screen.getByText('Increment'))
    expect(screen.getByText('Count: 1')).toBeInTheDocument()
  })

  it('decrements count', () => {
    render(<Counter />)
    fireEvent.click(screen.getByText('Decrement'))
    expect(screen.getByText('Count: -1')).toBeInTheDocument()
  })
})
  • render()
    • Counterコンポーネントをレンダリングします。仮想DOMが作成されます。
  • screen.getByText(‘Count: 0’)
    • screen: React Testing Library が提供するオブジェクトで、レンダリングされた DOM にアクセスするための関数を含みます。
    • getByText(): テキストコンテンツに基づいて要素を検索する関数です。
    • ‘Count: 0’: 検索対象のテキスト。完全一致で検索されます。
  • expect(…).toBeInTheDocument()
    • expect(): Jest や Vitest で提供されるアサーション関数です。
    • toBeInTheDocument(): jest-dom が提供するカスタムマッチャーです。 要素が DOM に存在するかどうかをチェックします。
  • fireEvent
    • React Testing Library が提供するオブジェクトで、DOM イベントをシミュレートするための関数群を含みます。
  • fireEvent.click()
    • クリックイベントをシミュレートする関数です。
    • 指定された要素に対して、マウスクリックイベントを発火させます。

テストの実行

これで準備完了です！以下のコマンドでテストを実行できます。

npm test

Vitestはウォッチモードでテストを実行し、ファイルの変更を検知して自動的にテストを再実行します。

テストファイル「Counter.test.jsx」が実行されpassedになっていることが確認できます。また、以下のテストケースが正常に実行され、passedになっていることが確認できます。

  • renders initial count
    • 初期表示でcountが「0」であること
  • increments count
    • incrementsボタンクリック時に「+1」になり、「1」になること
  • decrements count
    • decrementsボタンクリック時に「−1」になり、「−1」になること

まとめ

以上が、ReactプロジェクトにVitestを導入する基本的な手順です。Vitestを使用することで、高速で効率的なテスト環境を構築でき、開発プロセスを大幅に改善できます。

テストは開発プロセスの重要な部分です。Vitestのような高速で使いやすいツールを導入することで、テストの作成と実行がより簡単になり、結果として高品質なコードを維持しやすくなります。

機会があれば、プロジェクトでも実際に導入することで、テストコストを下げたいと思います！

https://vitest.dev/

コメントを残す