讲师中心 微信公众号
AI工具推荐 视频效率加速

如何理解Javascript的代码覆盖率_怎样测量并提升Javascript测试覆盖率?

千婷酱_5940

千婷酱_5940

发布时间:2026-01-01 21:26:02

|

1025人浏览过

|

来源于php中文网

原创

JavaScript代码覆盖率衡量的是测试执行时源码中被实际运行的语句、分支、函数和行,而非测试数量;它不保证质量,但能暴露未触达的逻辑盲区如else分支、catch块等。

如何理解javascript的代码覆盖率_怎样测量并提升javascript测试覆盖率?

JavaScript 代码覆盖率不是“写了多少测试”,而是“运行测试时,源码中哪些语句、分支、函数、行被真正执行过”。它本身不保证质量,但能快速暴露未被触达的逻辑盲区——比如 if 的 else 分支、catch 块、边界条件处理等。

用 jest 开箱测量覆盖率(最常见场景)

Jest 内置 istanbul(通过 babel-plugin-istanbul 注入),开箱即用,无需额外配置即可生成基础报告。

  • 确保项目已安装 jest(推荐 v29+),且有基本测试入口(如 test 字段指向 __tests__ 或 src/**/*.test.js)
  • 运行命令:
    npm test -- --coverage
    或更完整地:
    npx jest --coverage --coverage-reporters=text-summary --coverage-reporters=lcov
    (后者生成 coverage/lcov-report/index.html 可视化报告)
  • 注意:若使用 ts-jest,需确认 tsconfig.json 中 sourceMap 为 true,否则覆盖率可能显示为 0%
  • 默认只覆盖 src/ 下文件;若要包含其他目录(如 lib/),需在 jest.config.js 中显式配置 collectCoverageFrom

collectCoverageFrom 配置决定“测什么”,不是“怎么测”

这个数组控制覆盖率统计范围,和测试是否通过无关,但直接影响报告可信度。漏配会导致“假高覆盖率”——比如忘了加 **/*.js,结果只统计了 .test.js 文件自己。

  • 典型安全写法:
    collectCoverageFrom: [
      'src/**/*.{js,jsx,ts,tsx}',
      '!src/**/*.d.ts',
      '!src/**/index.{js,ts}',
      '!src/**/__mocks__/**'
    ]
  • 避免写 'src/**'——它会包含 node_modules 子目录(即使你没引入);也别漏掉 !src/**/index.*,这类聚合文件通常不需单独覆盖
  • 若用 ESM + exports 字段,且测试跑在 Node.js 环境下,注意 jest 默认不处理 exports,可能导致模块解析失败,进而让对应文件完全不出现在覆盖率中

看懂覆盖率数字:行、函数、分支、语句的区别

终端输出的四列(Statements / Branches / Functions / Lines)含义不同,各自反映不同风险:

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

立即学习“Java免费学习笔记(深入)”;

  • Lines 和 Statements 接近但不等价:空行、注释、export 声明行不计入 Statements,但算在 Lines 统计里
  • Branches 是关键短板:一个 if (a && b) 实际产生 3 个分支(true && true,true && false,false && *),但 Jest 默认只按“二元分支”(if/else)统计,复杂布尔表达式需开启 branches: 100 并配合 babel-plugin-istanbul@^6.1.0 才能正确拆分
  • Functions 最容易虚高:导出的工具函数若只被测试文件 import 但未调用,仍会计为“已覆盖”;真正要关注的是“被调用且执行到 return 的函数”

提升覆盖率 ≠ 堆砌测试,而是聚焦“不可信路径”

盲目追求 100% 会写出大量无意义断言(比如只调用函数却不验证副作用或返回值)。有效提升应从报告中红色高亮行出发:

  • 找到 coverage/lcov-report/index.html 中标红的 else、catch、default、throw 行,针对性补测试用例
  • 对异步逻辑(fetch、setTimeout、事件监听),必须用 await 或 done() 确保测试等待完成,否则覆盖率统计会在异步代码执行前就结束
  • React 组件中,useEffect 的清理函数、useCallback 的依赖变化、useState 的初始值分支,都是典型低覆盖区域,需用 act() 触发并验证
  • 不要 mock 所有外部依赖——比如 mock fetch 却不模拟网络失败场景,catch 块永远无法触发,分支覆盖率就卡在 50%

覆盖率工具不会告诉你逻辑对不对,只会告诉你“这段代码有没有被推着走一遍”。最容易被忽略的是:动态导入(import(...))、eval、new Function 生成的代码,以及 Web Worker 中的脚本——它们默认不在任何主流覆盖率工具的注入范围内。

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1975

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2682

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

936

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2999

2025.09.10

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

4687

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2128

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

3816

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1215

2023.07.28

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn