Jest 测试覆盖率

Jest 测试覆盖率

测试覆盖率(test coverage)是衡量软件测试完整性的一个重要指标。掌握测试覆盖率数据,有利于客观认识软件质量,正确了解测试状态,有效改进测试工作。

Jest 测试覆盖率相关配置

// jest.config.js
module.exports = {
	...
  
  // 收集测试覆盖率
  collectCoverage: true,
  
  // 一组glob模式,指示一组应为其收集覆盖率信息的文件。如果文件与指定的 glob 模式匹配,则即使该文件不存在测试,也将为其收集覆盖率信息,并且在测试套件中从不需要它。
  collectCoverageFrom: [
    '**/*.{js,jsx}',
    '!**/node_modules/**',
    '!**/vendor/**'
  ],
  
  // 测试覆盖率报告输出目录
  coverageDirectory: 'coverage',
  
  // 指示应使用哪个提供程序来检测覆盖范围的代码。允许的值为 babel(默认)或 v8。
  // 请注意,使用 v8 被认为是实验性的。这使用了 V8 的内置代码覆盖率,而不是基于 Babel 的代码覆盖率。它没有经过很好的测试,并且在 Node 的最后几个版本中也得到了改进。使用最新版本的 Node(在撰写本文时为v14)会产生更好的结果。
  coverageProvider: 'babel',
  
  // Jest 在编写覆盖率报告时使用的报告人姓名列表。可以使用任何伊斯坦布尔记者
  coverageReporters: ["json", "lcov", "text", "clover"],

  // 覆盖率阈值,如果没有达到阈值则测试失败
  coverageThreshold: {
		"global": {
      "branches": 50,
      "functions": 50,
      "lines": 50,
      "statements": 50
    },
    "./src/components/": {
      "branches": 40,
      "statements": 40
    },
    "./src/reducers/**/*.js": {
      "statements": 90
    },
    "./src/api/very-important-module.js": {
      "branches": 100,
      "functions": 100,
      "lines": 100,
      "statements": 100
    }
  },
  
  // 通常,在收集代码覆盖率时会忽略测试文件。使用此选项,您可以覆盖此行为,并在代码覆盖率中包含否则被忽略的文件。
  forceCoverageMatch: ["**/*.t.js"]
}

覆盖率报告

--------------------|----------|----------|----------|----------|-------------------|
File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
--------------------|----------|----------|----------|----------|-------------------|
All files           |    95.65 |    83.33 |      100 |    95.56 |                   |
 components         |      100 |      100 |      100 |      100 |                   |
  HelloWorld.vue    |      100 |      100 |      100 |      100 |                   |
 components/TodoApp |    95.45 |    83.33 |      100 |    95.35 |                   |
  TodoFooter.vue    |      100 |      100 |      100 |      100 |                   |
  TodoHeader.vue    |       80 |       50 |      100 |       80 |                21 |
  TodoItem.vue      |      100 |      100 |      100 |      100 |                   |
  index.vue         |    96.77 |    85.71 |      100 |    96.67 |               102 |
--------------------|----------|----------|----------|----------|-------------------|
指标说明
%stmts(statement coverage)语句覆盖率:是不是每个语句都执行了?
%Branch(branch coverage)分支覆盖率:是不是每个if代码块都执行了?
%Funcs(function coverage)函数覆盖率:是不是每个函数都调用了?
%Lines(line coverage)行覆盖率:是不是每一行都执行了?

上传覆盖率

通常情况下不建议将测试覆盖率报告保存在项目仓库中。

# .gitignore
coverage

我们可以使用更专业的工具来帮助我们展示覆盖率报告。有两个网站可供选择:CodecovCoveralls。这里以 Codecov 为例。

img

这是 Vue.js 发布在 codecov 上的测试覆盖率统计报告

首先,打开 Codecov 官网,绑定 Github 账号之后,选择要展示测试覆盖率的仓库并获得 token。

然后,安装 Codecov:

npm install --save-dev codecov

生成测试覆盖率报告:

npm run coverage

将测试覆盖率报告上传到 codecov:

codecov --token=xxx

展示 codecov 徽章

img

img

img

复制链接放到项目的 README.md 中即可。

若有收获,就点个赞吧

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Jest 是一个流行的 JavaScript 测试框架,可以用于编写单元测试、集成测试和端到端测试。下面是 Jest 单元测试入门的步骤: 1. 安装 Jest 使用 npm 安装 Jest:`npm install --save-dev jest` 2. 编写测试用例 在项目根目录下创建一个名为 `__tests__` 的文件夹,并在其中创建一个名为 `example.test.js` 的文件。在 `example.test.js` 文件中编写测试用例: ```javascript describe('示例测试', () => { test('测试1', () => { expect(1 + 1).toBe(2); }); test('测试2', () => { expect(true).toBeTruthy(); }); }); ``` 上面的代码定义了一个测试套件 `示例测试`,其中包含两个测试用例 `测试1` 和 `测试2`。每个测试用例都是一个函数,其中包含一个或多个 `expect` 语句,用于断言测试结果是否符合预期。 3. 运行测试 在命令行中输入 `npx jest` 命令,Jest 将自动查找项目中的测试用例并运行它们。如果所有测试用例都通过,Jest 将输出一个绿色的提示。 4. 高级配置 Jest 提供了丰富的配置选项,可以用于定制测试过程。例如,可以在 `package.json` 文件中添加以下配置: ```json { "jest": { "testEnvironment": "node", "testMatch": [ "**/__tests__/**/*.test.js" ], "coverageThreshold": { "global": { "branches": 80, "functions": 80, "lines": 80, "statements": 80 } } } } ``` 上面的配置指定了测试环境为 Node.js,测试文件必须位于 `__tests__` 文件夹中,并以 `.test.js` 结尾。还指定了代码覆盖率的阈值,如果代码覆盖率低于指定的阈值,Jest 将会提示测试失败。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值