React with Reduxでto-Do-listを作る
以下の記事を参考に、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 functionconst App = () => (
<div>My App</div>
)export default App
statefullコンポーネントを、ただの関数に置き換えます。関数の方が、テストの時に、より扱いやすくなるというメリットがあります。
関数のメリット
- 出力の値が予想しやすい
- 不変の変数であること
- パフォーマンスにすぐれている
また、次のパッケージをunitテスト用にインストールして、src/App.test.jsを作ります。
npm install --save-dev enzyme react-test-renderersrc/App.test.js:
/* global it, expect */import React from 'react';
import { shallow } from 'enzyme';
import App from './App';it('App renders without crashing', () => {
const component = shallow(<App />);
expect(component.exists()).toEqual(true);
});
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;describe('TodoList App', () => {
it('Should load with the right title', () => {
browser.url('http://localhost:3000/');
const actualTitle = browser.getTitle();expect(actualTitle).to.eql('Todo List');
});
});
上記の手順を終え、 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を早く慣れていければと思います。
