redux源码解读（二）测试环境搭建和代码测试

flytam

发布于 2020-01-14 16:58:30

3390

发布于 2020-01-14 16:58:30

文章被收录于专栏：flytam之深入前端技术栈flytam之深入前端技术栈

（一）中写了一个简易版的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});
    })
})