测试分类
常⻅的开发流程⾥，都有测试⼈员，这种我们称为⿊盒测试，测试⼈员不管内部实现机制，只看最外
层的输⼊输出，⽐如你写⼀个加法的⻚⾯，会设计N个case，测试加法的正确性，这种代码⾥，我们
称之为E2E测试。
更负责⼀些的 我们称之为集成测试，就是集合多个测试过的单元⼀起测试。
还有⼀种测试叫做⽩盒测试，我们针对⼀些内部机制的核⼼逻辑 使⽤代码 进⾏编写 我们称之为单元
测试。
准备⼯作
推荐⽤使⽤Jest作为测试框架
新建vue项⽬，⼿动选择特性，添加Unit Testing和E2E Testing
单元测试解决⽅案选择：Jes端到端测试解决⽅案选择：Cypress
单元测试
单元测试（unit testing），是指对软件中的最⼩可测试单元进⾏检查和验证。
新建test/unit/kba.spec.js， *.spec.js 是命名规范，写下⼀下代码
function add(num1, num2) {
return num1 + num2
}
// 测试套件 test suite
describe('Kba', () => {
// 测试⽤例 test case
it('测试add函数', () => {
// 断⾔ assert
expect(add(1, 3)).toBe(3)
expect(add(1, 3)).toBe(4)
expect(add(-2, 3)).toBe(1)
})
})这⾥⾯仅演示了toBe，更多断⾔API（https://jestjs.io/docs/zh-Han...）
执⾏单元测试
npm run test:unit
测试Vue组件
创建⼀个vue组件components/Kab.vue
{{ message }}
测试该组件，
// 导⼊ Vue.js 和组件，进⾏测import Vue from 'vue'
import KbaComp from '@/components/Kba.vue'
describe('KaikebaComp', () => {
// 检查原始组件选项
it('由created⽣命周期', () => {
expect(typeof KbaComp.created).toBe('function')
})
// 评估原始组件选项中的函数的结果
it('初始data是vue-text', () => {
// 检查data函数存在性
expect(typeof KbaComp.data).toBe('function')
// 检查data返回的默认值
const defaultData = KbaComp.data()
expect(defaultData.message).toBe('hello!')
})
})检查mounted之后
it('mount之后测', () => {
const vm = new Vue(KbaComp).$mount()
expect(vm.message).toBe('开')
})⽤户点击
和写vue没啥本质区别，只不过我们⽤测试的⻆度去写代码，vue提供了专⻔针对测试的 @vue/testutils
import { mount } from '@vue/test-utils'
it("按钮点击后", () => {
const wrapper = mount(KbaComp);
wrapper.find("button").trigger("click");
// 测试数据变化
expect(wrapper.vm.message).toBe("按钮点击");
// 测试html渲染结果
expect(wrapper.find("span").html()).toBe("按钮点击");
// 等效的⽅式
expect(wrapper.find("span").text()).toBe("按钮点击");
});测试覆盖率
jest⾃带覆盖率，package.json⾥修改jest配置
"jest": {
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"],
}若采⽤独⽴配置，则修改jest.config.js:
module.exports = {
...
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"]
}在此执⾏npm run test:unit
Vue组件单元测试（https://cn.vuejs.org/v2/cookb...）
cookboVue Test Utils使⽤指南（https://vue-test-utils.vuejs....）
E2E测试
借⽤浏览器的能⼒，站在⽤户测试⼈员的⻆度，输⼊框，点击按钮等，完全模拟⽤户，这个和具体的
框架关系不⼤，完全模拟浏览器⾏为。
**运⾏E2E测试
npm run test:e2e**
修改e2e/spec/test.js
// https://docs.cypress.io/api/introduction/api.html
describe('端到端测试，抢测试⼈员的饭碗', () => {
it('先访问⼀下', () => {
cy.visit('/')
// cy.contains('h1', 'Welcome to Your Vue.js App')
cy.contains('span', '开')
})
})测试未通过，因为没有使⽤Kba.vue，修改App.vue
测试⽤户点击
// https://docs.cypress.io/api/introduction/api.html
describe('端到端测试，抢测试⼈员的饭碗', () => {
it('先访问⼀下', () => {
cy.visit('/')
// cy.contains('h1', 'Welcome to Your Vue.js App')
cy.contains('#message', '开')
cy.get('button').click()
cy.contains('span', '按钮点击')
})
})