手っ取り早くES6なReduxのコードをテストする(mocha)


Reduxのテスト書いたので覚え書き。

## 準備

テストツールはmocha、アサーションにはexpectを使う。

```sh
$ npm install -D mocha expect
```

api部分をモックにしてテストをするためにnockを使う。

```sh
$ npm install -D nock
```

es6のコードをテストするためにbabelとその周辺のもろもろを入れる。

```sh
$ npm install -D babel babel-register babel-preset-es2015 babel-preset-react
```

### babelの設定にpresetsを追加

package.jsonに書くか

```package.json:package.json
{
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}
```
.babelrcを用意してそこに書く

```.babelrc:.babelrc
{
  "presets": ["es2015", "react"]
}
```


### script追加
npmコマンドでテストの実行ができるようにpackage.jsonに下記を追記。

```package.json:package.json
{
  "scripts": {
    "test": "./node_modules/mocha/bin/mocha --compilers js:babel-register /path/to/spec/*.spec.js --recursive"
  }
}
```

`/path/to/spec/*.spec.js`の部分にはテストファイルのパスを指定する。

最終的にpackage.jsonこんな感じ


```package.json:package.json
{

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-ie": "^6.6.2",
    "babel-preset-react": "^6.5.0",
    "babel-register": "^6.9.0",
    "expect": "^1.20.2",
    "mocha": "^2.5.3",
    "nock": "^8.0.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "babel-plugin-transform-object-assign"
    ]
  },
  "scripts": {
    "test": "./node_modules/mocha/bin/mocha --compilers js:babel-register /path/to/spec/*.spec.js --recursive"
  }
}

```

## reducerのテスト
reduxはアプリケーションの心臓部分であるstate(状態)を個別のオブジェクトとして保持する。その中でreducerは「action(ピュアなオブジェクト)を受け取ってstateを変更するためのオブジェクトを生成する」という役割を持つ。
ので、その役割を果たせているかどうかのテストを書く。

```js:reducer/hoge.js
import * from 'constants/ActionTypes'

const initialState = 
{
  hoge_state: ''
}

export default function hoge(state = initialState, action) {
  switch (action.type) {
    case SET_HOGE:
      return Object.assign({}, state, {
        hoge_state: action.hoge
      })

    default:
      return state
  }
}
```

```js:__test__/reducer/hoge.spec.js
import HogeReducer from 'reducer/hoge'
import * as types from 'constants/actionTypes'
import expect from 'expect'

describe('reducer::hoge', () => {
  it('should return the initial state', () => {
    const expect_value = {
      hoge_state: 'hoge'
    }
    const newState = HogeReducer({}, {
      type: types.SET_HOGE,
      hoge_state: 'hoge'
    })

    expect(newState).toEqual(expect_value)
  })
})
```
mochaは上記のようにrspecっぽくテストコードが書ける。
やっていることはシンプルで、新しいstateが期待通りの値になっているかをチェックしている。

## action_createrのテスト
action_createrの役割は、stateに格納するためのaction(ピュアなオブジェクト)を生成すること。actionは必ず`type`プロパティを持つ。

```js:actions/hoge_actions.js
export function setHoge(hoge) {
  return { type: types.SET_HOGE, hoge }
}
```

```js:__test__test/actions/hoge_actions.spec.js
import * as actions from '/actions/hoge_actions'
import * as types from '/constants/ActionTypes'
import expect from 'expect'

describe('actions::hoge', () => {
  it('should create hoge action', () => {
    expect(actions.setHoge('hoge')).toEqual({ type: types.SET_HOGE, hoge: 'hoge' })
  })
})
```
簡単ですね。

## apiのテスト
あとでかく

## テスト実行

`$ npm test`を実行してみる

```sh
$ npm test

./node_modules/mocha/bin/mocha --compilers js:babel-register /path/to/spec/*.spec.js --recursive


  reducer::hoge
    ✓ should return the initial state

  actions::hoge
    ✓ should create hoge action

```

ちゃんとテストがかけてればこんな出力になる

## おしまい