redux源码解读(二)测试环境搭建和代码测试

(一)中写了一个简易版的redux,测试都是直接通工看命令行输出的,显然这是不科学的

所以就需要写测试了,所以。我选择了jest

网上的介绍如下….

配置简单的测试环境按照官方文档

npm install --save-dev jest

把下面的内容添加到package.json

{
  "scripts": {
    "test": "jest"
  }
}

添加babel支持,支持最新的es语法

npm install babel-preset-env --save-dev
//.babelrc
{
    "presets": ["env"]
  }

这时候,在终端运行npm run test ,jest就会自动去运行项目目录下的每一个xxx.test.js和xxx.spec.js

结合前面的简易store写了几个简单的test样例

const createStore = require('../src/createStore');
const {testReducer} = require('./testdata');
describe('测试createStore', () => {
    it('测试store实例的函数接口', () => {
        const store = createStore(testReducer);
        const methods = Object.keys(store)
        expect(methods.length).toBe(4)
        expect(methods).toContain('subscribe')
        expect(methods).toContain('dispatch')
        expect(methods).toContain('getState')
        expect(methods).toContain('replaceReducer')
    });
    it('测试state初始值', () => {
        const store = createStore(testReducer, {sum: 520});
        expect(store.getState()).toEqual({sum: 520})
    });
    it('测试dispatch', () => {
        const store = createStore(testReducer, {sum: 0});
        expect(store.getState()).toEqual({sum: 0});

        //加一
        store.dispatch({type: 'ADD'});
        expect(store.getState()).toEqual({sum: 1});
        //减一
        store.dispatch({type: 'DEC'});
        expect(store.getState()).toEqual({sum: 0});
    })
})

这里写图片描述
可见,测的几个样例都成功了。如果错误是会报错的,例如把初值的期待值写为-1
expect(store.getState()).toEqual({sum: -1});
这样就会报错了,显示出来
这里写图片描述

再也 告别了那种人肉控制台测试的时光了hhhh

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值