单元测试链接：https://cn.vuejs.org/v2/guide/unit-testing.html
借鉴文档：https://blog.csdn.net/seanxwq/article/details/79456325 https://segmentfault.com/a/1190000012654035
对于vue项目，在每次新的更新后，检测
每个功能将变得很麻烦。因此可以创建可以一直运行的自动化测试，同时还能保证我们的代码可以正常运行。
在单元测试中所用的依赖：
Webpack 是一个捆绑器，它结合了各种JavaScript，CSS，HTML（和其他）文件，使他们可以随时由客户端处理。
Babel 是ECMAScript 6到ECMAScript 5的编译器。这些是不同的JavaScript标准，目前的浏览器不能解析所有的ECMAScript 6，因此需要进行转换。
Karma 是一个测试运行器，它运行一个Web服务器，其中包含项目的应用程序代码，并对其执行测试。
Mocha 是JavaScript的测试框架。
Chai 是可以与Mocha一起使用的断言库。
示例：在
src/component
文件夹中创建一个名为
myComponent.vue
的文件，并将以下代码放在里面,作为之后要测试的代码：
<template>
<span>{{ message }}</span>
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
<input v-model='input'/>
<button @click="add">Add</button>
</template>
<script>
export default {
props: ['fruit'],
data () {
return {
message: 'hello'，
input:'',
items:['apple','pear']
} },
created () {
this.message = 'bye'
},
methods:{
add() {
this.items.push(this.input)
}
} }
</script>
然后在在 test/unit/specs 下创建一个新的文件myComponent.spec.js并放上如下代码(提示: 将来所有的测试文件, 都将放specs这个目录下, 并以测试脚本名.spec.js结尾命名!)：
其中下面的代码是一个单独的空测试，它将检查组件是否从列表中显示项目。这是Mocha测试的基本文件结构。
describe('myComponent',()=>{
it('',()=>{
//code
})
})其中describe块称为"测试套件"(test suite), 表示一组相关的测试. 它是一个函数, 第一个参数是测试套件的名称(通常写测试组件的名称, 这里即为myConponent), 第二个参数是一个实际执行的函数.
it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述断言结果, 这里即为"has a created hook"), 第二个参数是一个实际执行的函数.
import Vue from 'vue'
import myComponent from '@/components/myComponent.vue'
//这是用来测试props时候利用的功能
function getRender(Component,propsData){
const Constructor = Vue.extend(Component)
const vm = new Constructor({propsData:propsData}).$mount()
return vm.$el.textContent
}
//开始测试
describe('myComponent',()=>{
//检查原始组件选项
it('has a created hook',()=>{
expect(type of myComponent.created).toBe('function')
})
//判断是否是功能
it('set the correct data',()=>{
expect(type of myComponent.data).toBe('function')
const defaultData = myComponent.data()
expect(defaultData.message).toBe('hello')
})
//检查生命周期的实例
it('
correctly sets the message when created',()=>{
const vm = Vue(mycomponent).$mount()
expect(vm.message).toBe('bye')
})
//获取实例
it('display item from items',()=>{
//获取组件实例
const Constructor = Vue.extend(mycomponent)
//挂载组件
const vm = new Constructor().$mount()
expect (vm.$el.textContent).to.cotain('apple')
})
//获取方法methods
it('add item to items'),()=>{
const Constructor = Vue.extend(mycomponent)
const vm = new Constructor().$mount()
//输入数据
vm.input='banana'
//获取button
const button = vm.$el.querySelector('button')
//新建点击事件
const clickEvent = new window.Event('click')
//触发点击事件
button.dispatchEvent(clickEvent)
//监听点击事件
vm._watcher.run()
expect(vm.$el.textContent).to.contain('banana')
})
//使用props进行测试
it('renders correctly with props',()=>{
expect(getRender(myComponent,{
fruit:'purple'})).toBe('purple')
})
})
其中，
$el :
Vue 实例使用的根 DOM 元素;
$mount():
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。