首页 > web前端 > js教程 > 如何获得代码覆盖率百分比? ✅

如何获得代码覆盖率百分比? ✅

DDD
发布: 2025-01-17 00:30:09
原创
582 人浏览过

实现 100% 代码覆盖率:实用指南

本文详细介绍了如何高效地为您的项目实现 100% 的代码覆盖率。 让我们潜入吧!

How to get % code coverage? ✅

准备

开始之前,确定这些关键组件:

  1. 测试范围:定义要测试的代码段(函数、模块等)。
  2. 第三方库:选择测试库(例如Mocha)。
  3. 报告格式: 选择报告格式(例如,lcov 表示 Codecov)。

预先规划可简化测试过程。

实际实施

此示例使用 TypeScript 文件:

How to get % code coverage? ✅

在项目的根目录中创建一个 test 文件夹。 测试放置在具有 .test.ts 扩展名(或类似的,如 .spec.ts)的文件中。

How to get % code coverage? ✅

我们将使用 Mocha、Sinon 和 c8 进行覆盖率报告:

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>
登录后复制
登录后复制

需要安装这些软件包。 稍后将添加其他库。

以下命令运行测试并生成报告:

<code class="language-json">  "scripts": {
    "test": "mocha --require ts-node/esm --experimental-specifier-resolution=node",
    "test:watch": "mocha --watch --require ts-node/esm --experimental-specifier-resolution=node",
    "coverage": "c8 --reporter=lcov npm run test",
    "coverage:default": "c8 npm run test"
  },</code>
登录后复制

test:watch命令至关重要;它会自动重新运行代码更改测试,从而消除手动重启。

How to get % code coverage? ✅

TypeScript 编译需要额外的模块:

<code class="language-json">  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }</code>
登录后复制

示例:测试简单函数

让我们测试一下这个add函数:

add.test.ts

<code class="language-typescript">export function add(a: number, b: number): number {
    return a + b;
}</code>
登录后复制

对应的测试文件:

add.ts

<code class="language-typescript">import { strict as assert } from 'assert';
import { add } from '../add';

describe('Function add()', () => {
    it('should return 5 when adding 2 and 3', () => {
        const result = add(2, 3);
        assert.equal(result, 5);
    });

    // ... more test cases ...
});</code>
登录后复制

这比较了预期结果和实际结果。 测试失败表明存在问题。 彻底的测试确保代码修改不会破坏现有功能。

测试 DOM 交互

要测试 DOM 操作(例如,单击事件),请安装 jsdomjsdom-global:

<code class="language-json">"devDependencies": {
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2",
}</code>
登录后复制

配置这些包:

<code class="language-javascript">require("jsdom-global")();

global.DOMParser = window.DOMParser;</code>
登录后复制

这允许 Node.js 模拟浏览器的 DOM 环境。

测试异步操作

对于异步函数(例如 API 调用),请使用 nocknode-fetch:

<code class="language-json">"devDependencies": {
    "nock": "^13.5.6",
    "node-fetch": "^2.7.0",
}</code>
登录后复制

配置这些包:

<code class="language-javascript">import fetch from "node-fetch";

global.fetch = fetch as any;</code>
登录后复制

nock 模拟 API 响应,提供可预测且稳定的测试环境。 node-fetch 为 Node.js 提供类似浏览器的 fetch 实现。

Codecov 集成

要与 Codecov 集成,请创建 GitHub 存储库并按照 Codecov 的设置说明进行操作。 GitHub Actions 可以自动上传报告。 GitHub Actions 工作流程示例:

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>
登录后复制
登录后复制

此工作流程针对每个推送或拉取请求运行测试并将覆盖率报告上传到 Codecov。 然后可以将 Codecov 徽章添加到您的自述文件中。

How to get % code coverage? ✅

结论

通过遵循这些步骤并根据您的特定需求进行调整,您可以实现并保持 100% 的测试覆盖率,从而提高代码质量和可靠性。 请记住将重复的测试代码重构为可重用的函数,以获得更好的可维护性。

How to get % code coverage? ✅

以上是如何获得代码覆盖率百分比? ✅的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板