一、快照知识点补充

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

快照介绍

每当想要确保生成的 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
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐