如何使用 Jest 和 TypeScript 进行单元测试

程序员小雷

于 2025-01-14 14:14:00 发布

阅读量1.2k

点赞数 26

文章标签： typescript javascript 单元测试集成测试测试工具测试用例 selenium

本文链接：https://blog.csdn.net/OKCRoss/article/details/145137704

版权

1. 环境准备

　　要在项目中使用 TypeScript 和 Jest，首先确保你已安装以下工具：

　　·Node.js（建议使用 v16 或更高版本）

　　· npm 或 yarn

　　· TypeScript（建议使用最新版）

　　确认安装：

node -v
　　npm -v

2. 配置项目

　　2.1 初始化项目

　　创建一个新的 Node.js 项目并初始化：

　mkdir ts-jest-example
　　cd ts-jest-example
　　npm init -y

2.2 配置 TypeScript

　　安装 TypeScript 及相关工具：

npm install typescript @types/node --save-dev

初始化 TypeScript 配置：

　npx tsc --init

修改 tsconfig.json 配置，确保开启以下选项：

　　{
　　  "compilerOptions": {
　　    "target": "ES2017",
　　    "module": "commonjs",
　　    "strict": true,
　　    "esModuleInterop": true,
　　    "outDir": "./dist",
　　    "rootDir": "./src"
　　  }
　　}

创建 src 文件夹，用于存放代码和测试。

　　2.3 安装 Jest 及相关依赖

　　安装 Jest 和 TypeScript 支持插件：

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

初始化 Jest 配置：

npx ts-jest config:init

此命令会生成一个 jest.config.js 文件，配置示例如下：

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

3. 编写测试

　　以下以一个简单的函数为例，展示如何编写和测试代码。

　　3.1 编写简单的测试用例

　　创建文件 src/utils.ts：

　// utils.ts
　　export const sum = (a: number, b: number): number => {
　　  return a + b;
　　};

　为 sum 函数编写测试，创建文件 src/utils.test.ts：

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

运行测试：

　　npx jest

　　输出结果：

　PASS  src/utils.test.ts
　　√ adds 1 + 2 to equal 3 (5 ms)

3.2 测试异步代码

　　创建一个异步函数 src/asyncUtils.ts：

　// asyncUtils.ts
　　export const fetchData = async (): Promise<string> => {
　　  return new Promise((resolve) => {
　　    setTimeout(() => resolve('Hello, Jest!'), 1000);
　　  });
　　};

编写测试文件 src/asyncUtils.test.ts：

　// asyncUtils.test.ts
　　import { fetchData } from './asyncUtils';
　　test('fetchData returns correct data', async () => {
　　  const data = await fetchData();
　　  expect(data).toBe('Hello, Jest!');
　　});

运行测试：

　　npx jest

　3.3 测试接口调用（Mock 示例）

　　编写一个调用接口的函数 src/api.ts：

// api.ts
　　import axios from 'axios';
　　export const getUser = async (id: number): Promise<any> => {
　　  const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
　　  return response.data;
　　};

为 getUser 函数编写测试，使用 Jest Mock：

　// api.test.ts
　　import { getUser } from './api';
　　import axios from 'axios';
　　// Mock axios
　　jest.mock('axios');
　　const mockedAxios = axios as jest.Mocked<typeof axios>;
　　test('fetches user data', async () => {
　　  const mockUser = { id: 1, name: 'John Doe' };
　　  mockedAxios.get.mockResolvedValueOnce({ data: mockUser });
　　  const user = await getUser(1);
　　  expect(user).toEqual(mockUser);
　　  expect(mockedAxios.get).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/users/1');
　　});

运行测试并验证 Mock 功能。

　　4. 运行与调试

　　运行所有测试：

　npx jest

运行单个测试文件：

　npx jest src/utils.test.ts

在调试工具中运行测试（如 VSCode 的调试功能）：

　　在项目根目录创建 launch.json 文件。

　　配置如下：

　{
　　  "version": "0.2.0",
　　  "configurations": [
　　    {
　　      "type": "node",
　　      "request": "launch",
　　      "name": "Debug Jest Tests",
　　      "program": "${workspaceFolder}/node_modules/.bin/jest",
　　      "args": ["--runInBand"],
　　      "console": "integratedTerminal",
　　      "internalConsoleOptions": "neverOpen"
　　    }
　　  ]
　　}

　选择配置并开始调试。

　　5. 最佳实践

　　目录结构建议：

　　src：主代码文件夹。

　　tests：测试文件夹（可选，适用于大型项目）。

　　命名规范：

　　测试文件以 .test.ts 或 .spec.ts 结尾。

　　与被测试文件放在同一目录下或单独维护测试目录。

　　使用 Mock 减少依赖：

　　对于外部接口、数据库等不易直接测试的部分，使用 Jest Mock 减少测试依赖。

　　确保代码覆盖率：

　　添加覆盖率报告：