vue自动化测试

网上很多都是用vue-cli新建项目，生成的结构内容很复杂，反正我是看着头很晕的，不知道你们是不是，所以试着自己在vue项目添加测试。现在前端的各种工具更新太快了，网上好多教程都有坑，所以想自己记录下来。

vue官网给的例子用的是karma + mocha + chai。

1. karma：Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。
2. mocha：mocha是一个基于nodejs和浏览器集合的各种特性的JavaScript测试库。
3. chai：chai是一个基于nodejs的断言库，并且完美支持各种主流的JavaScript测试框架。。

新建项目

vue安装环境不说了，网上一抓一大把，不会的同学移步到Vue2.0 新手完全填坑攻略——从环境搭建到发布

我们选择简易版生成vue项目

vue init webpack-simple npm-karma

目录结构

hello.vue

    <template>
        <div>
            <h1>{
   
   {
   
   title}}</h1>
        </div>
    </template>
    <script>
    export default {
        data () {
            return {
                title: 'hello world'
            }
        }
    }
    </script> 

安装karma

全局安装karma-cli

npm install karma-cli -g

进入项目目录下执行

karma init

这里选择vue推荐的mocha，根据上下键来进行选择，然后回车就好。

这里选择no

这里选择phantomJS，注意PhantomJS需要提前安装在电脑上，当然选择Chrome更方便

填写测试脚本存放位置，支持通用匹配。我们可以后面手动填写。选择空，回车

是否有需要排除的符合前面格式的问文件，选择空，回车

选择自动监测测试。选择yes

接下来项目根路径会有一个karma.config.js文件。

安装依赖

这时候我们的项目中的依赖如下：

我们已经选择了mocha作为测试库，还需要安装mocha和karma-mocha

浏览器选择了phantomjs，这里我们还需要安装 karma-phantomjs-launcher

使用webpack打包，还需要安装karma-webpack,extract-text-webpack-plugin

使用chai作为断言库，需要安装chai、sinon-chai、sinon、karma-sinon-chai

npm install karma-webpack karma-mocha chai sinon-chai sinon karma-sinon-chai karma-phantomjs-launcher extract-text-webpack-plugin mocha –save-dev

修改配置

karma配置中需要引入webpack配置，我们新建一个专门配置的文件夹存放所需的配置，

如下图，在项目根目录下新建了一个config文件夹

webpack.test.config.js

var path = require("path")
var webpack = require("webpack")
var ExtractTextPlugin = require('extract-text-webpack-plugin')

function resolve(dir) {
   
   

    return path.join(__dirname, '..', dir)
}

var webpackConfig = {

    module: {

        rules: [

            // babel-loader
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },

            // vue loader
            {
                t