如何使用 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,一经查实,立即删除!

相关文章

在数据采集中,动态代理如何模拟不同地区的用户行为?

在数据采集的广阔领域中&#xff0c;动态代理IP扮演着一个关键角色&#xff0c;它能够模拟不同地区的用户行为&#xff0c;为我们提供了一种强大的工具来收集和分析数据。这篇文章将带你深入了解动态代理如何在数据采集中发挥作用&#xff0c;以及它是如何帮助我们模拟全球各地…

停车管理系统:构建安全、便捷的停车环境

Tomcat 简介 只要学习Java Web项目就不得不学习Tomcat。Tomcat是一种免费的开源的一种Java Web项目的容器&#xff0c;完美继承了 Apache服务器的特性&#xff0c;并且里面添加可以自动化运行的Java Web组件&#xff0c;让Java Web项目可以完全的运行到Tomcat里面。对于特大型项…

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

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

2024 年 IA 技术大爆发深度解析

摘要&#xff1a; 本文旨在深入剖析 2024 年 IA 技术大爆发所引发的多方面反响。通过对产业变革、经济影响、就业市场、社会影响、政策与监管以及未来展望等维度的探讨&#xff0c;揭示 IA 技术在这一关键时期对全球各个层面带来的深刻变革与挑战&#xff0c;并提出相应的思考与…

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命…

网络基础知识--4

什么是PBR? 1.定义 PBR&#xff08;Policy - Based Routing&#xff09;即策略路由。它是一种网络技术&#xff0c;允许网络管理员根据自己定义的策略来转发数据包&#xff0c;而不是仅仅依赖于传统的基于目的地址的路由方式。通过 PBR&#xff0c;网络管理员可以灵活地控制…

2024最新鸿蒙开发面试题合集-HarmonyOS NEXT Release(API 12 Release)

1. HarmonyOS应用打包后的文件扩展名是? 打包后的文件扩展名为.hap&#xff08;HarmonyOS Ability Package&#xff09;&#xff0c;这是HarmonyOS应用的标准包格式 2. 页面和自定义组件生命周期有哪些? 页面和自定义组件生命周期说明 有Entry装饰器的component组件的生命…

低代码开源项目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; 报错截图 原因分析 解决方案 方法一 方法二 出现错误的情况 以下是我遇到该错误时遇到的报错和代码&…

后端-redis

Redis RedisString类型String类型的常用命令 Hash类型Hash类型的常用命令 List类型List类型的常用命令 Set类型Set类型的常用命令 SortedSet类型SortedSet类型的常用命令 Redis序列化缓存更新策略缓存穿透缓存雪崩缓存击穿 Redis Redis是一个key-value的数据库&#xff0c;key…