一: 背景
对前端 vue 组件进行简单本地测试
二: 实验环境
- vue 2.9.6
- vue/test-utils 1.0.0 & jest
三: 实验步骤
- 安装 Vue Test Utils
(1). 克隆仓库，该仓库主要提供一个简单的组件。git clone https://github.com/vuejs/vue-test-utils-getting-started
(2). 安装依赖。npm install
(3). 如果想对自己的组件进行测试的话可以略过步骤(1) - 准备被测试的组件
(1). 在本次实验中测试组件内容如下:
- 创建测试文件
(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 方法。 - 主要踩坑点
(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 链接描述的地址