安装主依赖包

npm install karma karma-webpack jasmine-core --save-dev

安装测试加载器karma

安装karma

因为karma是要在命令中运行的，所以先安装karma-cli：

npm install -g karma-cli

或者直接全局安装

npm install karma -g

安装karma：

npm install karma --save-dev

在项目根目录执行：karma init 创建karma.conf.js文件

常用命令

初始化（配置见另外一篇文档）

karma init

ES6/7语法支持和webpack支持

npm install karma-webpack --save-dev

扫描二维码关注公众号，回复： 5796058 查看本文章

https://www.npmjs.com/package/karma-webpack

karma.conf.js

引入webpack

preprocessors: {
  // add webpack as preprocessor
  'test/*_test.js': [ 'webpack' ],
  'test/**/*_test.js': [ 'webpack' ]
},

karma start

更改测试文件之后可以打开另外一个窗口，执行测试，不用重新执行编译。

karma run

问题
出现Can not load “webpack”, it is not registered!

解决
没有安装karma-cli到全局

用jasmine框架进行测试

npm install jasmine-core --save-dev

describe('index.js: ', function() {
 it('isNum() should work fine.', function() {
  /*使用断言语句，调试isNum函数。如果断言错误则会报错（断言失败）*/
  expect(isNum(1)).toBe(true); //断言这个语句返回为true
  expect(isNum('1')).toBe(false);//断言这个语句返回为false
 })
});

http://blog.csdn.net/future_todo/article/details/52815596
http://blog.csdn.net/jzthekeeper/article/details/39157413

PHPStrom调试karma

先安装karma插件
在这里插入图片描述
auto

观察Test Run结果，第一次要多等一下

在这里插入图片描述

测试覆盖率

单元测试属于白盒测试，测试覆盖率也是测试指标之一。karma提供了karma-coverage来查看测试覆盖率。

安装karma-coverage

npm install karma-coverage --save-dev

配置覆盖率，在预处理的文件上加coverage

reporters : ['progress','coverage', 'coverage-istanbul'],

配置覆盖率报告的查看方式

coverageReporter : {
    type : 'html',
    dir  : 'test/unit/coverage/'
},

测试vue的覆盖率需要安装

npm install --save-dev istanbul-instrumenter-loade karma-coverage-istanbul-reporter

配置方法参考：https://github.com/MarxJiao/vue-karma-test/blob/webpack2/karma.conf.js

loader增加

config.module.loaders[1] =
    {
        test    : /\.vue$/,
        loader  : 'vue-loader',
        options : {
            loaders : {
                scss : ExtractTextPlugin.extract({
                    fallback : "style-loader",
                    use      : [
                        {
                            loader  : "css-loader",
                            options : {
                                sourceMap : true
                            }
                        },
                        {
                            loader  : "sass-loader",
                            options : {
                                includePaths : ["./app"],
                                outputStyle  : 'compressed',
                                sourceMap    : true
                            }
                        }
                    ]
                }),
            },
            postLoaders: {
                js: 'istanbul-instrumenter-loader?esModules=true'
            }
        }
    };

karma+webpack搭建vue单元测试环境