38 测试与调试 🕵️‍♂️之使用Jest进行测试

在前一章中，我们讨论了如何编写单元测试，了解了测试的重要性以及如何利用测试确保代码的正确性。在本章中，我们将深入探讨如何使用 Jest 进行测试。Jest 是一个流行的 JavaScript 测试框架，特别适合于测试 TypeScript 应用程序。无论是单元测试还是集成测试，Jest 都能够很好地满足我们的需求。

什么是Jest？

Jest 是一个零配置的 JavaScript 测试框架，由 Facebook 创建并维护。它具有快速、易于使用以及丰富的功能等优点。Jest 默认支持快照测试、异步测试和模拟等特性，使得我们可以更方便地进行全面的测试。

设置Jest

在开始之前，我们需要确保 Jest 已经安装并在项目中配置。我们可以通过以下命令来安装 Jest 和类型声明：

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

接下来，我们需要在项目根目录下创建一个 jest.config.js 文件来配置 Jest：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

这样我们就完成了对 Jest 的基础配置。

编写测试

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

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

我们想要为这个函数编写测试。我们将创建一个新的测试文件 math.test.ts：

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

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

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

运行测试

我们可以通过以下命令来运行 Jest 测试：

npx jest

如果一切正常，你将看到类似于以下的输出，表示测试通过：

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

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.723s, estimated 2s
Ran all test suites.

测试异步代码

在现代应用程序中，异步代码是很常见的。Jest 对异步测试的支持也非常好。假设我们有一个函数，它从 API 获取数据：

// src/api.ts
export const fetchData = async (url: string): Promise<string> => {
  const response = await fetch(url);
  const data = await response.json();
  return data.message;
};

我们可以为这个函数编写异步测试：

// src/api.test.ts
import { fetchData } from './api';

describe('fetchData function', () => {
  test('fetches data from API', async () => {
    const data = await fetchData('https://api.example.com/message');
    expect(data).toBe('Hello, World!');
  });
});

为了让这个测试通过，我们可能需要使用 Jest 的 mocking 功能，以避免对真实 API 的调用。我们可以这样设置：

// src/api.test.ts
import { fetchData } from './api';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ message: 'Hello, World!' }),
  })
);

describe('fetchData function', () => {
  test('fetches data from API', async () => {
    const data = await fetchData('https://api.example.com/message');
    expect(data).toBe('Hello, World!');
  });
});

快照测试

Jest 还支持快照测试，这是检查组件或对象序列化输出的一种强大方式。我们假设有一个函数返回一个用户对象：

// src/user.ts
export function createUser(name: string, age: number) {
  return { name, age };
}

我们可以为它编写快照测试：

// src/user.test.ts
import { createUser } from './user';

describe('createUser function', () => {
  test('creates a user object', () => {
    const user = createUser('Alice', 30);
    expect(user).toMatchSnapshot();
  });
});

首次运行测试时，Jest 会生成一个快照文件以保存对象的结构。以后的测试运行将对比这个快照，确保输出未发生变化。

总结

通过本章的学习，我们掌握了如何使用 Jest 进行 TypeScript 应用程序的测试，包括单元测试、异步测试以及快照测试。通过编写高质量的测试，我们可以确保代码的可靠性，并在维护和扩展时保持信心。下一章将深入探讨调试技巧，帮助我们更有效地定位和解决问题。希望大家继续跟随我们的系列教程，提升 TypeScript 编程技能！