跳到主要内容

TypeScript 代码覆盖率

在编写TypeScript代码时，测试是确保代码质量的重要环节。然而，仅仅编写测试是不够的，我们还需要知道这些测试是否覆盖了代码的各个部分。这就是代码覆盖率的概念。代码覆盖率是一种度量标准，用于衡量测试代码执行了多少源代码。它帮助我们识别未被测试覆盖的代码区域，从而改进测试的全面性。

什么是代码覆盖率？​

代码覆盖率是指在运行测试时，有多少比例的源代码被实际执行。它通常以百分比表示，分为以下几种类型：

  1. 行覆盖率：测试覆盖了多少行代码。
  2. 分支覆盖率：测试覆盖了多少条件分支（如 if 语句）。
  3. 函数覆盖率：测试覆盖了多少函数。
  4. 语句覆盖率：测试覆盖了多少语句。

通过分析代码覆盖率，我们可以发现哪些代码没有被测试覆盖，从而有针对性地补充测试用例。

如何测量TypeScript代码覆盖率？​

在TypeScript中，我们可以使用工具如 Istanbul 或 Jest 来测量代码覆盖率。以下是一个使用 Jest 的示例。

安装 Jest​

首先，确保你已经安装了 Jest 和 TypeScript 支持：

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

然后，在项目根目录下创建一个 jest.config.js 文件，配置 Jest 以支持 TypeScript：

javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  collectCoverage: true,
  coverageDirectory: 'coverage',
};

编写测试​

假设我们有一个简单的 TypeScript 函数 sum，用于计算两个数字的和：

typescript
// src/sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

接下来，我们为这个函数编写一个测试：

typescript
// src/sum.test.ts
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

运行测试并生成覆盖率报告​

运行以下命令来执行测试并生成覆盖率报告：

bash
npx jest

Jest 会生成一个覆盖率报告，通常位于 coverage 目录下。打开 coverage/lcov-report/index.html 文件，你可以在浏览器中查看详细的覆盖率信息。

代码覆盖率的实际应用​

案例：优化测试覆盖率​

假设我们有一个更复杂的函数 divide，用于计算两个数字的商：

typescript
// src/divide.ts
export function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error('Division by zero is not allowed');
  }
  return a / b;
}

如果我们只编写以下测试：

typescript
// src/divide.test.ts
import { divide } from './divide';

test('divides 4 by 2 to equal 2', () => {
  expect(divide(4, 2)).toBe(2);
});

运行测试后，覆盖率报告会显示 if (b === 0) 分支未被覆盖。这意味着我们的测试没有验证除数为零的情况。为了改进覆盖率，我们可以添加一个测试用例：

typescript
test('throws error when dividing by zero', () => {
  expect(() => divide(4, 0)).toThrow('Division by zero is not allowed');
});

现在，覆盖率报告将显示所有代码都被覆盖。

总结​

代码覆盖率是评估测试质量的重要工具。通过测量覆盖率，我们可以发现测试中的盲点，并确保代码的每个部分都经过验证。对于初学者来说，掌握代码覆盖率的概念和工具是提升代码质量的关键一步。

附加资源​

练习​

  1. 为以下函数编写测试，并确保达到 100% 的代码覆盖率：

    typescript
    export function isEven(num: number): boolean {
      return num % 2 === 0;
    }

  2. 使用 Jest 生成覆盖率报告，并分析未覆盖的代码区域。

通过实践这些练习，你将更好地理解代码覆盖率的重要性，并掌握如何在实际项目中应用它。