karma+mocha+chai前端单元测试环境搭建

测试框架认识

karma：提供浏览器测试环境，在此karma提供测试服务。
mocha：提供Javascript测试环境，在此作为karma测试框架，被引入karma中使用。
chai：断言库。

项目中安装karma

安装karma： npm install karma -D
全局安装karma脚手架，便于使用karma命令： npm install karma-cli -g

生成karma配置文件

进入测试文件夹： cd **
生成karma配置文件： karma init karma.conf.js(配置文件名)

安装测试框架

安装依赖包： npm install mocha karma-mocha chai karma-chai karma-chrome-launcher -D
说明：karma-mocha、karma-chai、karma-chrome-launcher为将框架引入karma的中间件，在配置文件plugins中配置

// karma.conf.js文件：
frameworks: ['mocha',"chai"],
plugins: [
            "karma-mocha",
            "karma-chrome-launcher",
            "karma-chai"
        ]

安装预处理器webpack

由于测试文件中没有文件模块化，所以引入webpack。
安装webpack依赖包： npm install webpack webpack-merge karma-webpack -D
安装babel-loader依赖包： npm install babel-loader babel-core babel-preset-2015 -D

plugins: [
            // ...
            "karma-webpack"
        ],
preprocessors:{
    '待预处理文件':['webpack']
}，
webpack:{
    // webpack相关配置，无entry与output配置项
}

安装预处理器karma-coverage，统计代码覆盖率

由于使用了webpack打包了测试文件，所以会影响karma-coverage统计测试文件代码覆盖率结果，所以此处我们使用karma-coverage官网推荐istanbul插件统计代码覆盖率（istanbul会将统计结果注入源码），所以由karma-coverage生成覆盖率报告。
安装依赖包： npm install karma-coverage babel-plugin-istanbul -D

reporters: ['progress','coverage'],
// karma-coverage配置
coverageReporter: {
            dir: 'coverage/',
            /* 多个报告类型 */
            reporters: [
                {type: 'text-summary',subdir:'.',file:'textSummary.txt'},
                {type:'text-summary'},
                {type:'html',subdir:'html'}
            ]
        },
webpack:{
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude:[
                    resolve('node_modules')
                ],
                loader: 'babel-loader',
                query:{
                    // 引入了istanbul插件来检测Coverage。安装babel-plugin-istanbul插件
                    plugins:['istanbul']
                }
            },
        ]
    }
}

启动karma服务

karma start

启动测试

karma run

参考网站：

karma-coverage：https://www.zybuluo.com/wangx...
前端自动化单元测试初探：http://www.51testing.com/html...
karma笔记：https://segmentfault.com/n/13...