单元测试是什么
维基百科：单元测试是针对 程序的最小单元 来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。一个单元可能是单个程序、类、对象、方法等。
通俗百科：单元测试，是为了测试某一个类的某一个方法能否正常工作，而写的测试代码。
单元测试的意义
减少bug、提高代码质量、快速定位bug、减少调试时间、放心重构。
单元测试的目的
当你的项目足够大的时候，在叠加模块和组件的过程中，是很有可能影响之前的模块。但是被影响的模块已经通过了测试，我们在迭代的时候，很少有测试人员会去重新测试这个系统。所以， 被影响的模块很可能就有了一个隐形的bug被部署到线上。因此我们采用自动化测试。最主要的作用是对于大型项目，在每次迭代的时候， 可以保证整个系统的正确运行， 确保系统的健壮。
当前vue框架的选择
vue官方推荐一个叫做karma的自动化测试，它产生一个 Web 服务环境来运行项目代码，并且执行测试，该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。
搭建基于vue框架的单元测试
在创建项目之前，你还需要了解Mocha和Chai。
Mocha是一个 JavaScript 测试框架，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量，mocha里的常用命令和用法不算太多，可以看阮老师的《测试框架 Mocha 实例教程》就可以大致了解。
Chai是一个 Mocha 可以使用的断言库，就是判断源码的实际执行结果与预期结果是否一致。具体可以参考《简书·Chai.js断言库API中文文档》。
好吧，Let's do it！
一、创建项目
(1) 利用vue-cli来创建vueJS项目，它帮我们包办一切。运行 npm install 来安装依赖：
npm install -g vue-cli
vue init webpack projectName
(2) 在这个过程中，会遇到几个提示，是否安装 vue-router、Karma、Mocha的提示后，输入Y来引入这些工具，然后开始安装依赖：
cd projectName
npm install
安装完成后，我们可以在项目中找到一下目录：build、config、node_modules、src、static 、test。
(3) 执行下面的命令，这个命令将会在本地运行你的应用并在浏览器中打开：
npm run dev
二、搭建测试文件
(1) 我们演示一个最基本的（官方示例）
在src/components里面创建一个叫MyComponent.vue的文件，以下就是这个文件的代码。
<template>
<div>
{{ count }}
<button @click="increment">自增</button>
</div>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count++
}
}
}
</script>
当然，我们需要在视图中看到效果，可以创建一个新的路由来展示这个组件。在src/router/index.js文件中添加一个路由，例如：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyComponent from '@/components/MyComponent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/my-component',
name: 'MyComponent',
component: MyComponent
}
]
})
现在我们访问localhost:8080/#/my-component，就可以看到视图了。
(2) 紧接着，我们需要测试该组件了，验证数据是否正确
在test/unit/specs目录下面创建一个MyComponent.psec.js文件，官方示例：
import Vue from 'vue'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent.vue', () => {
it('计数器在点击按钮时自增', () => {
// 获取mount中的组件实例
const vmComponent = new Vue(MyComponent).$mount();
// 点击之前
console.log('计数器点击之前的值：' + vmComponent.count);
// 调用实例中的increment方法，点击计数器
vmComponent.increment();
// 点击之后
console.log('计数器点击之后的值：' + vmComponent.count);
// 判断最后的count是否为最后对应的值
expect(vmComponent.count).toBe(1);
})
})
(3) 然后运行
npm run unit
运行结果（正确）：
111.png
如果把1-->2，则会出现错误，例如：
expect(vmComponent.count).toBe(1) ---> expect(vmComponent.count).toBe(2);
运行结果（错误）：
222.png
