前言
使用和学习vue也有一年多了，但是因为公司项目和自身的原因，一直都处于入门使用而已，很多vue的知识都是一知半解，痛定思痛，开始学习。
在安装vue项目的时候，有一个选项：Set up unit tests?。是关于vue.js的单元测试的。因为日常项目没使用过，所以这次学习一下。
——入门于网易云课堂的《网易高级前端开发系列直播课》
单元测试介绍
单元测试的概念
单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证
在系统和项目中，最小单元指的是方法和API。单元测试，指的是对这些方法和API进行测试，若方法和API都是正确的，那使用自然也不会出错。
单元测试类型
TDD——测试驱动开发，根据需求，先写测试代码，再写能通过测试的代码
BDD——行为驱动开发，根据功能，确定实现该功能所需要的行为，再根据行为写单元测试和代码（需要开发者、QA和非技术人员一起协作，共同根据功能实现）
单元测试的内容
1、测试框架
运行自己写的测试代码，执行方法。
常用测试框架：Jasmine、Jest、Mocha、Qunit……
2、断言库
判断运行结果是否和自己所预期的结果一致
常用：Chai、Should、expect……
3、Mock库
可屏蔽测试方法中所关联的其他方法（测试只能测试单一方法）
常用：Sinon、Jasmine……
4、Test runnner
提供测试的环境，运行测试代码。（通常是模拟浏览器）
常用：karma……
5、覆盖率工具
统计单元测试代码覆盖率相应的数据，如测试了多少个方法，测试了多少行代码等。
常用：
Istanbul……
关于框架和工具区别和特点可以看：www.cnblogs.com/lihuanqing/…
vue单元测试
说了这么多框架和工具，其实主流的测试框架和工具也就那些，对于vue项目来说，官方也提供了内置选项
Vue CLI 拥有开箱即用的通过 Jest 或 Mocha 进行单元测试的内置选项。我们还有官方的 Vue Test Utils 提供更多详细的指引和自定义设置。
1、创建新项目增加vue单元测试
在新建vue项目的时候，有一个Set up unit tests的选项，询问是否使用测试单元，选择yes，会出现测试单元框架的选项，使用Jest或Karma 和Moch还是使用自定义的测试框架。这里我们选择Karma and Mocha
2、已有的项目增加单元测试
对于现有的vue项目要想加上单元测试就只能手动添加了。
①复制相关文件夹
复制关于单元测试有关的文件夹到现有项目中相应的位置（可以新初始化一个vue项目进行赋值），包括：
build中的webpack.test.conf.js
config中test.env.js
整个test文件夹及里面的内容
②安装Karma and Mocha内容
npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage
③package.json的修改 在新初始化的项目中的package.json文件中找到以下代码，复制到现有项目中相应位置
"unit": "karma start test/unit/karma.conf.js",
"test": "npm run unit",
原来的是cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run --single-run是关于跨域的，我们只需要复制test karma start test/unit/karma.conf.js就可以了
3、测试说明
①karma.conf.js配置测试环境
karma官网：karma-runner.github.io/0.13/config…
可以进行测试环境的配置，包括测试的平台、所用的库等，具体官网已有说明
// 模拟运行环境（浏览器），默认无头浏览器（不属于任何浏览器）
browsers: ['PhantomJS'],
// 定义所用到的库
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
// 定义测试用例等写在哪个文件夹
reporters: ['spec', 'coverage'],
files: ['./index.js'],
// 使用前得处理，用webpack处理index.js文件夹，再往后是webpack配置
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// 覆盖率报告输出的类型和目录
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
以上配置默认不需要修改
// 引入测试目标（默认引入src中的文件）
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
②spec编写测试用例
// describe 用例的描述
describe('HelloWorld.vue', () => {
// it 新建测试用例， 'should render correct contents'用例描述
it('should render correct contents', () => {
// Vue.extend()--获取HelloWorld的构造函数
const Constructor = Vue.extend(HelloWorld)
// 新建这个组件的构造函数即 this ——当前文件下若需要多个测试用例，可将vm定义提取到it方法外面
const vm = new Constructor().$mount()
// 获取dom节点的内容，和 'Welcome to Your Vue.js App'这个结果进行对比
expect(vm.$el.querySelector('.hello h1').textContent)
.to.equal('Welcome to Your Vue.js App')
})
异步函数的测试，采用回调方法
运行结果：
npm run test
运行结果包含了验证情况和覆盖率报告
总结
以上就是vue单元测试的入门，由于日常使用情况不多，先入门进行了解，其实详细铺开来讲，测试也是一块重点——共勉
