Redux测试 – Redux教程

上一章Redux教程请查看：Redux Devtool开发工具

测试Redux代码很简单，因为我们主要编写函数，而且大多数函数都是纯函数，所以我们可以在不模拟他们的情况下测试它。在这里，我们使用JEST作为测试引擎，它在节点环境中工作，不访问DOM。

我们可以用下面的代码安装JEST

npm install --save-dev jest

使用babel，你需要按如下方式安装babel-jest

npm install --save-dev babel-jest

并将其配置为在.babelrc文件中使用babel-preset-env特性，如下所示

{ 
    "presets": ["@babel/preset-env"] 
 }
 And add the following script in your package.json:
 { 
    //Some other code 
    "scripts": {
       //code
       "test": "jest", 
       "test:watch": "npm test -- --watch" 
    }, 
    //code 
 }

最后，运行npm test或npm run test，让我们检查一下如何为action创建者和reducer编写测试用例。

动作创建器的测试用例

让我们假设你有如下所示的动作创建器

export function itemsRequestSuccess(bool) {
    return {
       type: ITEMS_REQUEST_SUCCESS,
       isLoading: bool,
    }
 }

这个action creator可以像下面这样测试

import * as action from '../actions/actions';
import * as types from '../../constants/ActionTypes';

describe('actions', () => {
   it('是否应该创建一个动作来检查项目是否正在加载', () => { 
      const isLoading = true, 
      const expectedAction = { 
         type: types.ITEMS_REQUEST_SUCCESS, isLoading 
      } 
      expect(actions.itemsRequestSuccess(isLoading)).toEqual(expectedAction) 
   })
})

reducer的测试用例

我们已经了解到，当action被应用时，reducer应该返回一个新的状态。因此，对这种动作的reducer进行了测试。

考虑如下所示的reducer：

const initialState = {
    isLoading: false
 };
 const reducer = (state = initialState, action) => {
    switch (action.type) {
       case 'ITEMS_REQUEST':
          return Object.assign({}, state, {
             isLoading: action.payload.isLoading
          })
       default:
          return state;
    }
 }
 export default reducer;

为了测试上面的reducer，我们需要将状态和动作传递给reducer，并返回一个新的状态，如下图所示

import reducer from '../../reducer/reducer' 
import * as types from '../../constants/ActionTypes'

describe('reducer初始状态', () => {
   it('应该返回初始状态', () => {
      expect(reducer(undefined, {})).toEqual([
         {
            isLoading: false,
         }
      ])
   })
   it('应该处理ITEMS_REQUEST', () => {
      expect(
         reducer(
            {
               isLoading: false,
            },
            {
               type: types.ITEMS_REQUEST,
               payload: { isLoading: true }
            }
         )
      ).toEqual({
         isLoading: true
      })
   })
})

如果你不熟悉编写测试用例，你可以查看JEST更多的基础知识。