在vue框架中配置测试覆盖率

什么是测试覆盖率

这个要从测试的流派说起了，测试分为黑盒测试（不知道代码如何写的）、白盒测试（知道代码是如何写的）。

测试人员通常进行黑盒测试，在集成环境下参照写好的测试用例，用鼠标点点点跑流程。按测试代码的颗粒度来划分，也可以叫集成测试，属于最大颗粒度的测试。

而开发人员对自己的代码进行测试，叫做白盒测试，一般是单元测试，属于是最小颗粒度的测试，对函数进行断言。

对一个项目来说最好是既要有黑盒测试（人肉测试）又要有白盒测试（机器测试，代码测代码）。

而测试覆盖率指的就是通过写单元测试测试项目代码，项目的逻辑有多少被测过了，这个值就是测试覆盖率。

 

为什么会有测试覆盖率

从某一方面来说能够保证代码质量，敢改。比如公司一个上古库在各个项目中都用到了，这时候你在库中发现了一个bug，你敢不敢改？我猜大概率不敢，为什么？怕其它项目被改出bug。如果库有单元测试，你改完库的bug后跑一下单元测试，全部通过。你心里多少有点底，应该不会有什么问题。

从另一方面说，测试覆盖也是一种学习的手段。学习什么呢？学习为什么有些代码没有被覆盖到，以及为什么有些代码变了测试却没有失败。理解“为什么”背后的原因，程序员就可以做相应的改善和提高，相比凭空想象单元测试的有效性和代码的好坏，这会更加有效。

 

配置测试覆盖率

测试覆盖率如何配置，vue-test-utils写的很清楚。

 

覆盖率报告

配置完成后运行

npm run test // 或者 yarn test

会得到一份报告，我们找到存放报告的路径，打开报告。

 

如何看覆盖率报告

测试报告分四个部分：

1. statement：语句覆盖率，顾名思义，有多少语句被测到。
2. branches：分支覆盖率，有多少逻辑分支被测到。
3. function：函数覆盖率，有多少个函数被测到。
4. lines：线路覆盖率，有多少个逻辑线路被测到。

 

好的测试覆盖率标准

80%以下不及格，90%以上可以用，95以上优秀。

我们看下前端框架vue的测试覆盖率：

97.38%！很明显这是一个令人放心的库。