使用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 链接描述的地址