前端单测学习（9）—— 覆盖率报告

站长

2022年11月12日 17:58 · 阅读数 35

前言

在往期的文章中，我们已经学习了各种场景下的单测，今天我们来补充一下覆盖率报告的相关功能，我们单测使用的是jest，jest除了之前提到过的各种断言等能力之外，它还提供了非常完善的单测覆盖率报告能力，可以对我们项目的整体单测覆盖率，具体到每个单测文件都有比较详细的分析，帮助我们提高项目单测覆盖情况，进而提高项目的质量。

项目重新走读

关于jest

大家可以看下我们的项目工程，我们采用的是比较常见的CRA，通过react-script运行的test命令，我们通过查看node_modules可以看到react-script里面是内置引用的jest，所以在我们的项目中不必再引入jest，Jest是一个基于node环境的runner，也就是说我们的测试用例运行在一个Node环境而不是我们常见的一个真实浏览器环境，只是这就是为什么我们往期的文章里面需要用到很多来模拟一些浏览器环境的mock，这样的方式可以让我们更加快速的进行迭代和执行我们的测试用例。当然Jest通过jsdom为我们提供了例如window这样的一些浏览器全局实例，不过这只是一个近似的模拟，不完全等同于浏览器的window。Jest的价值是为开发者提供逻辑和组件的单元测试，而不是一些DOM的具体行为，所以这也不难理解Jest为什么是基于node环境的。如果我们是有浏览器相关的一些测试的话，这个更加贴近于我们的e2e测试啦，这里我们就不展开讨论。

文件名的约定

jest会检索约定好的文件名进行单测的运行，所以我们在创建单测文件的时候注意最好是跟约定的文件保持一致，这样也方便团队内其他同学的开发，具体约定有下面这些

__tests__目录下的ts或者js文件，任何目录下的__tests__目录都可以被识别到
文件名带有.test.js或者.test.ts后缀的
文件名带有.spec.js后缀的单测文件或者__tests__目录跟要测试的文件放在同个目录，方便我们查找

运行细节

默认运行test命令的时候，jest只会运行基于上个commit管理变化文件的测试用例，这是一个设计优化点，不重复运行已经提交过的测试用例，这种在当项目中有比较多的历史测试用的时候优化会比较明显，可以让我们的测试用例运行更快，让结果更加贴近我们的提交预期，过往的测试用例则不需要重复做无意义的执行。那如果我们需要运行全量的测试用例的时候怎么办呢，其实在之前的运行中我们已经看过了，提示运行的时候增加a命令即可运行全量的测试用例。

生成测试覆盖报告

我们可以通过执行下面这样的命令来生成我们覆盖率报告

pnpm test -- --coverage a

前端单测学习（9）—— 覆盖率报告可以看到在我们的控制台出现了一个报告，为了方便我们运行，我们在package.json中的scripts加上我们的这个覆盖率的命令

"utCoverage": "pnpm test -- --coverage a"

现在我们只要执行这个命令就可以，在CRA创建的项目中，我们可以通过在package.json中配置jest相关的参数，进而满足我们对jest的一些要求，如果是其他项目的话，我们可以创建一个jest.config.js来设置具体的配置。我们从上面的报表可以看到，这里运行到了一些我们不是想要的测试用例，一个解决方法是删除这些测试用例，另外一个比较好的解决方案，就是在package.json中配置我们jest覆盖率报告要收集哪些测试用例文件具体如下

"jest": {
    "collectCoverageFrom": [
      "src/components/**/*.{j,t}s?(x)",
      "src/hooks/**/*.{j,t}s?(x)",
      "!<rootDir>/node_modules/"
    ]
  }

我们简单走读一下这个配置，相当于给jest的覆盖率收集添加了一个白名单，这里是可以通过设置正则表达式的形式来配置的，我们指定了components以及hooks目录下的文件，当然是有限制文件后缀名单，然后我们是不希望运行node_modules下面的，所以再加一个过滤node_modules。配置完成之后我们重新运行下单测

pnpm utCoverage

控制台显示如下前端单测学习（9）—— 覆盖率报告这里我们可以对比来看，现在我们运行的就是我们指定目录下的所有测试用例。

覆盖率阈值

我们执行覆盖率报告之后，jest可以得到一些指标，这些指标反应了我们单测覆盖率和代码质量的一些参数，我们通过配置这些参数，可以给我们的代码提交增加一些准入规则，通过指标的阈值，可以避免我们得每次commit导致代码质量的劣化，对于比较看重质量的团队是比较有参考价值。这里我们在上面的基础上再设置coverageThreshold，设置具体指标的阈值，当运行覆盖率报告之后得到的结果没有达到阈值的时候，这时候就给我们报提示。具体配置如下

"jest": {
    "collectCoverageFrom": [
      "src/components/**/*.{j,t}s?(x)",
      "src/hooks/**/*.{j,t}s?(x)",
      "!<rootDir>/node_modules/"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 90,
        "lines": 90,
        "statements": 90
      }
    }
  }