搞了一个vue项目，撸测试的时候发现网上的例子大多只有起步案例，看完之后，依然挠头，不知如何下手。xiaozhang愚钝，自己慢慢整理了一下，以实际项目中的案例来讲解vue项目的测试，项目中使用了国际化（i18n）以及UI组件element。
首先是测试环境，使用脚手架搭建的项目自带了单元测试环境是： Karma + mocha + chai 的组合，这里我们不多说了，mocha的讲解呢可以自行百度学习，我使用的感觉就是这东东非常的像jasmine（简直是一毛一样好吧....）
所以捏，建好的项目可以直接运行下面的命令行来执行自带的测试案例
npm run unit
然后我们简单看下vue官方的一个案例：（增加了我的说明）
// 导入 Vue.js 和被测试组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
//每一个测试文件中可以包含一个或者多个describe， 测试案例集合的概念
describe('这里可以写任何你想写的话，直接写组件名称', () => {
beforEach() => {
//这里的代码将会在每一个it 案例执行前被执行，我们可以在这做一些初始化工作
const Ctor = Vue.extend(MyComponent)
const vm = new Ctor().$mount()
}
afterEach() => {
//这里的代码会在每一个it案例之后被执行，一般用以清理工作
vm.$destroy && vm.$destroy();
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
}
// 创建一个实例并检查渲染输出
it('这里可以人一些，建议描述案例目的', () => {
//这里就是测试案例的内容了
expect(vm.$el.textContent).to.be('bye!')
})
})
通过这个案例基本可以掌握vue测试的基础了，每一个测试文件的结构都是这样的。 然后我们在实际项目中，一般都会有国际化资源，或者引用一些UI组件。我的项目中就使用了element 组件。那么这样的项目怎么测试嘞？
实际上，只要搞懂一个点就ok： 测试环境中的vue 跟开发环境中的vue一点关系都没有， 所以相关的挂载要在测试环境中再次的挂载一遍。
所以我们的项目中抽出了一个TestUtil.js 文件，以此来完成测试的初始化工作。文件内容如下：
/**
* Created by xiaozhang on 2017/11/13.
*/
//引入需要的依赖 项目中资源文件是单独引入的，所以这里也单独引入
import '../../../../static/nls/zh-CN.js'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
Vue.use(Element, { size: 'mini' })
Vue.use(VueI18n)
//仅作测试，所以这里直接声明任何一种语言都可以
const i18n = new VueI18n({
locale : 'zh-CN', //当前语言标识
messages : {
'zh-CN' : window.locales
}
});
/**
* 创建一个 Vue 的实例对象
* @param {Object|String} Component 组件配置，可直接传 template
* @param {Object|String} propsData 组件配置，设置传入组件的参数
* @return {Object} vm
*/
function getRenderedVm (Component, propsData) {
const Ctor = Vue.extend(Component);
const vm = new Ctor({ i18n,propsData }).$mount(); //这里要挂载i18n
return vm;
}
/**
* 回收 vm
* @param {Object} vm
*/
function destroyVM (vm) {
vm.$destroy && vm.$destroy();
vm.$el &&
vm.$el.parentNode &&
vm.$el.parentNode.removeChild(vm.$el);
};
//这里抛出两个方法，方便测试案例中调用
module.exports = {
getRenderedVm : getRenderedVm,
destroyVM : destroyVM
}
那么这个文件就帮我们完成了大部分的测试初始化工作，然后我们的测试文件就可以直接引用这个文件了，代码如下：
// 导入测试工具类 和被测试组件，进行测试
import {getRenderedVm,destroyVM} from './utils/TestUtils'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent,vue', () => {
beforEach() => {
let prop = {key: ‘message’};
vm = getRenderedVm(MyComponent , prop);
}
afterEach() => {
destroyVM(vm)；
}
it('rander dom', () => {
//这里就是测试案例的内容了
expect(vm.$el.textContent).to.be('bye!')
})
})
这样基本的结构就完事了， 具体怎么测试组件，这个需要看组件的具体实现了。通常可以从以下两个点来考虑：
1、断言重要的dom元素已经渲染了
expect(vm.$el.querySelector('.className')).to.exist;
2、断言组件中的事件正确的执行了。
vm.$el.querySelector('.className').click(); //触发事件
expect(vm.$el.querySelector('.className')).to.be("这里是结果");
以上是写vue项目中测试案例需要的点，参考了以下内容：
vue官方文档
入门vue测试(需翻墙)
