代码测试覆盖率分析

背景

最近我们前端团队在重构大量的 UI 组件，为了保证代码质量，我要求团队中的成员必须编写单元测试，并且测试覆盖率达到 80% 以上。那么问题来了，为什么是 80% 的覆盖率？ 这是一个硬性的考核指标吗？

这里所说的测试覆盖率，是指的是开发人员写的单元测试的覆盖率，不是测试人员的功能测试的覆盖率。

哪些地方需要写单元测试？

为什么需要写单元测试就不再阐述，我相信大家都知道，特别是在持续集成过程中的重要性。但是，从我的经历来看，当前的软件市场环境中，不管是用的瀑布模式，还是螺模式，还是敏捷模式，很多软件没有写单元测试。

我也是一个程序员，每天需要写一些的业务代码，对于写单元测试来说，确实需要我很多时间和精力，因为它也需要设计用例和一些体力活。所以在我们的一些项目中也存在很多功能没有单元测试，主要原因有以下几个点:

• 业务逻辑更新太快，单元测试不可复用；
• 业务时间紧急，迭代周期时间短，没有时间写单元测试；
• UI 上很多测试，通过单元测试代码无法覆盖。

在《软件测试》一书中讲测试的原则，第一条就是：“完全测试程序是不可能的”。所以对于以上部分需不需测试，取决于你软件性质，时间和团队。但是对于满足以下几点代码我建议需要编写单元测试：

• 和安全相关的代码逻辑；
• 核心的功能模块，函数；
• 短期不会发生变化的 UI 组件；
• 提供外部调用的接口。

测试覆盖率报告

如果完全通过测试覆盖作为质量标准是存在问题的，我们在检查一个测试覆盖了的时候往往会通过一些工具去检查，程序员是可以通过一些方式让数字看上去漂亮，但是这没有意义。我们应该把它作为一种发现未被测试覆盖的代码的手段，同时也是一种学习的手段，为什么这段代码没有覆盖到？ 如果这个函数的参数发生了变化会怎么样？ 这段代码逻辑怎么这么复杂？

通过分析未被测试覆盖的代码，找到是设计问题，还功能理解有问题，还是说着就是一段废代码，它可以帮助开发者能够更好的理解背后的事情，可以检查程序中的废代码，然后在以后的设计中做很好的抽象，做可测试的代码。

各种开发语言都有对应的测试框架，可以生成测试报告，在本文中我以前端的 Javascript 为示例， karma + istanbul 工具生成报告。

• karma 是一个测试框架；
• istanbul 是 Javascript 程序的代码覆盖率工具。

怎么生成测试报告这里就不讲，有很多教程，也可以查看官方文档 istanbul。这里我们先来看一下生成出来的测试报告。 以下是 rsuite src/utils 目录下文件的测试报告, 这是打开的一个生成 html 格式的测试报告：

{% asset_img 1.png RSUITE 测试覆盖率 %}

从图中我们可以看到它有四个指标：

• Statements: 语句覆盖率，执行到每个语句；
• Branches: 分支覆盖率，执行到每个 if 代码块；
• Functions: 函数覆盖率，调用到程式中的每一个函数；
• Lines: 行覆盖率, 执行到程序中的每一行。

每一个指标都列出了覆盖的比例和数量情况，其中 Statements 与 Lines 比例和数量是一致的，那它们有什么不同呢？ 在代码中往往存在一些书写不规范的情况，比如一行多个语句，这个时候它们统计的覆盖率就会有差异。 这里又有一个值得思考的问题就是，代码覆盖率工具是怎么统计一行多个语句这种代码的？ 后面讲到统计原理的时候会讲到。

另外，我们通过图中可以看出 decorate.js 这个文件相对来说测试覆盖率较低，我们进入再具体分析一下，在那些地方没有覆盖到：

{% asset_img 2.png decorate.js 测试覆盖率 %}

从图中我们可以看到红色部分和黄色, 都是在测试用例中没有覆盖到的地方:

• getProps 函数，该函数式 export 出去的一个函数，但是在测试用例中没有覆盖到；
• typeof size === 'object' 代码块没有覆盖到；
• Component.propTypes={}.. 这里黄色部分，是一个默认值设置，说明这个默认值一直没有被使用过；

在图中左侧，显示行号的地方有一个 12x、9x、4x，这个代表了该行语句被执行的次数， 通过这个清晰的报告，我们可以在代码中看出那些函数，那些代码块没有被执行，从而去分析原因，修正测试用例，完善代码逻辑，提高质量。

生成测试报表原理

我先来看一下 istanbul 生成的测试报告中有个 lcov.info 文件, 这里我只贴出关于 decorate.js 文件这部分的内容:

SF:/Users/simonguo/workspace/rsuite/src/utils/decorate.js FN:25,getClassNames FN:39,getProps FN:41,(anonymous_2) FN:50,decorate FN:51,(anonymous_4) FNF:5 FNH:3 FNDA:237,getClassNames FNDA:0,getProps FNDA:0,(anonymous_2) FNDA:12,decorate FNDA:12,(anonymous_4) DA:4,1 DA:11,1 DA:18,1 DA:27,237 DA:28,237 DA:30,237 DA:32,237 DA:40,0 DA:41,0 DA:42,0 DA:44,0 DA:51,12 DA:52,12 DA:53,12 DA:54,12 DA:56,12 ... 

FN 代表函数， 25,39,41,50,51 这些行分布对应源代码中的函数开始的行号， FNF:5 代表一共有 5 个函数 FNH:3 其实 3 个函数被测试所覆盖， FNDA:237,getClassNames 代表了 getClassNames 这个函数被执行了 237 次。 ...

等等，在文件中详细记载了行号，以及代码的执行情况，大家可以再对照前面的那张“测试覆盖率”图片进行分析，可以详细的看出整个 lcov.info 文件中记录内容。有了这样一份记录信息就能够生成出一份可视化的测试报告，也可以上传到 coveralls，展示给大家。 那么这里需要思考的问题是，这样一份数据统计记录是怎么统计出来的呢？

如果希望有些代码被忽略，不进入覆盖统计，istanbul 提供注释语法 ，查看Ignoring code for coverage purposes

Javascript 覆盖率统计的核心思想，是在源代码相应的位置注入设定的统计代码，当执行测试代码的时候，代码运行到注入的地方，就会执行对应的统计代码，生成覆盖率统计报告。大概步骤如下：

• 第一步：生成语法树，对源代码进行语法分析，解析，然后生成语法树。

生成出来的结构如下，这段代码来自 esprima，A simple example on Node.js REPL:

> var esprima = require('esprima'); > var program = 'const answer = 42'; > esprima.tokenize(program); [ { type: 'Keyword', value: 'const' }, { type: 'Identifier', value: 'answer' }, { type: 'Punctuator', value: '=' }, { type: 'Numeric', value: '42' } ] > esprima.parse(program); { type: 'Program', body: [ { type: 'VariableDeclaration', declarations: [Object], kind: 'const' } ], sourceType: 'script' } 

• 第二步：注入统计代码，在语法树相应的位置注入统计代码，在程序执行到这个位置的时候对相应的全局变量赋值，确保执行之后能够根据全局变量知道代码的执行流程。到这里就解决了前面说的“一行如果有多个语句怎么统计？”的问题。
• 第三步：再把注入统计代码的语法树，生成对应的 Javascript 代码。

以下是 escodegen 的一段示例代码

// A simple example: the program escodegen.generate({ type: 'BinaryExpression', operator: '+', left: { type: 'Literal', value: 40 }, right: { type: 'Literal', value: 2 } }); // produces the string '40 + 2'. 

• 第四步：将生成好的 Javascript 代码交给执行环境（ nodejs 或者浏览器）运行。
• 第五步：执行单元测试，产生的统计信息，放到全局标量中。
• 第六步：根据全局标量中的覆盖率信息生成特定格式的报告，这样我们就看到了 lcov.info 文件和 .html 文件。

这个步骤是依据 istanbul 统计 javasript 的原理，其他语言的一些统计工具没有接触过，但是基本的思想应该都是大同小异的。在 javasript 对语法分析，生产语法树再还原 javasript 代码是有一些开源工具的，所以如果有兴趣的童鞋要自己实现一套代码覆盖率的功能，只需要写好注入的统计代码逻辑和运行环境的处理。

总结

对一个持续集成的项目来说，单元测试非常重要，同时最好具有较高的测试覆盖率。再次强调测试覆盖率是一种发现未被测试覆盖的代码的手段，它不是一个考核质量的目标。

另外，我们维护的开源项目 rsuite ,是一套 React 的 UI 组件库，如果你对此感兴趣，或者使用中遇到任何问题，可以联系我们 Discord: join chat

本文作者：郭小铭