Edited at

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

More than 3 years have passed since last update.

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

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


おしまい