Vue项目测试实例讲解

搞了一个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测试(需翻墙)

Vue项目测试实例讲解

推荐阅读更多精彩内容