测试框架vue2.0+webpack2.0+Karma+Moch

一、准备工作

全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

cmd窗口会有如下提示：依次回车4次 y n n n

cmd操作命令，点击看图：

![2]LYEF]KW0([9XS@EE{P]L.png

控制台选项卡弹出Karma+Mocha的时候可以选择Y，但是配置文件太复杂。不好入手~也不好理解

安装依赖，走你
$ cd my-project
$ npm install

项目创建成功后、在package.json文件中添加karma + Mocha测试框架需要的包、如下所示：

"karma": "^1.7.0",
"karma-coverage": "^1.1.1",// 生成代码覆盖率。
"karma-mocha": "^1.3.0",// 让你在karma中使用Mocha测试框架的插件
"karma-phantomjs-launcher": "^1.0.2",// 是一个没有界面的 “浏览器”
"karma-phantomjs-shim": "^1.4.0",// 解决phantomJS 不支持 Function.prototype.bind语法
"karma-sourcemap-loader": "^0.3.7",// Karma 插件，生成文件的 sourcemap
"karma-spec-reporter": "0.0.31",// 命令行输出测试用户的运行结果
"karma-webpack": "^2.0.2",// webpack与karma的连接
"mocha": "^3.5.0",// 测试框架
"sinon": "^2.1.0",// 与断言库相关
"sinon-chai": "^2.8.0",// 与断言库相关
"chai": "^3.5.0",// 断言库
"karma-sinon-chai": "^1.3.1",// 与断言库相关

cmd命令 安装上述测试所需要用到的包

$npm install

二、测试用例

1. 我们依次创建3个文件 标识**

>--my-project // 根目录
> ---|src
>------|components
>------|router
> ---|test // 测试文件
>------|unit
>--------|specs
>----------|**Hello.spec.js**// 测试用例
>--------|**index.js**// 测试入口文件
>--------|**karma.conf.js** // 测试karma框架配置文件

2. 测试用例：Hello.spec.js

// Hello.spec.js
import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', function(){
  it('should render correct contents', function(){
    var Constructor = Vue.extend(Hello)
    var vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

3. 测试入口文件：index.js

// index.js
import Vue from 'vue'

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

4. 测试karma框架配置文件：karma.conf.js

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

module.exports = function(config) {
    config.set({
        // 是一个没有界面的 "浏览器"，具备浏览器支持js和标准
        browsers: ['PhantomJS'],
        // mocha:写测试用例  、sinon-chai:断言库、phantomjs-shim:解决PhantomJS不支持 Function.prototype.bind
        frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
        // 报告文件
        reporters: ['spec', 'coverage'],
        // 测试入口文件
        files: ['./index.js'],
        // 预处理文件，与webpack结合使用
        preprocessors: {
            './index.js': ['webpack', 'sourcemap']
        },
        webpack: {
            resolve: {
                // 引入文件时可以忽略后缀名
                extensions: ['.js', '.vue', '.json'],
                // 引入文件的路径名过长，设置别名
                alias: {
                    'vue$': 'vue/dist/vue.esm.js',
                    '@': 'D:\\Users\\my-project\\src'
                }
            },
            module: {
                rules: [{
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }, {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'static/img/[name].[hash:7].[ext]'
                    }
                }, {
                    test: /\.js$/,
                        use:{
                            loader: 'babel-loader'
                        },
                    include: ['D:\Users\my-project\src', 'D:\Users\my-project\test']
                }, {
                    test: /\.css$/,
                    use: ['vue-style-loader', {
                        loader: 'css-loader',
                        options: {
                            minimize: false,
                            sourceMap: false
                        }
                    }]
                },  {
                    test: /\.less$/,
                    use: ['vue-style-loader', {
                        loader: 'css-loader',
                        options: {
                            minimize: false,
                            sourceMap: false
                        }
                    }, {
                        loader: 'less-loader',
                        options: {
                            sourceMap: false
                        }
                    }]
                }]
            },
            devtool: '#inline-source-map',
            // 针对加载器
            resolveLoader: {
                // 使用别名
                alias: {
                    'scss-loader': 'sass-loader'
                }
            }
        },
        coverageReporter: {
            dir: './coverage',
            reporters: [{
                type: 'lcov',
                subdir: '.'
            }, {
                type: 'text-summary'
            }]
        }
    })
}

三、运行测试结果

在package.json的属性scripts中加入测试命令

"unit": "karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit"

cmd控制台执行：

npm run test

执行成功结果，点击看图：
![QZ[`$(K~A$K5K)8KVPV{DU.png