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 编程技能！
