React with Reduxでto-Do-listを作る

Tuyoshi Akiyama
Jul 24, 2017 · 6 min read

以下の記事を参考に、toDoListアプリを作っていきます。

用意するもの

  • webdriverIO
    end to end テスト用ツール
  • enzyme
    unit テスト用ツール
  • create-react-app

create-react-appを使って、こちらの記事を参考に環境設定を行います。

また、eslintの設定の仕方は、こちらの公式サイトの方が分かりやすいと思います。

因みにパッケージのversionによっては、airbnb設定のeslintは機能しない場合もあります。

そういうときは、package.jsonを開いて、versionを変えるなどで依存性を整理すると動きます。

こういう依存性のエラーは面倒なイメージがありますが、英語でエラー文を検索したら、すぐに分かります。英語、読めて良かったと、改めて思います。


Refactor

次に、それぞれのファイルをリファクタリングしていきます。

src/App.js:

// A stateless pure function

statefullコンポーネントを、ただの関数に置き換えます。関数の方が、テストの時に、より扱いやすくなるというメリットがあります。

関数のメリット

  • 出力の値が予想しやすい
  • 不変の変数であること
  • パフォーマンスにすぐれている

また、次のパッケージをunitテスト用にインストールして、src/App.test.jsを作ります。

npm install --save-dev enzyme react-test-renderer

src/App.test.js:

/* global it, expect */

App componentをshallowして変数に代入し、そのコンポーネントが存在していればtrueを返すテストです。


End-to-end テスト

いわゆるUIテストや機能テストと言われるものの、設定を行っていきます。まず、次のパッケージをインストールします。

npm install --save-dev selenium-standalone webdriverio chai

つまり、これら3つは、BDD/TDD(テスト駆動開発)をブラウザーとJSで行う為の、ツールとなります。

それぞれの機能は以下の通りです。

  • selenium
    browserを立ち上げる
  • webdriberIO
    browserをコントロールする
  • chai
    assertion用のライブラリー

次にwebdriverの設定を以下のように行います。

設定ファイル(wdio.conf.js)内のbrowserの部分を chorome に変更して、

package.jsonに次のスクリプトを書き加えます。one-timeで呼び出す為のスクリプトになります。

"scripts": {
"selenium-setup": "selenium-standalone install",
"selenium-start": "selenium-standalone start",
"e2e-tests": "wdio wdio.conf.js",
"e2e-tests-watch": "wdio wdio.conf.js --watch",

次のコマンドで、seleniumサーバーを起動します。

npm run selenium-setup
npm run selenium-start

テストを行うフォルダ内にテストファイルを、次のように書いていきます。

const expect = require('chai').expect;

上記の手順を終え、 yarn startしたまま、次のコマンドをうってみます。

yarn run e2e-tests

実際のタイトルとテスト上で期待されたタイトルとが違うため、testはエラーを出します。

public/index.htmlファイルのタイトルを、 Todo List にすると、このテストは通ります。

因みに、 npm run e2e-tests-watchでもテストは可能になりますが、時々間違ったエラーを出すことに注意が必要になります。


以上で環境設定をし終えました。

ここまでのgit repositoryをあげてみます。


参考リンク

また次の記事は、create-react-app上でテストを行う際の、全体の流れをつかむのに活用しました。

感想

はじめて行うBDD/TDD(テスト駆動開発)手法だったので、理解するのに時間がかかりました。

まず、最初にエラーがでるようにテストを書いて、次に実際にページを作っていく。

名前には聞いたことがあった程度の開発方法でしたが、概要は理解できました。あとは、各モジュールやAPIを早く慣れていければと思います。

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade