测试覆盖率
jest?自带覆盖率，如果?用的 mocha，需要使?用 istanbul来统计覆盖率。（所以我推荐jest）
npm run test:unit
这个明显是不通过的，需要将途中的3改为正确的‘12’。改完后再次执行命令。
这么一来测试是通过了，但是好像无法直观看到覆盖率，所以我们来对package.json中的jest进行下修改，在下图的位置中：
改为：
"jest": {
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"testURL": "http://localhost"
}
倘若有个jest.config.js那么就在 moduleFileExtensions 上一行加入，这个文件是对jest的配置（没有不必改）：
"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"]
改好后，我们再来执行下npm run test:unit命令。
到此，我们就能清晰看见测试的一个覆盖情况！这个覆盖率会生成一个报告，生成的报告文件在coverage目录下，打开可以看到这么个鬼东西：
这么一来，测试代码覆盖情况就一览无遗了。
这个测试报告可以很精确的看到我们哪些没测试，哪些测试了。
我在zhifeiji.vue里加点东西不测试，来看看结果：
<template>
<div>
<span id="msg">{{ msg }}</span>
<span>{{ msg1 }}</span>
<button class="btn" @click="changeMsg">点我</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "vue test",
msg1: "你好",
msg2:'这个不测试'
};
},
created() {
this.msg = "aftermounted";
this.msg2 = '不测试扣了我100块';
},
mounted() {
this.msg1 = "测试下vue组件";
},
methods: {
changeMsg() {
if(this.msg === '1'){
this.msg = "click false";
}else{
this.msg = "click over";
}
},
},
};
</script>
上面代码中msg2有关的都是没测试的，执行下测试命令看报告：
红框部分可见着这次zhifeiji.vue覆盖率没有100%了，上main蓝色的我们可以点击进去。
一步步点进来，会来到被测试的代码文件。
如何测试不通过就阻止代码git提交
安装husky：
cnpm i husky –save
# yarn、cnpm、npm 随意
配置husky，在package.json配置：
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test",
"...": "..."
}
}
当然这是文档上的案例，我们改下：
"husky": {
"hooks": {
"pre-commit": "npm run test:unit"
}
}
代表再提交（commit）前先执行npm run test:unit。
验证
修改测试代码文件zhifeiji.spec.js:
由：
it("测试新建完毕后，create生命周期后的数据", () => {
//created
let vm = new Vue(zhifeijiComp).$mount();
expect(vm.msg).toBe("aftermounted");
});
改为：
it('测试新建完毕后，create生命周期后的数据',() => {
//created
let vm = new Vue(zhifeijiComp).$mount()
expect(vm.msg).toBe('aftermounted1')
})
这样测试肯定是不通过的。
这时，测试不通过，我们再来提交代码，add后再commit：
可见commit是失败了，没有通过！
Tip：如果你们这么配置husky不生效，请降低husky版本或者使用新的husky的方式，husky在6.0.0版本开始就使用了新的配置方法，具体看此文：blog.csdn.net/MrWeb/artic…
这时我们如果想让他通过的话就得改代码了，让其正确了才能提交，这样才是安全可靠的一份代码。
修改操作：
1.注释掉tests目录下e2e中的test.js，e2e我们后面讲。
2.example.spec.js中的3修改为'12'
3.zhifeiji.spec.js的aftermounted1恢复为aftermounted；
经过这三步操作，我们就算是解决了测试的报错，然后commit：
代码提交成功！
E2E测试
e2e针对应用，站在测试人员的角度，没有什么mount 加载，只有按钮 页面，输入框，文本等。
借?浏览器?的能力，站在?户测试?员的角度，输?框，点击按钮等，完全模拟用户，这个和具体的框架关系不大，完全模拟浏览器行为将views下的Home组件的：
<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>
相关代码恢复。
看看tests目录下e2e目录下的spec下的test.js，有这么一段：
// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
it('Visits the app root url', () => {
// cy.visit('/')
// cy.contains('h1', 'Welcome to Your Vue.js App')
})
})
将cy注释的那块恢复。
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js App')
})
})
这是测试代码，如果我们不做前面的恢复操作的话，测试肯定是不通过的执行npm run test:e2e，进行测试。
项目会启动，并且会弹出一个有ok的弹窗，我们直接确定，还会有测试文件的js，选择对应的测试文件点进去：
这样代表测试通过了！
再来测试一个about页：
// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js App')
})
it('测试about页', () => {
//访问about
cy.visit('about')
cy.contains('h1', 'This is an about page')
})
})
Tip：about页面测试不通过的，请将路由模式改为history或者将测试文件test.js中的cy.visit('about')改为cy.visit('#/about')
后测的about，就最后打开了about页，也停留在了about页面。这些都是页面某个元素的文本的测试，那么我们再来个交互试试，在我们的zhifeiji组件上有个点击事件，我们来试试：
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js App')
})
it('测试about页', () => {
//访问about
cy.visit('#/about')
cy.contains('h1', 'This is an about page')
})
it('zhifeiji组件',() => {
//访问根目录
cy.visit('/')
cy.contains('#msg','aftermounted')
cy.get('button').click()//点击button元素
cy.contains('#msg','click over')
})
})
左边那一条条可以点击，点击不同的项，也会进入不同的事件状态，例如我点了CONTAINS，文本变成了click over。
题外话：测试页面前后差异，或者两个页面的差异可以用page-monitor；地址：github.com/fouber/page…
好了，今天的前端自动化测试就讲到这里。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
