JS 代码覆盖率检测 – 使用 Istanbul 统计测试用例的覆盖范围

js 代码覆盖率检测 - 使用 istanbul 统计测试用例的覆盖范围

JS 代码覆盖率检测,简单来说,就是看看你的测试用例到底测到了多少代码。Istanbul (现在通常叫 nyc) 是个很棒的工具,能帮你统计这个。

Istanbul 统计测试用例的覆盖范围

如何用 Istanbul (nyc) 检测代码覆盖率?

首先,你需要安装 nyc 和你用的测试框架,比如 Jest 或者 Mocha。 假设你用的是 Jest,那么:

npm install --save-dev nyc jest

然后,在你的

package.json

里面,改一下 test 命令:

{  "scripts": {    "test": "nyc jest"  }}

npm test

,就会自动生成覆盖率报告了。报告通常在

coverage

文件夹里,你可以打开

index.html

看看具体哪些代码没测到。

为什么我的覆盖率总是上不去?

覆盖率上不去,可能有很多原因。最常见的是,有些代码根本没被测试用例执行到。比如,一些错误处理的代码,只有在特定情况下才会触发。还有一些代码,可能是过时的,根本没用到了。

解决办法也很简单,就是仔细分析覆盖率报告,看看哪些代码没测到,然后针对性地写测试用例。如果发现有没用的代码,直接删掉就好。

如何忽略一些不需要覆盖率检测的文件或文件夹?

有些文件,比如配置文件、第三方库,或者一些工具脚本,可能不需要覆盖率检测。这个时候,你可以在

package.json

里配置

nyc

,告诉它忽略这些文件。

{  "nyc": {    "exclude": [      "config/",      "node_modules/",      "scripts/"    ]  }}

这样,

nyc

在统计覆盖率的时候,就会忽略

config

node_modules

scripts

这三个文件夹里的文件了。

如何在 CI/CD 环境中生成覆盖率报告并上传?

在 CI/CD 环境中,通常需要生成覆盖率报告,并上传到代码托管平台,比如 GitHub 或者 GitLab。这样,每次提交代码的时候,就能自动检查覆盖率是否达标。

以 GitHub Actions 为例,你可以创建一个

coverage.yml

文件,内容如下:

name: Code Coverageon:  push:    branches: [ main ]  pull_request:    branches: [ main ]jobs:  coverage:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v3      - name: Use Node.js 16        uses: actions/setup-node@v3        with:          node-version: 16      - run: npm install      - run: npm test      - name: Upload coverage to Codecov        uses: codecov/codecov-action@v3        with:          token: ${{ secrets.CODECOV_TOKEN }}          flags: unittests          name: codecov-umbrella

这个配置会监听

main

分支的 push 和 pull request 事件,然后自动运行测试,并把覆盖率报告上传到 Codecov。你需要先在 Codecov 上注册一个账号,然后把你的 Codecov token 配置到 GitHub Actions 的 secrets 里。

如何设置覆盖率阈值,防止代码质量下降?

为了防止代码质量下降,可以设置覆盖率阈值。比如,要求代码覆盖率必须达到 80% 以上。如果覆盖率低于这个阈值,就认为测试不通过。

package.json

里,你可以配置

nyc

check-coverage

选项:

{  "nyc": {    "check-coverage": true,    "statements": 80,    "branches": 80,    "functions": 80,    "lines": 80  }}

这样,每次运行测试的时候,

nyc

都会检查代码覆盖率是否达到 80%。如果没有达到,就会报错。

如何在 TypeScript 项目中使用 Istanbul (nyc)?

在 TypeScript 项目中使用 Istanbul (nyc) 稍微麻烦一点,因为需要先将 TypeScript 代码编译成 JavaScript 代码,才能进行覆盖率检测。

首先,你需要安装

ts-node

@types/jest

npm install --save-dev ts-node @types/jest

然后,修改你的

jest.config.js

文件,告诉 Jest 使用

ts-node

来处理 TypeScript 文件:

module.exports = {  preset: 'ts-jest',  testEnvironment: 'node',};

最后,修改你的

package.json

文件,告诉

nyc

如何运行测试:

{  "scripts": {    "test": "nyc --extension .ts jest"  }}

这样,

nyc

就会自动编译 TypeScript 代码,并生成覆盖率报告了。

以上就是JS 代码覆盖率检测 – 使用 Istanbul 统计测试用例的覆盖范围的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1520494.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 13:22:29
下一篇 2025年12月20日 13:22:39

相关推荐

  • 如何通过JavaScript实现滚动进度指示器?

    通过监听滚动事件并计算滚动百分比,结合CSS自定义进度条样式,可实现页面滚动进度指示器;为应对动态内容,使用MutationObserver重新计算进度;通过节流优化滚动事件性能。 滚动进度指示器,简单来说,就是页面滚动时,顶端或底部出现一条进度条,告诉你当前阅读到了哪个位置。实现起来并不复杂,Ja…

    2025年12月20日
    000
  • 如何实现JavaScript中的记忆化函数?

    记忆化通过缓存函数结果避免重复计算,适用于纯函数、高成本、频繁调用且参数重复的场景,需注意键生成、内存消耗和缓存失效等问题,可使用Lodash的_.memoize等工具简化实现。 JavaScript中的记忆化(Memoization)是一种优化技术,它通过缓存昂贵函数调用的结果,并在相同的输入再次…

    2025年12月20日
    000
  • 什么是JavaScript的生成器与Promise的结合,以及它们如何简化异步流程的控制和错误处理?

    生成器与Promise结合使异步代码更同步化,通过yield暂停执行并等待Promise解决,由运行器驱动next()恢复,实现线性流程;避免回调地狱,提升可读性。错误处理上,Promise拒绝会触发生成器内try…catch捕获,统一异步与同步错误处理机制,简化调试与维护。 JavaS…

    2025年12月20日
    000
  • 什么是动态导入和代码分割,以及它们如何优化前端应用的加载性能和资源管理?

    动态导入与代码分割通过按需加载和拆分代码提升性能。动态导入利用import()语法实现模块懒加载,减少初始bundle大小;代码分割则通过打包工具将代码拆为多个chunk,支持并行加载与缓存优化。二者结合可显著提升首屏速度与资源管理效率。项目若存在主bundle过大、功能模块独立性强、对首屏性能要求…

    2025年12月20日
    000
  • 隐藏段落中超过9位数字的电话号码,并排除标签内的号码

    本文介绍如何使用 jQuery 脚本隐藏 HTML 段落( 标签)中超过 9 位的数字,同时排除包含在 标签内的数字。我们将提供一个示例代码,演示如何实现这一功能,并解释代码的工作原理。 解决方案 以下代码片段展示了如何使用 jQuery 实现隐藏段落中超过 9 位数字的电话号码,并排除 标签内的号…

    2025年12月20日
    000
  • HTML pattern 属性:实现精确电话号码格式验证的完整指南

    本文将深入探讨如何使用 HTML pattern 属性对电话号码输入进行精确格式验证。我们将分析常见的正则表达式错误,特别是特殊字符的转义处理,并提供一个针对特定国际电话号码格式的有效解决方案,确保用户输入符合预期的模式,从而提升表单数据的质量和用户体验。 HTML pattern 属性简介 在现代…

    2025年12月20日
    000
  • JS 代码分割策略优化 – 基于路由与组件依赖分析的打包方案

    答案:JS代码分割通过按需加载优化性能,核心是基于路由和组件依赖分析。利用动态导入实现路由级和组件级分割,结合Webpack的SplitChunksPlugin提取公共模块,配合Bundle Analyzer识别大体积代码,减少首屏加载时间与资源浪费,平衡分割粒度以避免过多请求,从而提升用户体验。 …

    2025年12月20日
    000
  • 计算层叠猫咪的总高度:一个几何级数问题解析

    本文旨在解决一个经典的计算问题:当一系列猫咪以特定比例层叠时,如何准确计算它们的总高度。文章将详细阐述问题关键点、常见误区,并提供基于几何级数原理的迭代式JavaScript解决方案,确保结果精确到指定小数位。 问题背景与核心挑战 设想一个场景:大猫“帽中猫”拥有一个初始高度,而它帽子下的每一只猫都…

    2025年12月20日
    000
  • 数组对象根据父子关系与显示优先级进行排序的通用方法

    本文介绍如何对包含父子关系(通过id和reference_id关联)及显示优先级 (display_priority) 的数组对象进行排序。我们将构建一个分层结构,先处理父子归属,再根据优先级对父节点和子节点进行排序,最终展平为符合预期顺序的数组。 问题背景与挑战 在前端或后端数据处理中,我们经常会…

    2025年12月20日
    000
  • Vue中大型数据集高性能虚拟滚动列表的实现

    本文详细介绍了如何在Vue应用中,特别是处理如Electron Vue应用中包含大量数据的滚动列表时,通过实现虚拟滚动(Virtual List)技术来解决性能瓶颈。文章将提供一个可复用的Vue组件代码,并深入解析其实现原理、核心逻辑及使用方法,旨在帮助开发者构建流畅、高效的用户界面。 挑战:大型数…

    2025年12月20日
    000
  • React Router应用中灵活控制导航栏显示与隐藏的布局模式

    本教程旨在解决React应用中根据路由按需显示或隐藏导航栏的问题。通过引入“布局组件”模式,我们可以在特定页面(如404错误页)不渲染导航栏,而在其他页面保持其显示。这种方法利用React Router的特性,增强了组件的复用性和代码的可维护性,避免了为每个页面创建独立布局的复杂性。 传统方法的局限…

    2025年12月20日
    000
  • Express.js 中等待多个 Promise 完成再响应的策略

    本文探讨了在 Express.js API 中,如何有效管理并等待多个异步操作(Promise)全部完成后再向客户端发送响应。通过分析常见的实现误区,如 async 关键字的遗漏或 await 的不当使用,文章详细演示了如何结合 async/await 语法和 Promise.all 方法,以及利用…

    2025年12月20日
    000
  • ExpressJs中并发处理异步任务并等待所有Promise完成

    本文旨在探讨在ExpressJs应用中如何高效地并发执行多个异步任务,并确保所有Promise都已完成处理后再向客户端发送响应。我们将重点介绍async/await语法与Promise.all()的结合使用,优化异步代码的可读性和健壮性,同时提供错误处理的最佳实践,以确保API行为符合预期。 异步操…

    2025年12月20日
    000
  • JavaScript中根据条件动态创建对象属性的策略与实践

    本教程探讨了在JavaScript中如何根据特定条件动态地为对象添加属性,旨在避免分散的对象创建步骤和不必要的中间对象。文章将详细介绍使用构造函数、对象展开语法、立即执行函数表达式(IIFE)以及传统条件赋值等多种方法,并分析它们的优缺点,帮助开发者选择最适合其场景的实现方式,从而编写出更简洁、高效…

    2025年12月20日
    000
  • Vue 中实现高性能虚拟列表:解决大数据量滚动优化难题

    在 Vue 应用中,特别是 Electron 环境下,如何高效处理包含大量数据的滚动列表是一个常见的挑战。针对传统无限滚动和分页在大数据量下可能导致的性能瓶颈,本文将详细介绍并实现一种基于虚拟滚动(Virtual List)的解决方案。通过构建一个可复用的虚拟列表组件,文章将阐述其核心原理、代码实现…

    2025年12月20日
    000
  • 在React Router应用中按需隐藏导航栏的策略

    本文探讨了在React Router应用中,如何通过引入布局组件(Layout Component)优雅地实现导航栏的按需显示与隐藏。通过将通用UI元素(如导航栏和页脚)封装在布局中,并根据路由需求选择性地应用这些布局,开发者可以有效地管理不同页面间的结构差异,避免在特定页面(如404页面)上渲染不…

    2025年12月20日
    000
  • JavaScript数组复杂排序:实现父子层级与优先级双重排序

    本教程详细介绍了如何在JavaScript中对复杂数组进行重排序,该数组包含层级关系(通过reference_id字段)和显示优先级(通过display_priority字段)。文章将通过构建父子关系映射并结合优先级排序的策略,展示如何将扁平数组转换为具有明确层级和顺序的结构,确保子项紧随其父项,并…

    2025年12月20日
    000
  • 什么是WebAssembly与JavaScript的互操作,以及它如何提升计算密集型任务的执行效率?

    WebAssembly与JavaScript互操作通过共享线性内存实现高效数据传递,JavaScript调用Wasm函数处理计算密集任务,Wasm可调用JS函数访问浏览器API,数据以ArrayBuffer形式共享,避免拷贝开销。典型应用包括图像视频处理、科学计算、游戏物理引擎、加密解密和Web I…

    2025年12月20日
    000
  • React Router 中条件渲染导航栏:使用布局组件优化页面UI

    本教程详细阐述如何在 React Router 应用中实现特定页面的导航栏条件隐藏,尤其针对如 404 错误页等无需导航的场景。通过引入布局组件模式,将共享的 UI 元素(如导航栏和页脚)封装起来,并结合 React Router 的路由配置,实现对不同页面应用不同的布局,从而构建出结构清晰、可维护…

    2025年12月20日
    000
  • 解决HTML pattern属性电话号码验证错误:正则表达式详解

    本文旨在解决HTML pattern属性在电话号码验证中常见的正则表达式错误。通过详细解析如何正确使用^、$、转义特殊字符如(、)、+以及d{n}来匹配特定格式的电话号码,确保前端表单验证的准确性和健壮性。文章将提供一个实际的电话号码验证示例,并解释其背后的正则表达式原理,帮助开发者避免常见陷阱。 …

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信