前端覆盖率报告生成

  前端精准测试是精准测试体系的一部分，但是由于前端项目比较灵活，各种框架，脚手架再加上开发同学写的不够规范，所以投入产出比较低，这部分内容在网上的资料也比较少。为了完善我们的精准测试体系，今年做了前端精准测试。精准测试的基础就是覆盖率，如何拿到覆盖率数据，生成覆盖率报告是核心。

一，覆盖率SDK的集成

   前端覆盖率主要借助于istanbul （官方网站：https://istanbul.js.org ）来实现的，而主要的插件有如下：

图片

1，babel的前端工程

     istanbul提供的babel插件babel-plugin-istanbul（https://github.com/istanbuljs/babel-plugin-istanbul） , 能够在代码编译打包阶段直接植入插桩代码 适用于使用babel的前端工程，基于react和vue的工程都可以。

（1）在package.json中添加插件

"babel-plugin-istanbul": "^6.1.1"

（2）在babel.config.js中添加

const plugins = []
//添加收集覆盖率插件
plugins.push(["babel-plugin-istanbul", {extension: ['.js', '.vue'],}])module.exports = {presets: ['@vue/app'],plugins
}

（3）检查覆盖率数据的生成

   编译工程，访问前端项目页面，在控制台访问：window.__coverage__，如果有数据，则说明项目插入babel-plugin-istanbul成功。

图片

2，vite前端工程

如果针对vite(https://vitejs.cn/)前端项目，按如下方法添加：

（1）在package.json中添加插件

"babel-plugin-istanbul": "^6.1.1"

（2）在vite.config.ts中添加:

plugins: [    // vite作为子应用接入qinakun在开发模式下需要把react()关掉    // https://github.com/umijs/qiankun/issues/1257    ...(useDevMode      ? []      : [          react(            mode === 'test'              ? {                  babel: {                    plugins: ['babel-plugin-istanbul']                  }                }              : undefined          )        ]),   ... ]

（3）检查覆盖率数据的生成

   编译工程，访问前端项目页面，在控制台访问：window.__coverage__，如果有数据，则说明项目插入babel-plugin-istanbul成功。

注意：如果是通过vite完全生成的React项目，可以按如下方式进行配置：

（1）安装vite-plugin-istanbul插件：

地址：https://github.com/iFaxity/vite-plugin-istanbul

图片

npm i -D vite-plugin-istanbul
or if you use yarn
yarn add -D vite-plugin-istanbul

(2) 配置vite.config.js

添加引用：

import istanbul from 'vite-plugin-istanbul';

添加插件配置

istanbul({    include:['src/*'],    extension:['.jsx']  })

最终的配置如下：

import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import istanbul from 'vite-plugin-istanbul';
// https://vitejs.dev/config/export default defineConfig({  plugins: [react(),  istanbul({    include:['src/*'],    extension:['.jsx']  })  ],})

启动项目，就可以得到覆盖率数据window.__coverage__

3，webpack前端工程

     对于Webpack项目，需要使用另一个插件webpack-plugin-istanbul插件（https://github.com/smoosee/webpack-plugin-istanbul）    

图片

这个项目是最新发布的，显示 是五个月前提交的代码，所以要求：node版本大于16，webpack至少是5。

（1） 在项目中执行如下命令：

yarn add webpack-plugin-istanbul -D

（2）添加webpack配置

  找到根目录下config/webpack.config.js文件，添加如下代码：

//覆盖率插件const { WebpackPluginIstanbul } = require("webpack-plugin-istanbul");
//添加插件plugins:[new WebpackPluginIstanbul({  include: ["src/*.js","src/*.ts","src/*.tsx"],  exclude: ["src/**/*.spec.js"],  extension: [".js",".ts",".tsx"],  cwd: process.cwd(),}),...]//在module中添加配置module: {  strictExportPresence: true,  rules: [    {      test: /\.(js|ts|tsx)$/,      exclude: /node_modules/,      use: {        loader: "webpack-plugin-istanbul/loader",        options: {          include: ["src/*.js","src/*.ts","src/*.tsx"],          exclude: ["src/**/*.spec.js"],          extension: [".js",".ts",".tsx"],          cwd: process.cwd(),        },      },     },    ...    ]    }

注意：修改框架文档中给出的配置，默认只是js文件，我们添加上ts文件，tsx文件的相关配置。

（3）启动项目检测数据

做完上述配置后，启动项目，同样在控制台访问：window.__coverage__，如果有数据，则表明插件注入成功。

图片

二，上传覆盖率数据

      为了在精准测试平台上生成前端项目的覆盖率报告，需要将项目在本地产生的覆盖率数据上传到精准测试平台，这就需要使用我们提供的chrome插件。

1，上传覆盖率chrome插件

请下载下面的插件，安装到chrome上。覆盖率插件上传覆盖率数据逻辑如下所示：

图片

添加完成后，如下所示：

图片

注意：为了防止过渡采集数据，插件对网址进行过滤。

图片

2，覆盖率数据上传

（1）安装完成插件后，刷新要测试的页面，将插件注入到页面中，等一分钟你可以从控制台看是否有如下输出，如果有，说明插件注入成功。

图片

（2）打开插件，点击『开始上报』按钮，则会关闭插件，弹出数据采集浮层。如下所示：

图片

  • 请输入本次需求对应的Team任务的ID,然后才可以单击开始上报按钮。

  • 如果停止上报，则会清除TeamID，此时可以切换ID或是重新输入。

  • 如果要测试的内容没有teamID，则输入一下容易识别的英文字符串，在创建任务的时候把TeamID填写成一致的即可。

图片

（3）开始进行测试

     当看到弹层时，就可以执行具体的测试用例了，插件会一分钟自动上传一次覆盖率数据，控制台也会有输入，可以帮助你查看一下上传的情况。

你无需关注上传的数据，只管测试就行。

（4）结束覆盖率采集

当你测试完成后，可以打开插件，单击『停止上报』，关闭浮层，停止上报覆盖率数据。

三，生成覆盖率报告

    覆盖率报告生成逻辑如下所示：

生成报告的核心逻辑如下：

  • 下载项目源码到指定的目录中；

  • 上传覆盖率数据到项目的.nyc_output目录中，并进行合并；

  • 全并后生成全量报告，并生成合并后的覆盖率数据cov_merged.json文件；

  • 根据git diff信息，过滤合并后地覆盖率文件，生成增量覆盖率数据；

  • 对于合并覆盖率数据中没有的增量文件，则将相关的语句块，函数块，分支块等信息置空，以便在增量报告中展示出来。

  • 生成增量报告。

  • 在公司是通过精准测试平台来实现相关流程的串联的，在此就不展示平台操作了。

四，覆盖率报告解读

    单击覆盖率任务名称，可以跳转到覆盖率分析记录页，可以看到本次报告的增量行覆盖率，全量行增开率和分支覆盖率，单击详情，可以看到更加详情的覆盖率数据。

图片

单击『查看报告详情』，即可打开相应的覆盖率报告的结果，如下所示：

图片

具体的覆盖率报告分析，可以参与文档：代码测试覆盖率分析: https://www.ucloud.cn/yun/84880.html

分析覆盖率的执行情况，可以看一下下面的文档，解读覆盖率报告的每一部分信息：

  • 覆盖率报告解读：https://github.com/JChehe/blog/issues/49

图片

注意以下几个重点：

1，四个测量维度

  • 行覆盖率（line coverage）：每个可执行代码行是否都执行了？

  • 函数覆盖率（function coverage）：每个函数是否都调用了？

  • 分支覆盖率（branch coverage）：每个流程控制的各个分支是否都执行了？

  • 语句覆盖率（statement coverage）：每个语句是否都执行了？

图片

2，代码文件渲染解读

（1）“行覆盖率”中的行是指可执行代码行（Lines of Executable Code），而不是源文件中所有的行（含空行）——（Lines of Source Code）。​​​​​​​

function doTheThing ()  // +0 {                       // +0    const num = 1;      // +1    console.log(num);   // +1}                       // +0

其中上面的函数中，可执行的行是2，而不是5。

  • import、声明都被视为非可执行行（+0），require、赋值等语句视为可执行行（+1）

  • 如果某行存在可执行代码，则这一整行会被视为可执行代码行。

  • 而如果一个语句被拆分为多行，则该可执行代码块中，仅第一行被会视为可执行行。

function func () {  // +0    return {        // +1        a: 1,       // +0        b: 2,       // +0    }               // +0}                   // +0

（2）测试覆盖率报告出现的标识

  • 'E'：'else path not taken'，表示 if/else 语句的

    if（含 else if）分支已测试，而 else 分支未测试。

  • 'I'：'if path not taken'，与上面的 'E' 相反，即

    if（含 else if） 分支未测试。

  • 'Nx'：表示当前可执行代码行被执行的总次数。

  • 粉色（背景色）：语句/函数未覆盖。

  • 黄色（背景色）：分支未覆盖。

图片

注意：由于前端代码不像服务端代码那样，渲染的比较清楚，可以按上面的规则对覆盖率报告进行排查。后面如果我见到更加详情的报告解读，也会在些提供给大家的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/272844.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

21、状态模式（行为性模式）

21、状态模式（行为性模式）

版本一、get状态指针 #include <iostream> using namespace std;//前置声明 class Context;//状态 class State{ public://4个状态virtual void toUp (Context& context){ }virtual void toDown (Context& context){ }virtual void toLeft (Context& cont…
阅读更多...
学习和认知的四个阶段，以及学习方法分享

学习和认知的四个阶段，以及学习方法分享

本文分享学习的四个不同的阶段&#xff0c;以及分享个人的一些学习方法。 一、学习认知的四个阶段 我们在学习的过程中&#xff0c;总会经历这几个阶段&#xff1a; 第一阶段&#xff1a;不知道自己不知道&#xff1b; 第二阶段&#xff1a;知道自己不知道&#xff1b; 第三…
阅读更多...
命名实体识别，根据实体计算准确率、召回率和F1

命名实体识别，根据实体计算准确率、召回率和F1

文章目录 简介数据格式介绍准确率、召回率和F1评估评估代码评估结果 进一步阅读参考 简介 使用大模型训练完命名实体识别的模型后&#xff0c;发现不知道怎么评估实体识别的准确率、召回率和F1。于是便自己实现了代码&#xff0c;同时提供了完整可运行的项目代码。 完整代码&…
阅读更多...
SpringBoot快速入门（介绍，创建的3种方式，Web分析）

SpringBoot快速入门（介绍，创建的3种方式，Web分析）

目录 一、SpringBoot介绍 二、SpringBootWeb快速入门 创建 定义请求处理类 运行测试 三、Web分析 一、SpringBoot介绍 我们可以打开Spring的官网(Spring | Home)&#xff0c;去看一下Spring的简介&#xff1a;Spring makes Java simple。 Spring发展到今天已经形成了一种…
阅读更多...
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面

学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;前端泛海 景天的主页&#xff1a;景天科技苑 文章目录 Bootstrap1.Bootstrap介绍2.简单使用3.布局容器4.Bootstrap实现轮播…
阅读更多...
机器学习|KNN和Kmeans

机器学习|KNN和Kmeans

KNN和Kmeans KNN KNN-K个最近的邻居&#xff0c;而K是可人先预设出来的。 所谓近朱者赤&#xff0c;近墨者黑。 可以选取离当前最近的K个样本来作为辅助判断&#xff0c;因为本样本和最近的K个样本应该是处于一种相似的状态。 以下是一个苹果和梨的识别任务。 图上会出现一个未…
阅读更多...
011-keep-alive详解

011-keep-alive详解

keep-alive详解 1、简介2、keep-alive的使用效果未使用keep-alive的效果图使用keep-alive的效果图include和exclude指定是否缓存某些组件使用keep-alive的钩子函数执行顺序问题 3、keep-alive的应用场景举例4、总结 1、简介 keep-alive 是 Vue 的内置组件&#xff0c;当它包裹…
阅读更多...
Elasticsearch架构原理

Elasticsearch架构原理

一. Elasticsearch架构原理 1、Elasticsearch的节点类型 在Elasticsearch主要分成两类节点&#xff0c;一类是Master&#xff0c;一类是DataNode。 1.1 Master节点 在Elasticsearch启动时&#xff0c;会选举出来一个Master节点。当某个节点启动后&#xff0c;然后使用Zen D…
阅读更多...
理清关系简化LeetCode题库第3047题求交集区域内的最大正方形面积问题求解

理清关系简化LeetCode题库第3047题求交集区域内的最大正方形面积问题求解

3047. 求交集区域内的最大正方形面积 难度&#xff1a;中等 问题描述&#xff1a; 在二维平面上存在 n 个矩形。给你两个下标从 0 开始的二维整数数组 bottomLeft 和 topRight&#xff0c;两个数组的大小都是 n x 2 &#xff0c;其中bottomLeft[i]和topRight[i]分别代表第i个…
阅读更多...
爬虫(五)

爬虫(五)

1. 前端JS相关 三元运算 v1 条件 ? 值A : 值B; # 如果条件成立v1值A&#xff0c;不成立v1等于值Bres 1 1 ? 99 : 88 # res99特殊的逻辑运算 v1 11 || 22 # Ture v2 9 || 14 # 9 v3 0 || 15 # 15 v3 0 || 15 || "zhangfei" # 15赋值和…
阅读更多...
Java二叉树 (2)

Java二叉树 (2)

&#x1f435;本篇文章将对二叉树的一些基础操作进行梳理和讲解 一、操作简述 int size(Node root); // 获取树中节点的个数int getLeafNodeCount(Node root); // 获取叶子节点的个数int getKLevelNodeCount(Node root,int k); // 获取第K层节点的个数int getHeight(Node r…
阅读更多...
【Claude3】利用Python中完成对Bedrock上的Claude的API调用

【Claude3】利用Python中完成对Bedrock上的Claude的API调用

文章目录 1. 前期准备工作2. 安装和配置AWS CLI v23. 使用AWS configure命令配置AWS凭据4. 安装访问Bedrock的SDK5. 访问Amazon Bedrock UI6. 订阅Bedrock上的Claude模型7. 通过CLI命令列出所有可用的Claude模型8. 向Claude 3 Sonnet on Bedrock生成文本9. 参考链接 1. 前期准备…
阅读更多...
云原生架构设计：分布式消息队列技术解析

云原生架构设计：分布式消息队列技术解析

消息队列是在消息传输过程中保存消息的容器&#xff0c;消息队列管理器在将消息从源到目标时充当中间人的角色&#xff0c;消息队列的主要目的是提供路由并保证消息的可靠传递。如果发送消息时接收者不可用&#xff0c;那消息队列就会保留消息&#xff0c;直到下次成功消费为止…
阅读更多...
Excel 快速填充/输入内容

Excel 快速填充/输入内容

目录 一. Ctrl D/R 向下/右填充二. 批量输入内容 一. Ctrl D/R 向下/右填充 ⏹如下图所示&#xff0c;通过快捷键向下和向右填充数据 &#x1f914;当选中第一个单元格之后&#xff0c;可以按住Shift后&#xff0c;再选中最后一个单元格&#xff0c;可以选中第一个单元格和最…
阅读更多...
CleanMyMac X4.14.7永久免费Mac电脑清理和优化软件

CleanMyMac X4.14.7永久免费Mac电脑清理和优化软件

CleanMyMac X 是一款功能强大的 Mac 清理和优化软件&#xff0c;适合以下几类人群使用&#xff1a; 需要定期清理和优化 Mac 的用户&#xff1a;随着时间的推移&#xff0c;Mac 设备上可能会积累大量的无用文件、缓存和垃圾&#xff0c;导致系统运行缓慢。CleanMyMac X 的智能扫…
阅读更多...
DataLoader

DataLoader

import torchvision from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriter# 准备的测试数据集 数据放在了CIFAR10文件夹下test_data torchvision.datasets.CIFAR10("./CIFAR10",trainFalse, transformtorchvision.transfor…
阅读更多...
React useMemo钩子指南：优化计算性能

React useMemo钩子指南：优化计算性能

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
【解读】OWASP大语言模型应用程序十大风险

【解读】OWASP大语言模型应用程序十大风险

OWASP大型语言模型应用程序前十名项目旨在教育开发人员、设计师、架构师、经理和组织在部署和管理大型语言模型&#xff08;LLM&#xff09;时的潜在安全风险。该项目提供了LLM应用程序中常见的十大最关键漏洞的列表&#xff0c;强调了它们的潜在影响、易利用性和在现实应用程序…
阅读更多...
[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

目录 1. 什么是Spring 2.什么是IoC容器 3.通过实例来深入了解IoC容器的作用 3.1造一量可以定义车辆轮胎尺寸的车出现的问题 3.2解决方法 3.3IoC优势 4.DI介绍 5.Spring中的IoC和DI的实现 5.1.存对象 5.1.2 类注解 5.1.3 方法注解 5.2取对像 (依赖注入) 5.2.1.属性…
阅读更多...
如何使用Hexo搭建个人博客

如何使用Hexo搭建个人博客

文章目录 如何使用Hexo搭建个人博客环境搭建连接 Github创建 Github Pages 仓库本地安装 Hexo 博客程序安装 HexoHexo 初始化和本地预览 部署 Hexo 到 GitHub Pages开始使用发布文章网站设置更换主题常用命令 插件安装解决成功上传github但是web不更新不想上传文章处理方式链接…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023