「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」
通常写完库的测试用例，总要跑跑覆盖率，看看测试用例写得如何，jest刚好也支持查看覆盖率，对应的指令是：jest --coverage。当然在继续往下看，如果还没搭建jest环境，可以先搭建，毕竟实践出真知。下面贴上快速搭建环境的文章：
Jest ｜ 测试框架实践之-基础知识和环境搭建。
编写测试用例
如何编写测试用例，已经存在很多教程，官方也有非常多例子，因此这里我们只写两种很常用的：同步代码和异步代码的测试用例。
- 同步代码
// sum.test.ts
const sum = (a:number, b:number) => a + b
test('两数相加', () => {
// 推断 1 + 1 = 2
expect(sum(1, 1)).toBe(2)
})
- 异步代码
// async.test.ts
const getData = (type: string) => type === 'get'?Promise.resolve(1):Promise.reject(2)
test('测试异步', async () => {
expect.assertions(1);
await expect(getData('get')).resolves.toEqual(1)
})
关于如何编写更多场景的测试用例，可前往官网查看。下面看看如何解读覆盖率。
解读覆盖率
当我们执行jest --coverage会在当前文件生成覆盖率文件夹coverage，如下：
这时候我们可以找到
lcov-report/index.html文件，然后在浏览器中打开，此时我们便可以查看当前项目的测试用例书写覆盖率了。这里以我写的工具库为例子：
表格中罗列了所有工具类库的测试用例，存在几下几个指标：
- Statements 语句覆盖率，它其实对应的就是js语法上的语句，js解析成ast数中类型为
statement。 - Branches 分支覆盖率，通俗点理解就是
if/else这类条件 - Functions 函数覆盖率
- Lines 行数覆盖率，就是代码执行了多少行
文件中，我们发现url-utils文件中的Branches覆盖率不高，才达到64.29%，那么如何查看具体哪些代码没覆盖到呢？很简单，点击对应的文件名就可以进入查看了，效果如下：
图中黄色块代表的是测试用例没有测试到的方式，当然你也可以按快捷键
n或者j去查看下一个没有被覆盖到的代码块。图中黄块未覆盖到的，刚好也正是条件语句，符合Branchs的测试覆盖率。
总结
至此便完成了基本的测试用例编写，以及测试用例生成，并且能够查看测试用例覆盖率如何，以此来完善整体测试用例的编写，帮助代码达到完善健硕的目的。关于覆盖率是如何生成的，它的原理是怎么样的呢？下一篇再说。
