使用vue-test测试简单组件

一: 背景
对前端vue组件进行简单本地测试

二: 实验环境

1. vue 2.9.6
2. vue/test-utils 1.0.0 & jest

三: 实验步骤

1. 安装 Vue Test Utils
   (1). 克隆仓库，该仓库主要提供一个简单的组件。git clone https://github.com/vuejs/vue-test-utils-getting-started
   (2). 安装依赖。npm install
   (3). 若是想对本身的组件进行测试的话能够略过步骤(1)
2. 准备被测试的组件
   (1). 在本次实验中测试组件内容以下:
   
   
3. 建立测试文件
   (1). 建立一个名为'__tests__'的文件夹，一般状况下全部的测试文件都放在__tests__文件下。
   (2). 准备测试文件须要的依赖项。在'__tests__'下建立建立'test.js'，首先在test.js中引入须要测试的组件，其次从'@vue/test-utils'中引入{ createLocalVue, shallowMount }两个模块，createLocalVue主要是用来建立被测试组件的本地拷贝，在这份拷贝上安装插件不会对被测试组件产生影响。在本例中shallowMount也可使用Mount代替，主要做用是建立一个包含被挂载和渲染的Vue组件的包裹器Wrapper，咱们能够经过Wrapper.vm访问组件的方法和属性。再次是引入一些其它的依赖，在本次实验使用的组件中用到了element-ui，因此要引入element-ui。
   
   (3). 建立一个包裹器，经过一个构造函数返回一个包裹器，方便使用。
   
   其中localValue是使用createLocalVue()生成的本地拷贝，propsData是在组件被挂载时对props的设置，经过组件中的props对象能够看出本例中props只有visible一个布尔值。sync主时控制组件是否被同步渲染。
   (4). 测试渲染是否符合预期。
   
   首先断言该组件是不是一个Vue实例，其次是渲染的html是否符合预期。在这个过程当中须要用到选择器进行dom的选择及判断，对于原生的html5来讲咱们能够根据vue-test的官方文档选择器部分进行选择，对于一些ui组件库好比element-ui，因为对原生的html作了封装，因此实际渲染的html可使用wrapper.html()进行查看，咱们会发现wrapper.html()显示的内容和使用开发者工具进行审查获得的渲染是有区别的，因此最好根据wrapper.html()进行选择。
   (5). 测试一些事件是否符合预期。
   
   
   在这个部分对于本例来讲咱们主要测试组件的emit的值，也就是是否勾选checkbox与吐出'yes'和'no'的对应关系，经过组件代码咱们会发现预期的对应关系是checkbox.checked === 'true' -> 'no'，checkbox.checked === 'false' -> 'yes'。setData主要是设置wrapper.vm的属性，本例中主要是设置form.checked的值，jest.fn()是jest mock中的内容，在本例中主要是mock吐出的getParam方法。
4. 主要踩坑点
   (1). 渲染问题，组件库和原生的html经过控制台的开发者工具来看可能只是一些样式与组成方式的问题，可是经过wrapper.html()来看可能又有不一样，因此当咱们经过常规的选择方法选不中所须要的dom时，能够console一下wrapper.html看一下实际渲染结果
   (2). 事件触发问题，好比element-ui中对<el-checkbox>提供的@change事件，可是当咱们进行wrapper.trigger('change')时，是触发不了的。<el-button>的@click()和<button>的@click也是有区别的。
   (3). 仍是要多熟悉文档，附上vue-test 连接描述和jest 连接描述的地址