如何使用 TypeScript 和 Jest 编写高质量单元测试

前言

在前端开发中，TypeScript 和 Jest 是两款不可或缺的工具。TypeScript 提供了强大的静态类型检查和现代 JavaScript 特性，显著提高了代码的可靠性和可维护性。而 Jest 作为一个功能丰富的测试框架，能够方便地编写和运行各种测试，从单元测试到集成测试。

本文将详细介绍如何将这两者结合起来，基于 TypeScript 编写 Jest 测试代码，从而提升项目的质量和开发效率。

使用步骤

1. 安装必要的依赖

安装 TypeScript 和 Jest 以及一些其他必要的工具：

clike 复制代码

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

typescript: TypeScript 编译器
jest: Jest 测试框架
@types/jest: Jest 的 TypeScript 类型定义
ts-jest: 一个让 Jest 能够理解 TypeScript 的工具

2. 配置 TypeScript

在项目根下创建一个 tsconfig.json 文件，用于配置 TypeScript 编译选项：

clike 复制代码

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

3. 配置 Jest

在项目根目录下创建一个 jest.config.js 文件，用于配置 Jest：

clike 复制代码

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

4. 编写 TypeScript 代码和测试

clike 复制代码

mkdir -p src

创建一个简单的 TypeScript 文件 src/math.ts：

clike 复制代码

export function add(a: number, b: number): number {
      return a + b;
    }

    export function subtract(a: number, b: number): number {
      return a - b;
    }

创建一个测试文件 src/math.test.ts：

clike 复制代码

  import { add, subtract } from './math';

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

    test('subtracts 5 - 2 to equal 3', () => {
      expect(subtract(5, 2)).toBe(3);
    });

运行测试

clike 复制代码

在 package.json 中添加一个脚本来运行测试：
"scripts": {
  "test": "jest"
}

然后你可以通过以下命令运行测试：

clike 复制代码

npm test

如果一切配置正确，你应该会看到类似如下的输出：

clike 复制代码

PASS  src/math.test.ts
  ✓ adds 1 + 2 to equal 3 (5ms)
  ✓ subtracts 5 - 2 to equal 3 (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        2.345s

进阶技巧

1. 使用 Mock 函数

有时候，我们需要测试的模块依赖于外部服务或复杂的内部逻辑。此时，可以使用 Jest 的 Mock 功能来模拟这些依赖，从而专注于测试目标代码。

假设我们有一个依赖于外部 API 的模块 src/api.ts：

clike 复制代码

import axios from 'axios';

export async function fetchData(url: string): Promise<any> {
  const response = await axios.get(url);
  return response.data;
}

我们可以为这个函数编写测试，使用 Jest 的 Mock 功能：

clike 复制代码

import { fetchData } from './api';
import axios from 'axios';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

test('fetches successfully data from an API', async () => {
  const data = { name: 'John Doe' };
  mockedAxios.get.mockResolvedValue({ data });

  const result = await fetchData('https://api.example.com/user');
  expect(result).toEqual(data);
});

2. 测试异步代码

在实际开发中，很多代码都是异步的。Jest 提供了多种方法来测试异步代码，包括 async/await、回调和 Promises。

假设我们有一个异步函数 src/asyncExample.ts：

clike 复制代码

export function fetchData(callback: (data: string) => void) {
  setTimeout(() => {
    callback('peanut butter');
  }, 1000);
}

我们可以使用 Jest 测试这个异步函数：

clike 复制代码

import { fetchData } from './asyncExample';

test('fetches data successfully', done => {
  function callback(data: string) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

3. 测试错误处理

编写测试时，不仅要测试成功的情况，还要测试失败的情况，确保代码能正确处理各种边缘情况。

假设我们有一个抛出错误的函数 src/errorExample.ts：

clike 复制代码

export function riskyFunction() {
  if (Math.random() < 0.5) {
    throw new Error('Something went wrong');
  }
  return 'Success';
}

我们可以编写测试来验证错误处理：

clike 复制代码

import { riskyFunction } from './errorExample';

test('throws an error half the time', () => {
  expect(() => riskyFunction()).toThrow('Something went wrong');
});

4. 覆盖率报告

了解代码的测试覆盖率是一项重要的实践，能帮助你找到未测试的代码部分。要生成覆盖率报告，可以在 jest.config.js 中添加以下配置：

clike 复制代码

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'lcov']
};

然后运行：

clike 复制代码

npm test -- --coverage

你会在控制台看到覆盖率报告，并在项目根目录下生成一个 coverage 文件夹，里面包含详细的 HTML 报告。

总结

通过本文，你已经全面了解了如何基于 TypeScript 编写 Jest 测试代码。我们不仅介绍了基本的设置和使用，还深入探讨了进阶技巧和最佳实践。这些内容将帮助你在实际项目中更有效地应用 TypeScript 和 Jest，确保代码的健壮性和可靠性。