Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/08/21 14:00

 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によるテストが始まります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact入門

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5