redux async action 轻松搭建测试环境_ES2015(es6)

上一篇: 【每日一包0025】events 下一篇:Vue使用mixins手写压缩图片代码

redux async action 轻松搭建测试环境

发布时间：2019-08-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了redux async action 轻松搭建测试环境，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

如果觉得redux async action单元测试难以入手,不妨尝试本文方法.
redux状态管理确实带来十分大的便利,但随之而来的单元测试实现却令人头痛(至少刚开始我不知道从何着手).尤其async action单元测试更甚,本文意旨简单实现redux async action单元测试.
实现工具

karma 测试管理工具
mocha 测试框架
chai 测试断言库

项目结构

      
      
      
      
      
.
├── LICENSE
├── README.md
├── app #前端相关
│&nbsp;  ├── actions #redux actions
│   │   └── about.js
│   └── helPErs #validator
│       └── validator.js
├── package.json
├── test #测试相关
│   ├── actions #test redux actions
│   │   └── about_test.js
│   ├── karma.conf.js #karma配置文件
│   └── test_index.js #test 入口文件
├── webpack.test.js #test wepack
└── yarn.lock
karma搭建

      
      
      
      
      
karma配置文件

      
      
      
      
      
/**
 * test/karma.conf.js
 */
VAR webpackconfig = require('../webpack.test');
module.exports = function (config) {
    config.set({
        // 使用的测试框架&amp;断言库
        frameworks: ['mocha', 'chai'],
        // 测试文件同时作为webpack入口文件
        files: [
            'test_index.js'
        ],
        // webpack&sourcemap处理测试文件
        PReprocessors: {
            'test_index.js': ['webpack', 'sourcemap']
        },
        // 测试浏览器
        browsers: ['PhantomJS'],
        // 测试结束关闭PhantomJS
        phantomjslauncher: {
            exITOnResourceError: true
        },
        // 生成测试报告
        reporters: ['mocha', 'coverage'],
        // 覆盖率配置
        coverageReporter: {
            dir: 'coverage',
            reporters: [{
                type: 'json',
                subdir: '.',
                file: 'coverage.json',
            }, {
                type: 'lcov',
                subdir: '.'
            }, {
                type: 'text-summary'
            }]
        },
        // webpack配置
        webpack: webpackConfig,
        webpackMiddleware: {
            stats: 'errors-only'
        },
        // 自动监测测试文件内容
        autoWatch: false,
        // 只运行一次
        singleRun: true,
        // 运行端口
        port: 9876,
        // 输出彩色
        colors: true,
        // 输出等级
        // config.LOG_DISABLE
        // config.LOG_ERROR
        // config.LOG_WARN
        // config.LOG_INFO
        // config.LOG_DEBUG
        logLevel: config.LOG_INFO
    });
};

      
      
      
      
      
karma测试入口文件

      
      
      
      
      
/**
 * test/test_index.js
 * 引入test目录下带_test文件
 */
var testsContext = require.context(".", true, /_test$/);
testsContext.keys().foreach(function (path) {
    try {
        testsContext(path);
    } catch (err) {
        console.error('[ERROR] WITH SPEC FILE: ', path);
        console.error(err);
    }
});
es6将会已经成为主流,所以搭建karma时选择webpack配合babel进行打包处理.

      
      
      
      
      
webpack

      
      
      
      
      
/**
 * webpack.test.js
 */
process.env.NODE_ENV = 'test';

var webpack = require('webpack');
var path = require('path');
module.exports = {
    name: 'run test webpack',
    devtool: 'inline-source-map', //Source Maps
    module: {
        loaders: [
            {
                test: /.jsx|.js$/,
                include: [
                    path.resolve('app/'),
                    path.resolve('test/')
                ],
                loader: 'babel'
            }
        ],
        preLoaders: [{ //在webpackK打包前用isparta-instrumenter记录编译前文件,精准覆盖率
            test: /.jsx|.js$/,
            include: [path.resolve('app/')],
            loader: 'isparta'
        }],
        plugins: [
            new webpack.definePlugin({
                'process.env.NODE_ENV': JSON.stringify('test')
            })
        ]
    }
};

      
      
      
      
      
babel

      
      
      
      
      
/**
 * .babelrc
 */
{
  "presets": ["es2015", "stage-0", "react"]
}
actions
为了对actions执行了什么有个具体的概念,此处贴一张图


      
      
      改变start
 * value 星数
 */
exports.changeStart = (value)=> ({
    type: CHANGE_START,
    value: value,
    error: Validators.changeStart(value)
});
/**
 * 异步改变about
 * method post
 */
exports.changeAbout = ()=> {
    return async(dispatch)=> {
        try {
            let response = await fetch('/api/about', {
                method: 'POST'
            });
            let data = await response.json();
            return dispatch({
                type: CHANGE_ABOUT,
                data: data
            });
        } catch (e) {

        }
    }
};

const aboutRequest = ()=> ({
    type: GET_ABOUT_REQUEST
});

const aboutSucceed = (data)=>({
    type: GET_ABOUT_SUCCEED,
    data: data
});

const aboutFailed = ()=> {
    return {
        type: GET_ABOUT_FAILED
    }
};
" title="" data-original-title="复制">
      
      
/**
 * app/actions/about.js
 */
import 'isomorphic-fetch';
import * as Validators From '../helpers/validator';

export const GET_ABOUT_REQUEST = 'GET_ABOUT_REQUEST';
export const GET_ABOUT_SUCCEED = 'GET_ABOUT_SUCCEED';
export const GET_ABOUT_FAILED = 'GET_ABOUT_FAILED';
export const CHANGE_START = 'CHANGE_START';
export const CHANGE_ABOUT = 'CHANGE_ABOUT';

const fetchStateUrl = '/api/about';
/**
 * 异步获取about
 * method get
 */
exports.fetchAbout = ()=> {
    return async(dispatch)=> {
        // 初始化about
        dispatch(aboutRequest());
        try {//成功则执行aboutSucceed
            let response = await fetch(fetchStateUrl);
            let data = await response.json();
            return dispatch(aboutSucceed(data));
        } catch (e) {//失败则执行aboutFailed
            return dispatch(aboutFailed());
        }
    }
};
/**
 * 改变start
 * value 星数
 */
exports.changeStart = (value)=> ({
    type: CHANGE_START,
    value: value,
    error: Validators.changeStart(value)
});
/**
 * 异步改变about
 * method post
 */
exports.changeAbout = ()=> {
    return async(dispatch)=> {
        try {
            let response = await fetch('/api/about', {
                method: 'POST'
            });
            let data = await response.json();
            return dispatch({
                type: CHANGE_ABOUT,
                data: data
            });
        } catch (e) {

        }
    }
};

const aboutRequest = ()=> ({
    type: GET_ABOUT_REQUEST
});

const aboutSucceed = (data)=>({
    type: GET_ABOUT_SUCCEED,
    data: data
});

const aboutFailed = ()=> {
    return {
        type: GET_ABOUT_FAILED
    }
};

因为对星数有限制,编写validator限制

      
      
      
      
      
validator

      
      
      
      
      
/**
 * app/helpers/validator.js
 */

// 限制星数必须为正整数且在1~5之间
export function changeStart(value) {
    var reg = new RegExp(/^[1-5]$/);
    if (typeof(value) === 'number' && reg.test(value)) {
        return ''
    }
    return '星数必须为正整数且在1~5之间'
}
单元测试
这里测试了actions应该暴露的const,普通的actions,异步的actions.
测试async actions主要靠fetch-mock拦截actions本身,并且返回期望的结果.
注意:fetch-mock mock(matcher, response, options)方法,matcher使用begin:匹配相应url.如:begin:http://www.example.com/,即匹配http://www.example.com/也匹配http://www.example.com/api/about

      
      
      Store);

        describe('action fetchAbout', ()=> {
            it('Should be done when fetch action fetchAbout', async()=> {
                const data = {
                    "code": 200,
                    ";msg": "ok",
                    "result": {
                        "value": 4,
                        "about": "it's my about"
                    }
                };
                // 期望的发起请求的 action
                const actRequest = {
                    type: Actions.GET_ABOUT_REQUEST
                };
                // 期望的请求成功的 action
                const actSuccess = {
                    type: Actions.GET_ABOUT_SUCCEED,
                    data: data
                };
                const expectedActions = [
                    actRequest,
                    actSuccess,
                ];
                //拦截/api/about请求并返回自定义数据
                fetchMock.mock(`begin:/api/about`, data);
                const store = mockStore({});
                await store.dispatch(Actions.fetchAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
            it('Should be failed when fetch action fetchAbout', async()=> {
                // 期望的发起请求的 action
                const actRequest = {
                    type: Actions.GET_ABOUT_REQUEST
                };
                // 期望的请求失败的 action
                const actFailed = {
                    type: Actions.GET_ABOUT_FAILED
                };
                const expectedActions = [
                    actRequest,
                    actFailed,
                ];
                //拦截/api/about请求并返回500错误
                fetchMock.mock(`begin:/api/about`, 500);
                const store = mockStore({});
                await store.dispatch(Actions.fetchAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
        });
        describe('action changeAbout', ()=> {
            it('Should be done when fetch action changeAbout', async()=> {
                const data = {
                    "code": 200,
                    "msg": "ok",
                    "result": {
                        "about": "it's changeAbout fetch about"
                    }
                };
                const acSuccess = {
                    type: Actions.CHANGE_ABOUT,
                    data: data
                };
                const expectedActions = [
                    acSuccess
                ];
                //拦截/api/about post请求并返回自定义数据
                fetchMock.mock(`begin:/api/about`, data, {method: 'POST'});
                const store = mockStore({});
                await store.dispatch(Actions.changeAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
        });
    });
});
" title="" data-original-title="复制">
      
      
/**
 * test/actions/about_test.js
 */
import 'babel-polyfill'; // 转换es6新的API 这里主要为Promise
import 'isomorphic-fetch'; // fetchMock依赖
import fetchMock from 'fetch-mock';// fetch拦截并模拟数据
import configureMockStore from 'redux-mock-store';// 模拟store
import thunk from 'redux-thunk';
import * as Actions from '../../app/actions/about';
//store通过middleware进行模拟
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe('actions/about', () => {
    //export constant test
    describe('export constant', ()=> {
        it('Should export a constant GET_ABOUT_REQUEST.', () => {
            expect(Actions.GET_ABOUT_REQUEST).to.equal('GET_ABOUT_REQUEST');
        });
        it('Should export a constant GET_ABOUT_SUCCEED.', () => {
            expect(Actions.GET_ABOUT_SUCCEED).to.equal('GET_ABOUT_SUCCEED');
        });
        it('Should export a constant GET_ABOUT_FAILED.', () => {
            expect(Actions.GET_ABOUT_FAILED).to.equal('GET_ABOUT_FAILED');
        });
        it('Should export a constant CHANGE_START.', () => {
            expect(Actions.CHANGE_START).to.equal('CHANGE_START');
        });
        it('Should export a constant GET_ABOUT_REQUEST.', () => {
            expect(Actions.CHANGE_ABOUT).to.equal('CHANGE_ABOUT');
        });
    });
    //normal action test
    describe('action fetchAbout', ()=> {
        it('fetchAbout should be exported as a function.', () => {
            expect(Actions.fetchAbout).to.be.a('function')
        });
        it('fetchAbout should return a function (is a thunk).', () => {
            expect(Actions.fetchAbout()).to.be.a('function')
        });
    });
    describe('action changeStart', ()=> {
        it('changeStart should be exported as a function.', () => {
            expect(Actions.changeStart).to.be.a('function')
        });
        it('Should be return an action and return correct results', () => {
            const action = Actions.changeStart(5);
            expect(action).to.have.property('type', Actions.CHANGE_START);
            expect(action).to.have.property('value', 5);
        });
        it('Should be return an action with error while input empty value.', () => {
            const action = Actions.changeStart();
            expect(action).to.have.property('error').to.not.be.empty
        });
    });
    describe('action changeAbout', ()=> {
        it('changeAbout be exported as a function.', () => {
            expect(Actions.changeAbout).to.be.a('function')
        });
    });
    //async action test
    describe('async action', ()=> {
        //对每个执行完的测试恢复fetchMock
        afterEach(fetchMock.restore);

        describe('action fetchAbout', ()=> {
            it('Should be done when fetch action fetchAbout', async()=> {
                const data = {
                    "code": 200,
                    "msg": "ok",
                    "result": {
                        "value": 4,
                        "about": "it's my about"
                    }
                };
                // 期望的发起请求的 action
                const actRequest = {
                    type: Actions.GET_ABOUT_REQUEST
                };
                // 期望的请求成功的 action
                const actSuccess = {
                    type: Actions.GET_ABOUT_SUCCEED,
                    data: data
                };
                const expectedActions = [
                    actRequest,
                    actSuccess,
                ];
                //拦截/api/about请求并返回自定义数据
                fetchMock.mock(`begin:/api/about`, data);
                const store = mockStore({});
                await store.dispatch(Actions.fetchAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
            it('Should be failed when fetch action fetchAbout', async()=> {
                // 期望的发起请求的 action
                const actRequest = {
                    type: Actions.GET_ABOUT_REQUEST
                };
                // 期望的请求失败的 action
                const actFailed = {
                    type: Actions.GET_ABOUT_FAILED
                };
                const expectedActions = [
                    actRequest,
                    actFailed,
                ];
                //拦截/api/about请求并返回500错误
                fetchMock.mock(`begin:/api/about`, 500);
                const store = mockStore({});
                await store.dispatch(Actions.fetchAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
        });
        describe('action changeAbout', ()=> {
            it('Should be done when fetch action changeAbout', async()=> {
                const data = {
                    "code": 200,
                    "msg": "ok",
                    "result": {
                        "about": "it's changeAbout fetch about"
                    }
                };
                const acSuccess = {
                    type: Actions.CHANGE_ABOUT,
                    data: data
                };
                const expectedActions = [
                    acSuccess
                ];
                //拦截/api/about post请求并返回自定义数据
                fetchMock.mock(`begin:/api/about`, data, {method: 'POST'});
                const store = mockStore({});
                await store.dispatch(Actions.changeAbout());
                //比较store.getActions()与期望值
                expect(store.getActions()).to.deep.equal(expectedActions);
            });
        });
    });
});

dependencies

      
      
      
      
      
 "dependencies": {
    "isomorphic-fetch": "^2.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "redux": "^3.6.0",
    "webpack": "^1.14.0"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.2.10",
    "babel-polyfill": "^6.20.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "chai": "^3.5.0",
    "fetch-mock": "^5.8.0",
    "isparta-loader": "^2.0.0",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.1",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.1",
    "mocha": "^3.2.0",
    "redux-mock-store": "^1.2.1",
    "redux-thunk": "^2.1.0",
    "sinon": "next"
  }
script
直接在项目根目录中执行npm test则可以进行测试

      
      
      
      
      
"scripts": {
    "test": "./node_modules/karma/bin/karma start test/karma.conf.js"
  }
测试结果

持续集成

Travis-cli

与Github进行绑定
每次push执行npm test进行测试
由于Travis默认测试Ruby项目,所以在根目录下添加.travis.yML文件



      
      
      
      
      
language: node_js #项目标注为javascript(nodeJs)
node_js: '6' #nodeJs版本
sudo: true
cache: yarn #yarn缓存目录 $HOME/.yarn-cache
若项目通过可得到属于该项目的小图标 

项目地址
https://github.com/timmyLan/r...
参考资料

http://cn.redux.js.org/docs/r...
https://github.com/wheresrhys...

脚本宝典总结

以上是脚本宝典为你收集整理的redux async action 轻松搭建测试环境全部内容，希望文章能够帮你解决redux async action 轻松搭建测试环境所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: 【每日一包0025】events 下一篇:Vue使用mixins手写压缩图片代码

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程