前端单元测试

测试类型

unit测试

1. 主要对组件进行测试。
2. 数据的有效性测试
3. 关注组件本身。

vue 单元测试的范围仅限于数据流动是否正确，逻辑渲染是否正确（v-if v-show v-for），style 和 class 是否正确，我们并不需要关系这个组件在浏览器渲染中的位置，也不需要关系对其它组件会造成什么影响，只要保证组件本身正确即可。如表单校验、计算金额等校验等。

E2E 测试

1. 测试真实DOM是否满足预期。
2. 测试业务流程
3. 变手动点点点为自动化处理

单元测试原因

1. 增强代码健壮性 增删改代码后保证不影响原先功能
2. 降低测试人员压力 提高测试效率
3. 提高逼格

vue项目中进行单元测试

安装环境

1. 安装 Jest

$ npm install --save-dev jest @vue/test-utils

2. 处理单文件组件

npm install --save-dev vue-jest

3. 配置 Babel

npm install --save-dev babel-jest

具体参考Vue Test Utils选择一个测试运行器

编写测试用例

如下是一个表单的校验测试

import {
    mount, createLocalVue } from '@vue/test-utils'
import iview from 'iview'
import AddForm from '@/pages/config-manager/customer-complain-config/finish-rule-config/finish-rule/components/AddEditModal.vue'
import flushPromises from 'flush-promises'

const localVue = createLocalVue()
localVue.use(iview)
const selectArr = {
    "productChildTypeList": [{
    "productTypeId": 8, "productTypeName": "门锁S2" }, 
// ...
], "complainTypeList": [{
    "complaintTypeId": 2, "complaintTypeName": "客诉类型1", "createTime": "2019-10-10T12:07:54", "createUser": "", "enableState": 1, "id": 1, "updateTime": "2019-10-11T17:44:28", "updateUser": "", "version": 1 }, 
// ...
], "responsibleReasonList": [{
    "createTime": "2019-10-10T12:11:07", "createUser": "", "enableState": 1, "feedbackReason": "反馈原因1", "feedbackReasonId": 2, "id"