Jest | 测试框架实战之-测试用例编写与覆盖率解读

·  阅读 1814
Jest | 测试框架实战之-测试用例编写与覆盖率解读

「这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

通常写完库的测试用例,总要跑跑覆盖率,看看测试用例写得如何,jest刚好也支持查看覆盖率,对应的指令是:jest --coverage。当然在继续往下看,如果还没搭建jest环境,可以先搭建,毕竟实践出真知。下面贴上快速搭建环境的文章: Jest | 测试框架实践之-基础知识和环境搭建

编写测试用例

如何编写测试用例,已经存在很多教程,官方也有非常多例子,因此这里我们只写两种很常用的:同步代码和异步代码的测试用例。

  1. 同步代码
// sum.test.ts
const sum = (a:number, b:number) => a + b

test('两数相加', () => {
  // 推断 1 + 1 = 2
  expect(sum(1, 1)).toBe(2)
})

复制代码
  1. 异步代码
// 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,如下:

jest-dir.png 这时候我们可以找到lcov-report/index.html文件,然后在浏览器中打开,此时我们便可以查看当前项目的测试用例书写覆盖率了。这里以我写的工具库为例子:

jest-coverage.png 表格中罗列了所有工具类库的测试用例,存在几下几个指标:

  1. Statements 语句覆盖率,它其实对应的就是js语法上的语句,js解析成ast数中类型为statement
  2. Branches 分支覆盖率,通俗点理解就是if/else这类条件
  3. Functions 函数覆盖率
  4. Lines 行数覆盖率,就是代码执行了多少行

文件中,我们发现url-utils文件中的Branches覆盖率不高,才达到64.29%,那么如何查看具体哪些代码没覆盖到呢?很简单,点击对应的文件名就可以进入查看了,效果如下:

jest-fun.png 图中黄色块代表的是测试用例没有测试到的方式,当然你也可以按快捷键n或者j去查看下一个没有被覆盖到的代码块。图中黄块未覆盖到的,刚好也正是条件语句,符合Branchs的测试覆盖率。

总结

至此便完成了基本的测试用例编写,以及测试用例生成,并且能够查看测试用例覆盖率如何,以此来完善整体测试用例的编写,帮助代码达到完善健硕的目的。关于覆盖率是如何生成的,它的原理是怎么样的呢?下一篇再说。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改