前端自动化测试最佳实践
前端需要写自动化测试吗？那又该怎么写呢？【建议收藏】 【摘要】 为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化测试代码：修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码重构困难代码质量差，参差不齐增加自动化测试后：我们为核心功能编写测试后可以保障项目的可靠性强.为什么需要写前端自动化大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？不写前端自动化测试代码：· 修改某个模块功能时，其它模块也受影响，很难快速定位bug· 多人开发代码越来越难以维护· 不方便迭代，代码重构困难· 代码质量差，参差不齐增加自动化测试后：· 我们为核心功能编写测试后可以保障项目的可靠性· 强迫开发者编写更容易被测试的代码，提高代码质量· 编写的测试有文档的作用，方便维护· 开发速度有所变慢，因为要多写一份测试代码（手动滑稽）实际上仅仅就为了可靠性、码质量、可维护性是完全值得你去写前端自动化的。作为一名前端开发人员掌握自动化测试技术是必不可少的，就算你工作中不用，也可以放在你的简历中，它是一道靓丽的风景线。测试介绍测试在工作中分为以下两个大块：黑盒测试和白盒测试· 黑盒测试一般也被称为功能测试，黑盒测试要求测试人员将程序看作一个整体，不考虑其内部结构和特性，只是按照期望验证程序是否能正常工作。（薪资12k见顶）· 白盒测试是基于代码本身的测试，一般指对代码逻辑结构的测试。(薪资10k起)测试分类单元测试(Unit Testing)单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件集成测试(Integration Testing)将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。端到端测试(E2E Testing)打开应用程序模拟输入，检查功能以及界面是否正确。不过作为一名前端，我们需要写哪些测试呢？答案是：· 单元测试· 端到端测试(E2E)接下来就带你们来实践一下。新建项目我们新建个vue2的项目，选择下面这些注意我们到了选择单元测试框架这一步的时候，选择jest：然后端对端我们选择：这样继续安装就好了，直到项目建好。单元测试单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。例如一个函数。单测针对组件 或者函数 或者模块（开发人员知道具体逻辑）前面建项目的时候提到了jest，实际上在vue中，推荐 Mocha+chai 或者jest来做单元测试，但咱们这边使用 jest 来演示，两者语法基本致。测试某个函数在src目录下建立utils目录，再在utils下建立index.js，并写个add函数导出：export function add(x,y) return x + y在tests下的unit下的example.spec.js中修改（当然也可以新建一个*.spec.js,固定格式的文件）/ import shallowMount from 'vue/test-utils'/ import HelloWorld from '/components/HelloWorld.vue'/ describe('HelloWorld.vue', () => / it('renders props.msg when passed', () => / const msg = 'new message'/ const wrapper = shallowMount(HelloWorld, / propsData: msg / )/ expect(wrapper.text().toMatch(msg)/ )/ )import add from "/utils/index.js"describe("测试加法函数", () => /测试代码可读性最好 /分组 it("一个具体的功能测试，测测试数字相加", () => expect(add(1, 2).toBe(3); ); it("一个具体的功能测试，测测试数字和字符串相加", () => expect(add("a", 2).toBe("a2"); ); it("一个具体的功能测试，测测试数字字符串相加", () => expect(add("1", 2).toBe(3); ););执行：npm run test:unit显然"1" + 2 不是3，所以测试是报了错的。这个案例我们就用到了4个api。api介绍· describe ： 定义一个测试套件· it ：定义一个测试用例· expect ：断言的判断条件· toBe ：断言的比较结果测试vue组件components下新建 zhifeiji.vue 文件：<template> <div> <span> msg </span> <span> msg1 </span> <button class="btn" click="changeMsg">点我</button> </div></template><script>export default data() return msg: "vue test", msg1: "你好", ; , created() this.msg = "aftermounted" , mounted() this.msg1 = "测试下vue组件" , methods: changeMsg() this.msg = "click over" , ,;</script>views目录下的home组件中引入：<template> <div class="home"> <img alt="Vue logo" src="./assets/logo.png" /> <zhifeiji_comp></zhifeiji_comp> </div></template><script>/ is an alias to /src/ import HelloWorld from "/components/HelloWorld.vue"import zhifeiji_comp from "/components/zhifeiji.vue"export default name: "home", components: / HelloWorld, zhifeiji_comp, ,;</script>在tests目录下的unit目录下建立 zhifeiji.spec.js：import Vue from "vue"import zhifeijiComp from "/components/zhifeiji.vue"import mount from "vue/test-utils"describe("测试zhifeiji组件", () => it("测试初始化的data", () => expect(zhifeijiComp.data().msg).toBe("vue test"); ); /created和mounted里数据测试都是一样的 it("测试新建完毕后，create生命周期后的数据", () => /created let vm = new Vue(zhifeijiComp).$mount(); expect(vm.msg).toBe("aftermounted"); ); it("测试新建完毕后，create生命周期后的数据", () => /mounted let vm = new Vue(zhifeijiComp).$mount(); expect(vm.msg1).toBe("测试下vue组件"); ); /点击事件测试 it("测试点击后，msg的改变", () => / $mount处理不了用户交互，所以我们要用到vue官方推荐的vue/test-utils let wrapper = mount(zhifeijiComp); expect(wrapper.vm.msg).toBe("aftermounted"); /点击一下 wrapper.find(".btn").trigger("click"); expect(wrapper.vm.msg).toBe("click over"); ););如果测试用户交互的话，需要用到官方推荐的vue/test-utils，执行cnpm i vue/test-utils -save，相关文档在vue官网在 vue/test-utils 中引入mount替代vue的 $mount 的是因为 $mount 的是虚拟的，存在虚拟内存中，处理不了dom，所以用mount（对不对我不知道，这句话仅供参考）到这里为止的话，我这个vue组件的测试，应该是通过的才对，执行npm run test:unit验证一下：测试覆盖率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": "/(.*
