前端自动化测试主要应用在组件开发以及公共组件库的开发的一般不怎么变化的逻辑使用的时候才会用到，像是一般的业务代码开发平常是用不多的。因为业务会经常变化。 分类：
单元测试（unit Testing）:对程序中最小的单元进行测试，测试一个函数，一个模块、一个组件等
集成测试（integration Testing）将已测试过的单元测试函数进行组合集成暴露出的高层函数或者类的封装，对这些函数或者类进行测试。
端到端的测试（E2E Testing）打开应用程序模拟输入，检查功能以及界面是否正确。
TDD&BDD
TDD: 测试驱动开发 （Test-Driven Development) 先编写单元测试用例代码，一般都是单元测试，白盒测试
BDD: 行为驱动开发 （Behavior-Driven Development）业务，开发，测试合作分析需求根据需求开发保证程序效果与用户需求一致。根据用户行为编写测试用例，集成测试，黑盒测试。
测试框架
Karma: 跨浏览器的测试能力，可以在浏览器中执行测试用例
Mocha: 需要配合其他库一起使用，如 chai sinon
Jest: faceBook推出的，集成了Mocha,chai,jsdom,sinon等功能
自动化测试原理
给定输入得到的输出与期盼的输出是不是一致，然后进行报错对比判断 比如测试一个add方法
function add(a,b) {
return a+b;
}
function test(title, fn) {
try {
fn();
console.log(title, '测试成功')
} catch (error) {
console.log(error);
console.log(title, '测试失败');
}
}
function expect(ret) {
return {
toBe(arg) {
if (ret !== arg) {
throw Error(`预期与实际不符，预期${arg},实际是${ret}`)
}
}
}
}
test('测试数字相加的方法', () => {
expect(add(1,3)).toBe(4)
}) // 测试成功
test('测试字符串和数字相加的方法', () => {
expect(add('0',3)).toBe(3)
}) // 会报错
Vue测试方法
api地址： vue-test-utils.vuejs.org/zh/guides/#…
1、首先安装node14以上版本 $ node -v v14.16.0
2、npm install @vue/cli -g
3、 vue create faptvue
用管理员权限去执行cmd，按住方向箭头选择 Manually select features项 回车
通过箭头按键以及空格按键选择选项Unit Testing必须选择
箭头按钮选择3.X回车键就执行安装了
最终结果是 就安装成功了
App.vue文件的代码
<template>
<div id="nav">
<h1>{{message}}</h1>
<button type="submit" value="点我" @click="update"></button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'init'
}
},
created() {
this.message = "created";
},
methods: {
update() {
this.message = 'update';
}
}
}
</script>
在项目的路径 \vuefapt\tests\unit下面新建文件夹 test.spec.ts
import Appd from '../../src/App.vue';
import {mount, VueWrapper} from '@vue/test-utils';
import { createApp, h, nextTick } from 'vue'
// console.log(Vue);
describe('app测试', () => {
it('组件初始状态测试', () => {
expect(typeof Appd.created).toBe('function')
})
it('组件的data', () => {
expect(Appd.data().message).toBe('init')
})
it('测试按钮点击', () => {
const w = mount(Appd);
w.find('button').trigger('click')
expect(w.vm.message).toBe('update')
nextTick(() => {
expect(w.find('h1').html()).toBe('<h1>update</h1>')
})
})
})
配置package.json加上代码覆盖率的查看代码
"jest": {
"preset": "@vue/cli-plugin-unit-jest",
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"]
}
"test:unit": "vue-cli-service test:unit --coverage",
然后可以执行 npm run test:unit 执行单元测试 结果如下：
然后可以看到目录 自动化测试\02\vuefapt\coverage\lcov-report\index.html 在浏览器中打开可以看到测试的代码覆盖率
标红的话表示此处代码没有被测试到
