webpack构筑，Vue框架下的单元测试

前言

最近公司鼓励我们开发者进行单元测试，Unit Test一直是很有必要的，尤其对于团队协作和大型的迭代项目开发。但是国内开发者能做到单元测试习惯的并不多。
如果能把测试这一环节努力把控住，就会对我们的项目结果有至关重要的帮助。

测试工具

目前主流的自动化测试工具很多，我选择了Karma。缘分使然，我经常clone的github项目里都有一个叫做karma.conf.js的文件，之前一直不知道是干什么用的，后来研究单元测试的时候才发现是一个自动化测试工具。经过了解，它已经满足了我自动化测试的需求。
Karma的主要工作：

1. Karma启动一个web服务器，生成包含js源代码和js测试脚本的页面；

2. 运行浏览器加载页面，并显示测试的结果；

3. 如果开启检测，则当文件有修改时，执行继续执行以上过程。

安装Karma

全局安装karma：

npm i -g karma-cli

打开项目地址，安装karma包:

npm i -save-dev karma

之后，和node初始化packa.json一样，使用 karma init命令进行初始化配置即可。
当然也可以直接一路enter，然后在karma.conf.js文件里修改。

这里需要重点说的是，karma init如果在git bash里可能会报错，使用win的cmd终端则可以正常进行

karma配置项

module.exports = function (config) {
  config.set({
    browsers: ['Chrome'],
    frameworks: ['jasmine'],
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    files: ['test/index.js'],
    preprocessors: {
      'test/index.js': ['webpack', 'coverage']
    },
    singleRun: false
  })
}

• browsers表示观看测试报告的载体，我选择了Chrome浏览器，也有很多同学习惯使用PhantomJS.
• frameworks是测试框架，我选择了jasmine。
• files是测试文件。
• coverageReporter和reporters是测试报告相关的配置。

由于我的项目是用webpack搭建的，所以要重点配置webpack方面的选项

各项说明，详见官网。

使用Webpack

要在webpack的构筑里使用karma，还需要安装一些其他的npm包。

安装karma-webpack:

npm i --save-dev karma-webpack

此外，还有一些测试相关的依赖，例如浏览器启动包，覆盖率，jasmine框架等等，这些都需要一一安装。

不多赘言，附上我的package.json上的部分相关配置：

"devDependencies": {
	"karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.8.0"
}

同时，webpack里需要一些babel的解释器，不过一般情况下，配置webpack环境的时候，这些都已经安装好了。
如果没有安装，可以用以下命令进行：

npm i --save-dev babel-loader babel-core babel-preset-es2015

这时，要在karma的配置文件里，增加webpack方面的配置：

webpack: {
    module: {
        loaders: [
	      {
	        test: /\.vue$/,
	        loader: 'vue'
	      },
	      {
	        test: /\.js$/,
	        loader: 'babel!eslint',
	        // make sure to exclude 3rd party code in node_modules
	        exclude: /node_modules/
	      },
	      {
	        // edit this for additional asset file types
	        test: /\.(png|jpg|gif)$/,
	        loader: 'url',
	        query: {
	          // inline files smaller then 10kb as base64 dataURL
	          limit: 10000,
	          // fallback to file-loader with this naming scheme
	          name: '[name].[ext]?[hash]'
	        }
	      }
	    ]
    }
}

这里确保了vue组件和相关ES6语法可以正常被解析，从而进行karma的测试。

修改的方面主要有：

1. files只留下test文件。因为webpack会自动把需要的其它文件都打包进来，所以只需要留下入口文件。
2. preprocessors也修改为test文件，并加入webpack域处理器。
3. 加入webpack配置选项。可以自己定制配置项，但是不需要entry和output。这里加上babel-loader来编译ES6代码。

接着在bash里命令 karma start就可以看到单元测试的结果了。

会在coverage文件夹里生成一个报告，一看，coverage并不是100%。（前提是我的unit test的expect全部正确）。

造成这样的原因是webpack自身在打包和编译的时候会加入很多自己的代码，从而影响了覆盖率。这就让覆盖率完全没有意义了。有大神已经为我们提供了轮子。

另一个插件

安装istanbul-instrumenter-loader可以避免掉webpack自身代码导致的覆盖率错误。

npm i --save-dev istanbul-instrumenter-loader

之后在webpack配置方面增加一个属性：

module: {
	postLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'istanbul-instrumenter'
        }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel!eslint',
        // make sure to exclude 3rd party code in node_modules
        exclude: /node_modules/
      },
      {
        // edit this for additional asset file types
        test: /\.(png|jpg|gif)$/,
        loader: 'url',
        query: {
          // inline files smaller then 10kb as base64 dataURL
          limit: 10000,
          // fallback to file-loader with this naming scheme
          name: '[name].[ext]?[hash]'
        }
      }
    ]
}

大功告成以后运行karma start，再看自己的coverage报告，就是100%的覆盖率啦！

Vue组件的覆盖率

但这仅仅是对于js文件可以做到完整准确的覆盖率，对于vue的组件来说，无法达到100%，因为组件化开发，都是html,css,js三个语言写在同一个.vue文件里的，因此覆盖率能有50%左右就很可以了。
对于.vue的文件来说，覆盖率本身并没有太多参考价值，你的代码是否覆盖完全，通过vue的debug模式就可以完全暴露和查阅。主要还是进行用例的测试而非覆盖率测试。