Redux测试 – 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 }) }) })

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