Jest 测试覆盖率

测试覆盖率(test coverage)是衡量软件测试完整性的一个重要指标。掌握测试覆盖率数据,有利于客观认识软件质量,正确了解测试状态,有效改进测试工作。

Jest 测试覆盖率相关配置

// jest.config.js
module.exports = {...// 收集测试覆盖率collectCoverage: true,// 一组glob模式,指示一组应为其收集覆盖率信息的文件。如果文件与指定的 glob 模式匹配,则即使该文件不存在测试,也将为其收集覆盖率信息,并且在测试套件中从不需要它。collectCoverageFrom: ['**/*.{js,jsx}','!**/node_modules/**','!**/vendor/**'],// 测试覆盖率报告输出目录coverageDirectory: 'coverage',// 指示应使用哪个提供程序来检测覆盖范围的代码。允许的值为 babel(默认)或 v8。// 请注意,使用 v8 被认为是实验性的。这使用了 V8 的内置代码覆盖率,而不是基于 Babel 的代码覆盖率。它没有经过很好的测试,并且在 Node 的最后几个版本中也得到了改进。使用最新版本的 Node(在撰写本文时为v14)会产生更好的结果。coverageProvider: 'babel',// Jest 在编写覆盖率报告时使用的报告人姓名列表。可以使用任何伊斯坦布尔记者coverageReporters: ["json", "lcov", "text", "clover"],// 覆盖率阈值,如果没有达到阈值则测试失败coverageThreshold: {"global": {"branches": 50,"functions": 50,"lines": 50,"statements": 50},"./src/components/": {"branches": 40,"statements": 40},"./src/reducers/**/*.js": {"statements": 90},"./src/api/very-important-module.js": {"branches": 100,"functions": 100,"lines": 100,"statements": 100}},// 通常,在收集代码覆盖率时会忽略测试文件。使用此选项,您可以覆盖此行为,并在代码覆盖率中包含否则被忽略的文件。forceCoverageMatch: ["**/*.t.js"]
}

覆盖率报告

--------------------|----------|----------|----------|----------|-------------------|
File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files           |    95.65 |    83.33 |      100 |    95.56 |                   |components         |      100 |      100 |      100 |      100 |                   |HelloWorld.vue    |      100 |      100 |      100 |      100 |                   |components/TodoApp |    95.45 |    83.33 |      100 |    95.35 |                   |TodoFooter.vue    |      100 |      100 |      100 |      100 |                   |TodoHeader.vue    |       80 |       50 |      100 |       80 |                21 |TodoItem.vue      |      100 |      100 |      100 |      100 |                   |index.vue         |    96.77 |    85.71 |      100 |    96.67 |               102 |
--------------------|----------|----------|----------|----------|-------------------|
指标 说明
%stmts(statement coverage) 语句覆盖率:是不是每个语句都执行了?
%Branch(branch coverage) 分支覆盖率:是不是每个if代码块都执行了?
%Funcs(function coverage) 函数覆盖率:是不是每个函数都调用了?
%Lines(line coverage) 行覆盖率:是不是每一行都执行了?

上传覆盖率

通常情况下不建议将测试覆盖率报告保存在项目仓库中。

# .gitignore
coverage

我们可以使用更专业的工具来帮助我们展示覆盖率报告。有两个网站可供选择:Codecov 和 Coveralls。这里以 Codecov 为例。

这是 Vue.js 发布在 codecov 上的测试覆盖率统计报告。

首先,打开 Codecov 官网,绑定 Github 账号之后,选择要展示测试覆盖率的仓库并获得 token。

然后,安装 Codecov:

npm install --save-dev codecov

生成测试覆盖率报告:

npm run coverage

将测试覆盖率报告上传到 codecov:

codecov --token=xxx

展示 codecov 徽章

复制链接放到项目的 README.md 中即可。

若有收获,就点个赞吧

Jest 测试覆盖率相关推荐

  1. Jest 学习04 - DOM 测试、快照测试、测试覆盖率

    DOM 测试 官方文档:DOM Manipulation 直接操作 DOM 的代码通常被认为难以测试,因为操作 DOM 就要使用浏览器环境的 DOM Api,而 Jest 是运行在 Node 环境中的 ...

  2. 使用Jest测试JavaScript (入门篇)

    1 什么是 Jest? Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架. ...

  3. Jest 测试框架配置 jest-stare

    简述安装步骤: 默认你已经配置好jest了, 如果没有可以看我往期的笔记 安装 jest-stare 依赖 npm install jest-stare --dev 配置 package.json 文 ...

  4. 使用Jest测试JavaScript (入门篇) 1

    1 什么是 Jest? Jest Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的 ...

  5. Jest测试入门到使用

    Jest 测试使用说明 Jest 测试 什么是测试 作为开发来讲可以简单把代码分为两种,一种是业务代码,一种是业务无关的代码.测试代码就是典型的业务无关的代码.不过按照我的定义可以把测试代码定位为:可 ...

  6. jest测试具体方法

    一.基本语法(匹配器matchers) 1.基础语法 test('two plus two is four', () => {expect(2 + 2).toBe(4); }); expect( ...

  7. Jest测试初学(一)--Jest 的简单配置

    一 生成jest.config.js配置文件 执行安装命令 npx jest --init 然后在工程的根目录下会生成一个jest.config.js文件(这个文件值得细细研究!) 如果想修改测试覆盖 ...

  8. 使用Jest测试js代码

    为什么使用Jest?  1. Jest 可以利用其特有的快照测试功能,通过比对 UI 代码生成的快照文件,实现对 React 等常见框架的自动测试.此外, Jest 的测试用例是并行执行的,而且只执行 ...

  9. 用Cobertura 测量测试覆盖率

    Cobertura 是一种开源工具,它通过检测基本的代码,并观察在测试包运行时执行了哪些代码和没有执行哪些代码,来测量测试覆盖率.除了找出未测试到的代码并发现 bug 外,Cobertura 还可以通 ...

最新文章

  1. mask属性是css3的吗_CSS mask-image属性详细介绍(小结)
  2. 征战全球16年:中国手机出海简史
  3. 北航研究生计算机学院,北航计算机学院考研经验
  4. mysql第二章_第二章 初识MySQL
  5. git 上传项目到linux仓库_使用子模块和子树来管理 Git 项目 | Linux 中国
  6. HTML5的设计目的是为了在移动设备上支持多媒体
  7. 记一次nginx反向代理做转发遇到的坑
  8. Spring AOP异常处理(error at ::0 formal unbound in pointcut)
  9. 计算机切换器鼠标反应慢,解决鼠标反应迟钝与反应慢故障的方法
  10. strcmp函数的实现方式
  11. 论找对客服妹子对修改邓白氏码的公司信息的重要性
  12. 检测点云中的目标(ROS2 Tao-PointPillars)
  13. vs使用html写出分层次字,Javascript 升阶 10-2 样版字面额方法:VSCode 配搭 Emmet 编写 HTML 构造...
  14. django MVT模式介绍
  15. 集成聚合火车票订票接口(回调推送方式)总结
  16. html段落简字前带繁字,简体字转繁体字有什么方法?Word怎么繁体转简体?
  17. 杭州机械工程师职称评审条件
  18. python光棍节快乐_2020年祝光棍节快乐的祝福语18条
  19. 开机报错“部分便笺的元数据已被损坏” 解决方法 win7
  20. 计算机网络分层及其功能

热门文章

  1. 关于过去的文字1--------------我的电影情节。
  2. 店宝宝:拼多多如何一战成名
  3. MICHAEL KORS推出新一代智能触屏腕表
  4. 如何在 Win10 上从此电脑删除“3D对象”
  5. crud操作_使用HTTP方法:CRUD操作
  6. 为什么别人都不主动联系你
  7. 台历式月历设计制作(C语言)
  8. 4.3计算机动画制作 教案,高中信息技术选修2教案-4.3.1 选择计算机动画制作工具1-教科版.docx...
  9. vue3数据的双向绑定
  10. CASIO FX-4800P圆曲线及缓和曲线上任意点切线方位角计算程序