Vue Test Utils 【实战篇】

一、快照知识点补充

为了更好的理解下面内容，这里先补充下，快照的知识。

快照介绍

每当想要确保生成的 UI 不会有意外的改变时，快照测试时非常有用的工具

第一次运行时，会生成快照文件

第二次会比较不同，直接展示结果。更新快照 npm run test:unit – -u

shallowMount：浅渲染，不会渲染子孙组件。仅测试组件本身。
mount：会测试子子孙孙组件，耗费性能更大。一般用 shallowMount 即可。

mount与shallowMount的区别

运行结果：

第一次写入：

第二次比较，不能有 stubs，因为运行结果发现每次生成的数字不同，会导致测试不通过。

修改组件后，快照报错，显示组件被修改。但前提是在同一个文件.vue下才能被监控到。而不是外部引入脚本。

执行 npm run test:unit – -u 或 yarn test:unit -u 更新快照

二、配置

主要思路：安装 jest 的 CLI 插件

安装包：

npm install @vue/test-utils -D
npm install @vue/cli-service -D
npm install @vue/cli-plugin-unit-jest -D

文件配置和说明：

jest.conf.js 放在根目录下，或 tests 目录下，或任何你想放的位置


.eslintrc介绍:

离的最近的一个优先。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。

Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量

所有这些选项让你可以细粒度地控制 ESLint 如何对待你的代码。
eslint配置文档

setup.js介绍:
每个测试文件跑起来前，都会执行一次 setup.js，来配置测试环境
setupFiles

package.json 配置脚本和配置文件目录

"scripts": {
    "test:unit": "vue-cli-service test:unit --config ./tests/jest.conf.js",
}

若运行报错，因为它的单元测试用例的默认文件夹放置路径为 tests/unit

三、测试原则

测试原则：

组件分支渲染逻辑必须测
事件调用和参数传递一般要测

测试思路：
1、获取快照对比 （确保 UI 组件不会有意外的改变）
2、组件渲染（包括分支渲染，例如 props 和 slot 引起的分支渲染）
3、事件调用和剩下的参数传递

单元测试的 F.I.R.S.T 原则：

F Fast：测试需要频繁运行，因此要能快速运行；
I Independent：测试应该相互独立，一次只测一条分支；
R Repeatable：测试本身不包含逻辑，能在任何环境中重复；
S Self-validating：只关注输入输出，不关注内部实现；
T Timely：测试描述应该表达力极强，易于阅读；
参考

四、实例

开发模式：TDD 用例驱动开发

按照测试思路，列了如下的测试用例：

前置条件

在开始进入每个测试用例前，我们得先知道测试用例使用了哪些第三方模块，需要以 stubs 引入它们。例如 Vue、加载 elementUI 组件里用到的模块

stubs 子组件是被测组件呈现的子组件的替代品.

什么是Vue Test Utils中的"存根子组件"？

1、获取快照对比 （确保 UI组件不会有意外的改变）

2、组件渲染（包括分支渲染）

直观上看都有哪些渲染，给出用例描述（下面尽可能覆盖常用测试用例，包含 vue-test-utils 常用语法）

2.1 语法：判断是否渲染成功

用例描述：默认搜索框初始页面渲染成功，中间部分显示”请输入搜索内容“，右边显示”查询“

代码思路：整体渲染成功（含SearchBar 组件）。左边部分渲染成功，显示默认文案”请输入搜索内容“。右边部分渲染成功，显示默认文案”查询“。

2.2 语法：测试 props 的传入，是否使得 热门国家/地区 这部分渲染展示

用例描述：显示热门国家/地区

代码思路：传入 paneType、hotCountry （props） 去渲染组件，查看该部分是否被渲染，文字展示是否正确

注意：jest 里的 props 的传参格式应和组件里的使用格式一致。

例如组件在 .vue 文件里使用 ‘pane-type’，那么propsData的传值应该为 ‘pane-type’， 而不是 paneType、panetype。

如果组件在 .vue 文件里使用 'hotCountry‘，那么propsData的传值应该为 ‘hotCountry’， 而不是其他任何形式。


2.3 语法：测试 slot

用例描述：自定义搜索框右侧操作区域

代码思路：传入插槽内容，去渲染组件，并确认插槽内容是否正确渲染进去了。

测试代码：

2.4 语法：测试子组件渲染

用例描述：左侧子组件渲染

代码思路：查看子组件是否存在父组件中

3、事件调用和剩下的参数传递

3.1 其他参数传递测试：input 的 value 测试

用例描述：输入框，测试输入value与显示的内容相同, 并且修改联动

异步更新：

3.2 语法：事件调用

用例描述：查询按钮点击发送查询数据

代码思路：模拟 button 点击，触发事件 search ，并发送参数

<button @click="search"></button>
...
export default {
    data() {
    	val: ''
    },
	search(val) {
	    this.$emit('search', val)
	}
}

测试代码：search[0] 的 search 事件只有一个，故数组长度为1