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

前言

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

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

使用步骤

1. 安装必要的依赖

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

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 编译选项:

{"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:

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

4. 编写 TypeScript 代码和测试

  1. 创建源码目录和测试目录:
mkdir -p src   
  1. 创建一个简单的 TypeScript 文件 src/math.ts:
export function add(a: number, b: number): number {return a + b;}export function subtract(a: number, b: number): number {return a - b;}
  1. 创建一个测试文件 src/math.test.ts:
  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);});
  1. 运行测试
在 package.json 中添加一个脚本来运行测试:
"scripts": {"test": "jest"
}

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

npm test

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

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:

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

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

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:

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

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

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:

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

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

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

4. 覆盖率报告

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

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']
};

然后运行:

npm test -- --coverage

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

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65018.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

商场消防电气控制系统设计(论文+源码)

1系统的功能及方案设计 如图2.1所示为本次设计的整体框图&#xff0c;其中单片机部分采用ST89C52来负责协调各个模块&#xff1b;液晶选择LCD1602液晶屏来显示信息;温度传感器选择PT1000进行温度的检测&#xff1b;烟雾传检测选择MQ2烟雾传感器&#xff1b;CO2检测选择CCS811模…

Springboot3声明式客户端

简介 Spring Framework 6 和 Spring Boot 3 引入了一些新的特性和改进&#xff0c;以简化 HTTP API 的消费。它允许开发者通过声明式接口来定义对外部 HTTP API 的调用。其中开发者只需要定义接口和方法签名&#xff0c;而具体的实现细节由框架自动生成。 这个特性通常被称为…

信贷域——互联网金融体系

摘要 本文介绍了互联网金融的概念、特征、发展阶段和生态。互联网金融是互联网与金融结合的新兴模式&#xff0c;以大数据、云计算为基础&#xff0c;实现资金融通和支付。发展经历了技术支持、业务领域深入到金融业务领域三个阶段。互联网金融生态包括互联网支付、P2P网络借贷…

精通Redis

目录 1.NoSQL 非关系型数据库 2.Redis 3.Redis的java客户端 4.Jedis 4.1Jedis快速入门 4.2Jedis连接池及使用 5.SpringDataRedis和RedisTemplate 6.SpringDataRedis快速入门 7.RedisSerializer 1.NoSQL 非关系型数据库 基础篇-02.初始Redis-认识NoSQL_哔哩哔哩_bilib…

LabVIEW水泵性能测试系统

在现代工业应用中&#xff0c;水泵作为一种广泛使用的流体输送设备&#xff0c;其性能的可靠性对整个生产系统的稳定运行至关重要。通过LabVIEW软件配合专业硬件设备&#xff0c;设计了一套水泵性能测试系统&#xff0c;实现对各类水泵的综合性能测试与分析&#xff0c;提升水泵…

2.利用docker进行gitlab服务器迁移

一、Docker安装 安装Ubuntu 22.04.3 LTS \n \l 1、旧版本安装包清理 sudo apt-get remove docker docker-engine docker.io containerd runc当你卸载Docker时&#xff0c;存储在/var/lib/docker/中的图像、容器、卷和网络不会自动删除。如果你想从一个干净的安装开始&#x…

无人零售 4G 工业无线路由器赋能自助贩卖机高效运营

工业4G路由器为运营商赋予 “千里眼”&#xff0c;实现对贩卖机销售、库存、设备状态的远程精准监控&#xff0c;便于及时补货与维护&#xff1b;凭借强大的数据实时传输&#xff0c;助力深度洞察销售趋势、优化库存、挖掘商机&#xff1b;还能远程升级、保障交易安全、快速处理…

zabbix监控山石系列Hillstone监控模版(适用于zabbix7及以上)

监控项&#xff1a; 触发器&#xff1a; 监控数据如下&#xff1a;

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo

【论文阅读笔记】Scalable, Detailed and Mask-Free Universal Photometric Stereo 前言摘要引言Task 相关工作方法SDM-UniPS预处理尺度不变的空间光特征编码器像素采样变压器的非局部交互 PS-Mix数据集 实验结果训练细节评估和时间&#xff1a; 消融实验定向照明下的评估没有对…

【MySQL】7.0 入门学习(七)——MySQL基本指令:帮助、清除输入、查询等

1.0 help &#xff1f; 帮助指令&#xff0c;查询某个指令的解释、用法、说明等。详情参考博文&#xff1a; 【数据库】6.0 MySQL入门学习&#xff08;六&#xff09;——MySQL启动与停止、官方手册、文档查询 https://www.cnblogs.com/xiaofu007/p/10301005.html 2.0 在cmd命…

低代码开源项目Joget的研究——基本概念和应用

大纲 1. 基本概念1.1 Form1.1.1 Form1.1.1.1 概述1.1.1.2 主要特点和用途1.1.1.3 创建和使用 Form1.1.1.4 示例 1.1.2 Section1.1.2.1 概述1.1.2.2 主要特点和用途1.1.2.3 示例 1.1.3 Column1.1.4 Field1.1.5 示例 1.2 Datalist1.2.1 Datalist1.2.1.1 主要特点和用途1.2.1.2 创…

单机游戏《野狗子》游戏运行时提示dbghelp.dll缺失是什么原因?dbghelp.dll缺失要怎么解决?

《野狗子》游戏运行时提示dbghelp.dll缺失&#xff1a;原因与解决方案 在畅游《野狗子》这款引人入胜的游戏世界时&#xff0c;突然遭遇“dbghelp.dll缺失”的错误提示&#xff0c;无疑会给玩家的探险之旅蒙上一层阴影。作为一名深耕软件开发领域的从业者&#xff0c;我深知此…

Marscode AI辅助编程

直接使用Marscode的云服务来开发&#xff0c;也是很方便的&#xff0c;不用担心配置环境的问题&#xff0c;很适合初步学习&#xff0c;在任何设备都能开发。 番茄钟 请你基于html、tailwind css和javascript&#xff0c;帮我设计一个“番茄时钟”。要求UI简洁美观大方&#x…

使用Vue的props进行组件传递校验时出现 Extraneous non-props attributes的解决方案

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;WebStorm 目录 出现错误的情况 报错&#xff1a; 代码&#xff1a; 报错截图 原因分析 解决方案 方法一 方法二 出现错误的情况 以下是我遇到该错误时遇到的报错和代码&…

ffmpeg之显示一个yuv照片

显示YUV图片的步骤 1.初始化SDL库 目的&#xff1a;确保SDL库正确初始化&#xff0c;以便可以使用其窗口、渲染和事件处理功能。操作&#xff1a;调用 SDL_Init(SDL_INIT_VIDEO) 来初始化SDL的视频子系统。 2.创建窗口用于显示YUV图像&#xff1a; 目的&#xff1a;创建一个…

iDP3复现代码模型训练全流程(一)——train_policy.sh

iDP3 核心脚本包括三个&#xff1a;deploy_policy.sh、vis_dataset.sh、train_policy.sh&#xff0c;分别代表了部署、预处理和训练&#xff0c;分别作为对应 py 脚本的参数设置前置环节 训练环节仅需运行指令&#xff1a; # 3d policy bash scripts/train_policy.sh idp3 gr1…

链原生 Web3 AI 网络 Chainbase 推出 AVS 主网, 拓展 EigenLayer AVS 应用场景

Chainbase AVS 主网的正式上线&#xff0c;正在将 Chainbase 不同的层进行深入的串联&#xff0c;为 Chainbase 数据网络带来了验证和处理方面的应用与拓展的能力&#xff0c;并成为数据体系全面启动的新契机。 在 12 月 4 日&#xff0c;链原生的 Web3 AI 数据网络 Chainbase …

Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码 【AI辅助开发系列】

&#x1f380;&#x1f380;&#x1f380;【AI辅助编程系列】&#x1f380;&#x1f380;&#x1f380; Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码Visual Studio 安装和管理 GitHub CopilotVisual Studio 使用 GitHub Copilot 扩展Visual Studio 使用 GitHu…

Jenkins 任意文件读取(CVE-2024-23897)修复及复现

Jenkins任意文件读取漏洞CVE-2024-23897修复及复现 漏洞详情影响范围漏洞复现修复建议 Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行…

智慧农业云平台与水肥一体化:道品科技引领农业现代化新潮流

在当今科技飞速发展的时代&#xff0c;农业也正经历着一场深刻的变革。智慧农业云平台和水肥一体化技术的出现&#xff0c;为农业生产带来了前所未有的机遇和挑战。 一、智慧农业云平台&#xff1a;农业生产的 “智慧大脑” 智慧农业云平台就像是农业生产的 “智慧大脑”&…