• 编写测试
    • 设置
    • Action 创建函数 (Action Creators)
      • 示例
    • 异步 Action 创建函数
      • 示例
    • Reducers
      • 示例
    • Components
      • 示例
    • 连接组件
      • 混用 ES6 模块和 CommonJS 的注意事项
  • 中间件
    • 示例
  • 词汇表

    编写测试

    因为你写的大部分 Redux 代码都是些函数，而且大部分是纯函数，所以很好测，不需要模拟。

    设置

    我们建议用 Jest 作为测试引擎。
    注意因为是在 node 环境下运行，所以你不能访问 DOM。

    1. npm install --save-dev jest

    若想结合 Babel 使用，你需要安装 babel-jest ：

    1. npm install --save-dev babel-jest

    并且在 .babelrc 中启用 ES2015 的功能 ：

    1. {
    2.   "presets": ["es2015"]
    3. }

    然后，在 package.json 的 scripts 里加入这一段：

    1. {
    2.   ...
    3.   "scripts": {
    4.     ...
    5.     "test": "jest",
    6.     "test:watch": "npm test -- --watch"
    7.   },
    8.   ...
    9. }

    然后运行 npm test 就能单次运行了，或者也可以使用 npm run test:watch 在每次有文件改变时自动执行测试。

    Action 创建函数 (Action Creators)

    Redux 里的 action 创建函数是会返回普通对象的函数。在测试 action 创建函数的时候我们想要测试是否调用了正确的 action 创建函数，还有是否返回了正确的 action。

    示例

    1. export function addTodo(text) {
    2.   return {
    3.     type: 'ADD_TODO',
    4.     text
    5.   }
    6. }

    可以这样测试：

    1. import * as actions from '../../actions/TodoActions'
    2. import * as types from '../../constants/ActionTypes'
    4. describe('actions', () => {
    5.   it('should create an action to add a todo', () => {
    6.     const text = 'Finish docs'
    7.     const expectedAction = {
    8.       type: types.ADD_TODO,
    9.       text
    10.     }
    11.     expect(actions.addTodo(text)).toEqual(expectedAction)
    12.   })
    13. })

    异步 Action 创建函数

    对于使用 Redux Thunk 或其它中间件的异步 action 创建函数，最好完全模拟 Redux store 来测试。 你可以使用 redux-mock-store 把 middleware 应用到模拟的 store。也可以使用 nock 来模拟 HTTP 请求。

    示例

    1. import fetch from 'isomorphic-fetch';
    3. function fetchTodosRequest() {
    4.   return {
    5.     type: FETCH_TODOS_REQUEST
    6.   }
    7. }
    9. function fetchTodosSuccess(body) {
    10.   return {
    11.     type: FETCH_TODOS_SUCCESS,
    12.     body
    13.   }
    14. }
    16. function fetchTodosFailure(ex) {
    17.   return {
    18.     type: FETCH_TODOS_FAILURE,
    19.     ex
    20.   }
    21. }
    23. export function fetchTodos() {
    24.   return dispatch => {
    25.     dispatch(fetchTodosRequest())
    26.     return fetch('http://example.com/todos')
    27.       .then(res => res.json())
    28.       .then(json => dispatch(fetchTodosSuccess(json.body)))
    29.       .catch(ex => dispatch(fetchTodosFailure(ex)))
    30.   }
    31. }

    可以这样测试:

    1. import configureMockStore from 'redux-mock-store'
    2. import thunk from 'redux-thunk'
    3. import * as actions from '../../actions/TodoActions'
    4. import * as types from '../../constants/ActionTypes'
    5. import nock from 'nock'
    6. import expect from 'expect' // 你可以使用任何测试库
    8. const middlewares = [ thunk ]
    9. const mockStore = configureMockStore(middlewares)
    11. describe('async actions', () => {
    12.   afterEach(() => {
    13.     nock.cleanAll()
    14.   })
    16.   it('creates FETCH_TODOS_SUCCESS when fetching todos has been done', () => {
    17.     nock('http://example.com/')
    18.       .get('/todos')
    19.       .reply(200, { body: { todos: ['do something'] }})
    21.     const expectedActions = [
    22.       { type: types.FETCH_TODOS_REQUEST },
    23.       { type: types.FETCH_TODOS_SUCCESS, body: { todos: ['do something']  } }
    24.     ]
    25.     const store = mockStore({ todos: [] })
    27.     return store.dispatch(actions.fetchTodos())
    28.       .then(() => { // 异步 actions 的返回
    29.         expect(store.getActions()).toEqual(expectedActions)
    30.       })
    31.   })
    32. })

    Reducers

    Reducer 把 action 应用到之前的 state，并返回新的 state。测试如下。

    示例

    1. import { ADD_TODO } from '../constants/ActionTypes'
    3. const initialState = [
    4.   {
    5.     text: 'Use Redux',
    6.     completed: false,
    7.     id: 0
    8.   }
    9. ]
    11. export default function todos(state = initialState, action) {
    12.   switch (action.type) {
    13.     case ADD_TODO:
    14.       return [
    15.         {
    16.           id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
    17.           completed: false,
    18.           text: action.text
    19.         },
    20.         ...state
    21.       ]
    23.     default:
    24.       return state
    25.   }
    26. }

    可以这样测试:

    1. import reducer from '../../reducers/todos'
    2. import * as types from '../../constants/ActionTypes'
    4. describe('todos reducer', () => {
    5.   it('should return the initial state', () => {
    6.     expect(
    7.       reducer(undefined, {})
    8.     ).toEqual([
    9.       {
    10.         text: 'Use Redux',
    11.         completed: false,
    12.         id: 0
    13.       }
    14.     ])
    15.   })
    17.   it('should handle ADD_TODO', () => {
    18.     expect(
    19.       reducer([], {
    20.         type: types.ADD_TODO,
    21.         text: 'Run the tests'
    22.       })
    23.     ).toEqual(
    24.       [
    25.         {
    26.           text: 'Run the tests',
    27.           completed: false,
    28.           id: 0
    29.         }
    30.       ]
    31.     )
    33.     expect(
    34.       reducer(
    35.         [
    36.           {
    37.             text: 'Use Redux',
    38.             completed: false,
    39.             id: 0
    40.           }
    41.         ],
    42.         {
    43.           type: types.ADD_TODO,
    44.           text: 'Run the tests'
    45.         }
    46.       )
    47.     ).toEqual(
    48.       [
    49.         {
    50.           text: 'Run the tests',
    51.           completed: false,
    52.           id: 1
    53.         },
    54.         {
    55.           text: 'Use Redux',
    56.           completed: false,
    57.           id: 0
    58.         }
    59.       ]
    60.     )
    61.   })
    62. })

    Components

    React components 的优点是，一般都很小且依赖于 props 。因此测试起来很简便。

    首先，安装 Enzyme 。 Enzyme 底层使用了 React Test Utilities ，但是更方便、更易读，而且更强大。

    1. npm install --save-dev enzyme

    要测 components ，我们要创建一个叫 setup() 的辅助方法，用来把模拟过的（stubbed）回调函数当作 props 传入，然后使用 React 浅渲染 来渲染组件。这样就可以依据 “是否调用了回调函数” 的断言来写独立的测试。

    示例

    1. import React, { PropTypes, Component } from 'react'
    2. import TodoTextInput from './TodoTextInput'
    4. class Header extends Component {
    5.   handleSave(text) {
    6.     if (text.length !== 0) {
    7.       this.props.addTodo(text)
    8.     }
    9.   }
    11.   render() {
    12.     return (
    13.       <header className='header'>
    14.           <h1>todos</h1>
    15.           <TodoTextInput newTodo={true}
    16.                          onSave={this.handleSave.bind(this)}
    17.                          placeholder='What needs to be done?' />
    18.       </header>
    19.     )
    20.   }
    21. }
    23. Header.propTypes = {
    24.   addTodo: PropTypes.func.isRequired
    25. }
    27. export default Header

    可以这样测试:

    1. import React from 'react'
    2. import { shallow } from 'enzyme'
    3. import Header from '../../components/Header'
    5. function setup() {
    6.   const props = {
    7.     addTodo: jest.fn()
    8.   }
    10.   const enzymeWrapper = shallow(<Header {...props} />)
    12.   return {
    13.     props,
    14.     enzymeWrapper
    15.   }
    16. }
    18. describe('components', () => {
    19.   describe('Header', () => {
    20.     it('should render self and subcomponents', () => {
    21.       const { enzymeWrapper } = setup()
    23.       expect(enzymeWrapper.find('header').hasClass('header')).toBe(true)
    25.       expect(enzymeWrapper.find('h1').text()).toBe('todos')
    27.       const todoInputProps = enzymeWrapper.find('TodoTextInput').props()
    28.       expect(todoInputProps.newTodo).toBe(true)
    29.       expect(todoInputProps.placeholder).toEqual('What needs to be done?')
    30.     })
    32.     it('should call addTodo if length of text is greater than 0', () => {
    33.       const { enzymeWrapper, props } = setup()
    34.       const input = enzymeWrapper.find('TodoTextInput')
    35.       input.props().onSave('')
    36.       expect(props.addTodo.mock.calls.length).toBe(0)
    37.       input.props().onSave('Use Redux')
    38.       expect(props.addTodo.mock.calls.length).toBe(1)
    39.     })
    40.   })
    41. })

    连接组件

    如果你使用了 React Redux, 可能你也同时在使用类似 connect() 的 @dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">higher-order components ，将 Redux state 注入到常见的 React 组件中。

    请看这个 App 组件:

    1. import { connect } from 'react-redux'
    3. class App extends Component { /* ... */ }
    5. export default connect(mapStateToProps)(App)

    在单元测试中，一般会这样导入 App 组件

    1. import App from './App'

    但是，当这样导入时，实际上持有的是 connect() 返回的包装过组件，而不是 App 组件本身。如果想测试它和 Redux 间的互动，好消息是可以使用一个专为单元测试创建的 store， 将它包装在<Provider> 中。但有时我们仅仅是想测试组件的渲染，并不想要这么一个 Redux store。

    想要不和装饰件打交道而测试 App 组件本身，我们建议你同时导出未包装的组件：

    1. import { connect } from 'react-redux'
    3. // 命名导出未连接的组件 (测试用)
    4. export class App extends Component { /* ... */ }
    6. // 默认导出已连接的组件 (app 用)
    7. export default connect(mapDispatchToProps)(App)

    鉴于默认导出的依旧是包装过的组件，上面的导入语句会和之前一样工作，不需要更改应用中的代码。不过，可以这样在测试文件中导入没有包装的 App 组件：

    1. // 注意花括号：抓取命名导出，而不是默认导出
    2. import { App } from './App'

    如果两者都需要:

    1. import ConnectedApp, { App } from './App'

    在 app 中，仍然正常地导入：

    1. import App from './App'

    只在测试中使用命名导出。

    混用 ES6 模块和 CommonJS 的注意事项

    如果在应用代码中使用 ES6，但在测试中使用 ES5，Babel 会通过其 interop 的机制处理 ES6 的 import 和 CommonJS 的 require 的转换，使这两个模块的格式各自运作，但其行为依旧有细微的区别。 如果在默认导出的附近增加另一个导出，将导致无法默认导出 require('./App')。此时，应代以 require('./App').default 。

    中间件

    中间件函数会对 Redux 中 dispatch 的调用行为进行封装。因此，需要通过模拟 dispatch 的调用行为来测试。

    示例

    1. import * as types from '../../constants/ActionTypes'
    2. import singleDispatch from '../../middleware/singleDispatch'
    4. const createFakeStore = fakeData => ({
    5.   getState() {
    6.     return fakeData
    7.   }
    8. })
    10. const dispatchWithStoreOf = (storeData, action) => {
    11.   let dispatched = null
    12.   const dispatch = singleDispatch(createFakeStore(storeData))(actionAttempt => dispatched = actionAttempt)
    13.   dispatch(action)
    14.   return dispatched
    15. }
    17. describe('middleware', () => {
    18.   it('should dispatch if store is empty', () => {
    19.     const action = {
    20.       type: types.ADD_TODO
    21.     }
    23.     expect(
    24.       dispatchWithStoreOf({}, action)
    25.     ).toEqual(action)
    26.   })
    28.   it('should not dispatch if store already has type', () => {
    29.     const action = {
    30.       type: types.ADD_TODO
    31.     }
    33.     expect(
    34.       dispatchWithStoreOf({
    35.         [types.ADD_TODO]: 'dispatched'
    36.       }, action)
    37.     ).toNotExist()
    38.   })
    39. })

    词汇表

    • Enzyme：Enzyme 是一个 React 的 JavaScript 测试工具，能够让断言、操作以及遍历你的 React 组件的输出变得更简单。

    • React Test Utils： React 测试工具。被 Enzyme 所使用。

    • 浅渲染（shallow renderer）： 浅渲染的中心思想是，初始化一个组件然后得到它的 渲染 方法作为结果，渲染深度仅一层，而非递归渲染整个 DOM 。浅渲染对单元测试很有用， 你只要测试某个特定的组件，而不包括它的子组件。这也意味着，更改一个子组件不会影响到其父组件的测试。如果要测试一个组件和它所有的子组件，可以用 Enzyme’s mount() method ，也就是完全 DOM 渲染来实现。