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

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

準備

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

$ npm install -D mocha expect

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

$ npm install -D nock

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

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

babelの設定にpresetsを追加

package.jsonに書くか

package.json

{
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

.babelrcを用意してそこに書く

.babelrc

{
  "presets": ["es2015", "react"]
}

script追加

npmコマンドでテストの実行ができるように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

{

  "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を変更するためのオブジェクトを生成する」という役割を持つ。
ので、その役割を果たせているかどうかのテストを書く。

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
  }
}

__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プロパティを持つ。

actions/hoge_actions.js

export function setHoge(hoge) {
  return { type: types.SET_HOGE, hoge }
}

__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を実行してみる

$ 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

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

おしまい