📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 背景
  • 要求
  • 原理
  • 实现
  • 整体思路
  • 依赖
  • 适配vue文件
  • 需要解决的问题
  • 一些情况下丢失函数名
  • 实现增量和全量测试覆盖率
在GitHub上编辑
  1. 经验记录
  2. 经验总结

🔧基于istanbul实现代码测试覆盖率工具

背景

引入istanbul最初的目的是为了实现生成cypress端对端测试覆盖率报告,但是在经过一段时间实践后认为每次实现业务功能后再去实现cypress测试的成本过高,后面采用jest等单元测试框架来替代,但是istanbul却被保留下来,作为供测试人员评估测试质量和效率的工具。

要求

基于实际的业务背景,需要一个工具来生成代码测试覆盖率报告,而代码覆盖率有下面这四个维度:

  • 函数覆盖率:覆盖了多少函数

  • 行覆盖率:覆盖了多少行代码

  • 分支覆盖率:覆盖了多少分支

  • 语句覆盖率:覆盖了多少语句

其中对于测试而言最重要的可能就是函数覆盖率和分支覆盖率了,从这两个指标可以判断出测试工作是否有遗漏的情况。最理想的情况是能够所有覆盖率指标都能覆盖到,在实际测试中应该尽量提升函数覆盖率和分支覆盖率。

生成这四个维度的代码覆盖率报告可以通过Istanbul这个babel插件来实现,Istanbul 是一个 JavaScript 代码覆盖率工具,它可以用于测量 JavaScript 代码的测试覆盖率。由于istanbul是一个babel插件,因此使用Istanbul的前提是项目中集成了babel。

从技术上来说,由于需要同时集成到老项目和新项目上,因此这就要求了这个工具具备下面的特点:

  1. 易集成性:尽量减少集成到项目中的成本。

  2. 可扩展性:支持未来扩展新功能。

  3. 最小依赖:应当尽量少地引入新的依赖。

  4. 易使用性:减少集成和测试人员心智负担。

原理

Istanbul实现的本质是“插桩”,在代码的入口和出口插入计数器代码,以便在你的代码执行时能够记录执行情况。

实现

整体思路

基于前面所说的几点来考虑,这个工具应当做成一个babel预设,然后作为一个npm库集成到各个项目中,以便能够尽量降低集成成本。

此外工具还需要提供一些交互功能给测试人员使用,虽然目前公司技术栈都是vue,但是为了确保兼容性,还是需要考虑兼容常用的框架。

依赖

  • babel

  • babel-plugin-istanbul

适配vue文件

Istanbul不支持的vue的SFC(单页面组件),但是换个思路,vue的SFC实际上最终会编译成一个包含render方法的js对象,本质上还是js。

需要解决的问题

一些情况下丢失函数名

实现增量和全量测试覆盖率

上一页双向通讯解决方案下一页表单系统(低代码表单)

最后更新于1年前