# 編寫測試
因為你寫的大部分 Redux 代碼都是些函數，而且大部分是純函數，所以很好測，不需要 mock。
### 設置
我們建議用 [Mocha](http://mochajs.org/) 作為測試引擎。
注意因為是在 node 環境下運行，所以你不能訪問 DOM。
~~~
npm install --save-dev mocha
~~~
想結合 [Babel](http://babeljs.io) 使用的話，在 `package.json` 的 `scripts` 里加入這一段：
~~~
{
...
"scripts": {
...
"test": "mocha --compilers js:babel/register --recursive",
"test:watch": "npm test -- --watch",
},
...
}
~~~
然后運行 `npm test` 就能單次運行了，或者也可以使用 `npm run test:watch` 在每次有文件改變時自動執行測試。
### Action Creators
Redux 里的 action creators 是會返回普通對象的函數。在測試 action creators 的時候我們想要測試不僅是調用了正確的 action creator，還有是否返回了正確的 action。
#### 示例
~~~
export function addTodo(text) {
return {
type: 'ADD_TODO',
text
};
}
~~~
可以這么測：
~~~
import expect from 'expect';
import * as actions from '../../actions/TodoActions';
import * as types from '../../constants/ActionTypes';
describe('actions', () => {
it('should create an action to add a todo', () => {
const text = 'Finish docs';
const expectedAction = {
type: types.ADD_TODO,
text
};
expect(actions.addTodo(text)).toEqual(expectedAction);
});
}
~~~
### Reducers
Reducer 應該是把 action 應用到之前的 state，并返回新的 state。測試起來是下面這樣的。
#### 示例
~~~
import { ADD_TODO } from '../constants/ActionTypes';
const initialState = [{
text: 'Use Redux',
completed: false,
id: 0
}];
export default function todos(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return [{
id: (state.length === 0) ? 0 : state[0].id + 1,
completed: false,
text: action.text
}, ...state];
default:
return state;
}
}
~~~
可以這么測：
~~~
import expect from 'expect';
import reducer from '../../reducers/todos';
import * as types from '../../constants/ActionTypes';
describe('todos reducer', () => {
it('should return the initial state', () => {
expect(
reducer(undefined, {})
).toEqual([{
text: 'Use Redux',
completed: false,
id: 0
}]);
});
it('should handle ADD_TODO', () => {
expect(
reducer([], {
type: types.ADD_TODO,
text: 'Run the tests'
})
).toEqual([{
text: 'Run the tests',
completed: false,
id: 0
}]);
expect(
reducer([{
text: 'Use Redux',
completed: false,
id: 0
}], {
type: types.ADD_TODO,
text: 'Run the tests'
})
).toEqual([{
text: 'Run the tests',
completed: false,
id: 1
}, {
text: 'Use Redux',
completed: false,
id: 0
}]);
});
~~~
### Components
React components 有一點好，就是他們一般都很小而且依賴于他們的 props。所以很好測。
要測 components 我們要建一個叫 `setup()` 的輔助方法，用來把模擬過的（stubbed）回調函數當作 props 來傳入，然后使用 [React 淺渲染](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) 來渲染組件。這樣就可以通過做 “是否調用了回調函數” 這樣的斷言來寫獨立的測試。
#### 示例
~~~
import React, { PropTypes, Component } from 'react';
import TodoTextInput from './TodoTextInput';
class Header extends Component {
handleSave(text) {
if (text.length !== 0) {
this.props.addTodo(text);
}
}
render() {
return (
<header className='header'>
<h1>todos</h1>
<TodoTextInput newTodo={true}
onSave={this.handleSave.bind(this)}
placeholder='What needs to be done?' />
</header>
);
}
}
Header.propTypes = {
addTodo: PropTypes.func.isRequired
};
export default Header;
~~~
可以這么測:
~~~
import expect from 'expect';
import jsdomReact from '../jsdomReact';
import React from 'react/addons';
import Header from '../../components/Header';
import TodoTextInput from '../../components/TodoTextInput';
const { TestUtils } = React.addons;
function setup() {
let props = {
addTodo: expect.createSpy()
};
let renderer = TestUtils.createRenderer();
renderer.render(<Header {...props} />);
let output = renderer.getRenderOutput();
return {
props: props,
output: output,
renderer: renderer
};
}
describe('components', () => {
jsdomReact();
describe('Header', () => {
it('should render correctly', () => {
const { output } = setup();
expect(output.type).toBe('header');
expect(output.props.className).toBe('header');
let [h1, input] = output.props.children;
expect(h1.type).toBe('h1');
expect(h1.props.children).toBe('todos');
expect(input.type).toBe(TodoTextInput);
expect(input.props.newTodo).toBe(true);
expect(input.props.placeholder).toBe('What needs to be done?');
});
it('should call call addTodo if length of text is greater than 0', () => {
const { output, props } = setup();
let input = output.props.children[1];
input.props.onSave('');
expect(props.addTodo.calls.length).toBe(0);
input.props.onSave('Use Redux');
expect(props.addTodo.calls.length).toBe(1);
});
});
});
~~~
#### `setState()` 異常修復
淺渲染目前的問題是 [如果調用 `setState` 便拋異常](https://github.com/facebook/react/issues/4019). React 貌似想要的是，如果想要使用 `setState`，DOM 就一定要存在（但測試運行在 node 環境下，是沒有 DOM 的）。要解決這個問題，我們用了 jsdom，為了在 DOM 無效的時候，React 也不拋異常。按下面方法設置它：
~~~
npm install --save-dev jsdom mocha-jsdom
~~~
然后添加 `jsdomReact()` 幫助函數，是這樣的：
~~~
import ExecutionEnvironment from 'react/lib/ExecutionEnvironment';
import jsdom from 'mocha-jsdom';
export default function jsdomReact() {
jsdom();
ExecutionEnvironment.canUseDOM = true;
}
~~~
要在運行任何的 component 測試之前調用。注意這么做不優雅，等以后 [facebook/react#4019](https://github.com/facebook/react/issues/4019) 解決了之后，這段代碼就可以刪除了。
### 詞匯表
-
[React Test Utils](http://facebook.github.io/react/docs/test-utils.html): 跟 React 一塊來的測試小助手。
-
[jsdom](https://github.com/tmpvar/jsdom): 一個 JavaScript 的內建 DOM 。Jsdom 允許沒瀏覽器的時候也能跑測試。
-
[淺渲染（shallow renderer）](http://facebook.github.io/react/docs/test-utils.html#shallow-rendering): 淺渲染的中心思想是，初始化一個 component 然后得到它的`渲染`方法作為結果，比起渲染成 DOM 那么深的只有一級那么深。淺渲染的結果是一個 [ReactElement](https://facebook.github.io/react/docs/glossary.html#react-elements) ，意味著可以訪問它的 children, props 還能測試是否工作正常。
