上一章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更多的基础知识。
推荐阅读
- Redux集成React – Redux教程
- Redux Devtool开发工具 – Redux教程
- redux中间件 – Redux教程
- C++ STL中的unordered_map用法指南
- Java环境部署（安装和环境变量设置）
- 在R编程中计算向量的累积最大值– cummax()函数用法介绍
- PHP Ds Sequencealloc()函数用法介绍
- 算法（将所有出现的元素移动到链表的结尾）
- PHP cal_from_jd()函数用法详细介绍