Reduxで作成したロジックをJestでテストする

基礎からはじめるReact入門 第11回

　Reactアプリ開発の基礎を解説してきた本連載。前回までは、Reduxの概念や実装について学んできました。今回は、ReducerやActionCreatorのロジックの品質を担保する上で有用なユニットテストの方法を覚えることを目的とします。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactに興味／関心があり、これから学び始める方

前提環境

　筆者の検証環境は以下の通りです。

• macOS High Sierra 10.13.3
• Node.js v10.4.1／npm 6.1.0
• React 16.4.1
• redux 4.0.0
• react-redux 5.0.7
• jest 20.0.4（react-scripts 1.1.4内）

自動テストとテスティングフレームワーク

　アプリケーションを作成する際には、実際に動かしながらトライ・アンド・エラーを繰り返し、意図したとおりに動いているかを確認していくスタイルで開発を進める方も多いと思います。残念ながら、一度作成した機能のすべてを手作業で確認し続けるのは事実上不可能です。しかし、一部の機能に限れば、動作確認を自動化することもできます。この自動化された動作確認を自動テストと呼ぶことにします。

　自動テストは動作確認のための関数を用意し、その中でテスト対象の関数を呼び出す形で作成するのが一般的です。リスト1に示したコードのような関係だと考えてください。

［リスト1］実装コードとテストコードのイメージ

// 実装コード：src/sum.js
export function sum(a, b) {
  return a + b;
}

// テストコード：src/sum_test.js
import { sum } from "./sum";

function test() { // (1)
  // 1足す1は2になる
  const result = sum(1, 1);
  if (result === 2) {
    console.log("success!");
  } else {
    console.error("ERROR: " + result);
  }
}

　（1）のtest関数を実行すれば、特定のパラメータにおけるsum関数の動作を検証できますね。この考え方で動作確認のコードは書けそうです。

　ところで、この関数はどうやって実行すればよいのでしょうか。テスト用の関数の数は、アプリの規模によっては数百にもなります。Node.jsのスクリプトとして実行するにしても、管理の手間がかかりそうです。所定の形式で書いたテスト用の関数をすべて実行し、どのテストが成功してどのテストが失敗したのかを集計してくれるような、そんなツールがあれば嬉しいですね。

　テストコードの実行と結果の集計をしてくれるツールのことを、テスティングフレームワークと呼びます。自動テストを実施する上では、なくてはならない存在です。本記事では、create-react-appに内蔵されているテスティングフレームワークである、Jestを題材にして、Reduxアプリケーションの自動テストについて解説します。

Jestとは

　JestはFacebook社が開発している、JavaScriptとReactのためのテスティングフレームワークです。

　豊富な機能を持ちつつも、事前に設定ファイルやビルドツールを用意する必要がほとんどない手軽さも兼ね備えています。create-react-appを使っている場合はさらに手軽で、何も準備しなくても初めからJestが組み込まれています。プロジェクトを作成してすぐにnpm run testを実行すれば、Jestによるテストが始まります。