はじめに
Reactアプリのテストを行うためにVitestを利用しています。
環境構築からテストの実行までの手順と躓いたところをまとめていきます。
テストとは
テストとは書いたコードが期待通りの動作をするか自動的に確認する仕組みです。
テスト自体は手動で行う事もできますが、手動でのテストは
- 更新のたびに毎度手作業で行わなければならない
- 時間が掛かる（サイトやアプリの規模の大きさに比例して）
- 目視なのでバグを見落とす可能性がある
などデメリットが多いです。
テストを自動化することで、数百・数千のコードのチェックをコマンド一つで実行出来るようになります。
Vitestとは
Vitestは、JavaScriptとTypeScript のテストフレームワークです。Viteと同じ開発サーバーや変換パイプラインを共有し、TypeScriptやJSXをビルド設定なしで高速に処理します。
他のテストフレームワークにJestがありますが、VitestはJestよりも実行速度が高速かつViteの設定ファイルをそのままテスト環境に使用できるため、環境構築に手間がかかりません。
また、Jestとの互換性もあるためJestで使えるメソッドをそのまま利用出来るのもメリットです。
Vitestの導入
Vitestをインストールします。React + Viteプロジェクトがある前提で進めます。
インストールはプロジェクトのルートディレクトリ上で行ってください。
Vitestのインストール
npm install -D vitest
なおVitestの実行にはバージョン6.4.0以上のViteとバージョン22.12.0以上のNode.jsが必要です。
インストールが完了したら、package.jsonのdevDependenciesに以下が追加されているか確認しましょう。
"devDependencies": {
"vitest": "^5.0.5"
}
インストールについては以下も参考にしてください。
環境のセットアップ
ライブラリのインストールが完了したら、テストする環境のセットアップを行います。
vite.config.js の設定
vite.config.jsを開いて以下を追記します。
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
+ test: {
+ globals: true, // グローバル変数を有効化
+ },
});
globals: trueではVitestのdescribe, it, test, expectをimport無しで使えるようにしています。
package.json にスクリプトを追加
テストをコマンドで実行出来るようにpackage.jsonにスクリプトを追加します。
{
"scripts": {
"test": "vitest",
}
}
Viteにはインストール時に作成されているpackage.jsonに既にscriptsが書かれているのでそこに追記で問題無いです。
テストファイルの作成
セットアップができたのでテストファイルを作成します。
テストファイルの命名規則
まずはテストを行いたいファイルを作成します。
Vitestでは以下2つのテストファイルの命名規則があります。
〇〇.test.js〇〇.spec.js
テストファイルの設置場所に決まりはありませんが、テストしたいコンポーネントと同じディレクトリに置くか、__tests__ディレクトリを作成してここにテストファイルを集約するかの2パターンが慣習となっているようです。
# パターン1
src/
utils.js
utils.test.js
# パターン2
__tests__/
utils.test.js
テストを実行する
簡単なテストを実行してみます。
test('1 + 2 は 3である', () => {
expect(1 + 2).toBe(3)
});
sum.test.jsという名前のテストファイルを作成して、npm run testを実行します。
以下が出力されればテストが成功しています。
✓ src/sum.test.jsx (1 test) 1ms
✓ 1 + 2 は 3である 1ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 11:00:55
Duration 52ms
テストコードの基本構造とテストを行う際に必須のコードについて見ていきます。
test / it
test('ここは何をテストしているかを書く', () => {
// ここにテストを書く
});
it('ここは何をテストしているかを書く', () => {
// ここにテストを書く
});
test/itは個別で行うテストです。第一引数には文字列で何をテストするのかを書き、第二引数のコールバック関数でテストを実行します。
test/itの動作はどちらも同じなのでお好みですが、混在させると可読性が下がるため統一して使いましょう。
expect
expect(検証したい値や動作)
expectは値や動作を検証（アサーション）するメソッドです。expect単体では使わず後述するマッチャーと組み合わせて使います。
マッチャー
マッチャーはexpectの戻り値が「期待通りの結果になっているか」を検証するためのメソッドです。
よく使うものは以下です。
| マッチャー名 | 検証内容 |
|---|---|
| toBe() | 厳密な等価性（===）を検証 |
| toEqual() | 配列やオブジェクトの中身が同一か検証 |
| toBeTruthy() | 値が「真（Truthy）」であるかを検証 |
| toBeFalsy() | 値が「偽（Falsy）」であるかを検証 |
| toContain() | 配列や文字列に特定の値が含まれるかを検証 |
| toHaveLength() | 配列の長さを検証 |
| toBeNull() | 値がnullかを検証 |
| toBeUndefined() | 値がundefinedかを検証 |
| toThrow() | エラーを投げるかを検証 |
describe
describeはテストをグループ化したい場合に使います。必須ではありませんが、関連するテストの記述をグループとしてまとめたい時に使います。
describe('数値のテスト', () => {
test('数値の等価性テスト', () => {
expect(1 + 2).toBe(3);
});
test('数値の不等価性テスト', () => {
expect(1 + 2).not.toBe(4);
});
});
終わりに
Vitestの導入と簡単なテストを実行しました。Viteの環境をそのまま使えるので手軽に導入出来てすぐにテストを行えるのがすごく便利だなと感じました。
次はReact Testing Libraryと組み合わせて使ってみたいです。
参考