SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact入門

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

次のページ
Jestの基本

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact入門連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10996 2018/08/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング