未名企鹅极客 | 如何通过前端测试提高交付质量

如何通过前端测试提高交付质量

01
前端测试的意义

平时工作中写的公共组件和工具函数，随着业务复杂度越来越高需要添加修改一些功能，每次修改代码都要测试好几遍保证以前的功能不受影响。而且由于是公共组件，每次修改还得让其他小伙伴更新组件，很是影响开发效率，所以一定要写测试，对自己负责，也是对他人负责。

02
前端测试介绍

1. 单元测试（unit测试）是把代码看成是一个个的通用组件或函数，从而实现每一个单元的单独测试。测试内容主要是组件内每一个逻辑的返回结果是不是和期望值一样。
2. 端到端测试（e2e测试）e2e测试是把我们的程序看成是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

两者的存在都是很有意义的：
unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求，这对前端的逻辑和交互开发效率以及交付质量起到非常至关重要的作用。

3. 前端测试和后台的测试还是有很多不同点的，后台更关注对数据处理逻辑准确性的测试，而前端测试需要结合用户的操作、请求、交互方式、展示等等条件来进行测试。
4. 前端单元测试主要包括UI测试，快照测试，组件测试和函数测试。
   

03
单元测试的好处

1. 减少bug；
2. 提高代码质量；
3. 快速定位问题，减少调试时间；
4. 单元测试还是一份很好的业务文档，每项测试的描述都可以体现业务逻辑；
5. 降低人工测试的成本，虽然编写及维护测试脚本需要付出额外的成本，但从长远来看，这些成本通常远比采用人工测试要低的多；
6. 保证该库在后续的开发维护过程中不会出现意料之外的问题；在修改代码比如优化、重构、修改或添加新的功能等后，往往需要重新进行测试，这时人工测试通常无法保证覆盖到每一个测试点，这时就会为项目带来隐患；
7. 前端测试对项目的交付质量提供了更多的保障。

04
采用 jest + Vue Test Utils进行单元测试的原因

1. Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，配置较少，对Vue框架友好。
2. Vue Test Utils 是 Vue.js 官方的单元测试实用工具库，为Jest和Vue提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。
3. Vue-cli 默认的单元测试也是使用的这套方案。

05
怎样写单元测试

举个例子
代码如下：

<h1>Welcome to Your Vue.js App</h1>

测试脚本
代码如下：
import HelloWorld from ‘@/components/HelloWorld’;

import { mount, createLocalVue, shallowMount } from ‘@vue/test-utils’

describe(‘HelloWorld.vue’, () => {

it(‘should render correct contents’, () => {

const wrapper = shallowMount(HelloWorld);

let content = wrapper.vm.$el.querySelector('.hello h1').textContent;

expect(content).to.equal('Welcome to Your Vue.js App');

}); });

1. 测试脚本的写法
   Describe是"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（“加法函数的测试”），第二个参数是一个实际执行的函数。
   It是"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称，第二个参数是一个实际执行的函数。

2. 断言库的用法
   上面的测试脚本里面，有一句断言：
   expect(content).to.equal(‘Welcome to Your Vue.js App’);
   所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。上面这句断言的意思是，变量content应等于’Welcome to Your Vue.js App’。
   所有的测试用例（it块）都应该含有一句或多句的断言。它是编写测试用例的关键。

3. 查看测试结果
   最后运行一下npm run unit，来看结果：
   

图片结果显示测试通过。

打开coverage下的index.vue查看代码覆盖率：
因为这是一个刚新建的项目，代码非常简单，所以覆盖率是100%。代码覆盖率是一个客观的数据，不能完全真实表示项目的测试情况，但是具有不错的参考价值。在多人开发的团队中，覆盖率可以作为一个硬性的标准。

06
如何做好组件单元测试

1. 测试文件统一在src/test目录中维护；

2. 测试文件命名与Vue组件命名保持一致，后面以.spec.js结尾；

3. 针对最小功能单元的测试用例主要集中在该函数内，测试用例使用it(“功能描述”,()=>{})函数描述用例单元；

4. 一组功能集合测试使用describe(“功能集合描述”,()=>{})函数描述功能集合，一个测试文件只能描述一个功能集合，这个功能集合可以是一个Vue组件，也可以是一个模块；

5. UI测试套件统一使用vue-test-utils；

6. Vue组件测试用例必须包含：
   1）API属性覆盖性测试用例；
   2）DOM快照比对；
   3）私有Utils函数测试用例，千万不能忽略Utils函数的测试用例，很多时候，bug就出在这上面。

7. 对DOM结构做用例校验，一个标准的Vue组件测试用例的输入往往是组件配置或交互事件，输出则是具体的DOM结构，我们的用例校验也都是对DOM结构做用例校验；

8. bugfix和功能新增必须要有对应的单元测试用例才能发布；

9. 团队协作，PR必须要有对应的单元测试用例才能发布。

07
单元测试面临的问题
这里已经了解了前端单元测试的意义和如何写出好的单元测试，下个问题就是如何提高测试用例编写效率。
有了Jest，我们在写单元测试用例的配置成本已经很低了，所以，单元测试的成本，更多的是编写测试用例上，提高测试用例编写效率，我们主要从几个方向来提高：

1. 定制标准用例模板，做填空题，而非选择题；
2. 制定单元测试开发规范，帮助写出统一一致的单元测试用例（规范上一节已经说过了），也方便后续协同开发维护；
3. 渐进式编写测试用例，借助bugfix和功能添加的过程逐步完善测试用例，最大化减轻前期时间压力。

文 / Sky
编辑 / Crystal

关于未名企鹅

未名企鹅以“连接健康”为使命，致力于提供生命健康领域的大数据产品和解决方案，帮助客户实现数据驱动的业务增长。

未名企鹅中的“未名”代表北大，寓意人文精神；“企鹅”代表腾讯，象征科技。由一群来自腾讯的北大校友们于2015年创立。生命健康领域正是体现人文关怀的产业，公司以未名企鹅命名是希望以人文情怀加上科技力量来推动生命科学行业数字化发展。