当前位置: 首页 > news >正文

搭建TypeScript单元测试环境

我们在学习TypeScript的时候如果能够搭建一个单元测试的环境,那写些demo会很简单,下面我们使用jest来搭建一个单元测试环境

Jest 是一个由 Facebook 开发并开源的 JavaScript 测试框架,被广泛应用于前端和 Node.js 项目的单元测试。以下是关于 Jest 的一些关键信息:

  1. 简单易上手:Jest 具有简洁的 API,新接触测试的开发者也能快速理解和使用。例如,编写一个简单的测试用例只需要使用 test 函数包裹断言语句:
  • 自动测试运行:Jest 会自动运行测试文件,并且可以实时监控文件变化,在代码发生更改时自动重新运行相关测试。
  • 内置断言库:提供了丰富的断言函数,如 toBe(用于比较基本数据类型的相等性)、toEqual(用于比较对象和数组的内容)、toBeTruthy(检查值是否为真值)、toBeFalsy(检查值是否为假值)等,方便对各种情况进行验证。
  • 快照测试:允许开发者保存组件或数据结构的 “快照”,并在后续测试中比较是否发生变化。这对于确保 UI 组件的输出一致性非常有用。

先新建一个空白项目,然后新建src目录,在src目录下新建index.ts

export function add(a: number, b: number) {return a + b;
}

在src下新建tests目录,新建index.test.ts

import { add } from "../index";//写一个add的测试用例
test("testAdd", () => {expect(add(1,2)).toBe(3);
});

安装ts环境

yarn add typescript --dev

初始化 ts 环境,执行下面命令,自动生成 tsconfig.json 文件

npx tsc --init

在 tsconfig.json 中(ctrl F 搜索 types 配置项,解开注释,并配置)

"types": ["jest"],     

安装 jest 并引入 ts 类型文件

yarn add jest @types/jest --dev

安装 jest babel 依赖环境

yarn add --dev babel-jest @babel/core @babel/preset-env

安装 jest babel 下的 ts 环境,用来支持 ts

yarn add --dev @babel/preset-typescript

根目录下创建 babel.config.js,写入并导出配置:

module.exports = {presets: [["@babel/preset-env", { targets: { node: "current" } }],"@babel/preset-typescript"]
};

在 package.json 中配置 scripts 的 test 字段,package.json整体如下

{"devDependencies": {"@babel/core": "^7.26.10","@babel/preset-env": "^7.26.9","@babel/preset-typescript": "^7.27.0","@types/jest": "^29.5.14","babel-jest": "^29.7.0","jest": "^29.7.0","typescript": "^5.8.3"},"scripts": {"test": "jest"}
}

总体目录结构如下

 

这样所有环境都配置完了,最后在终端中执行:

yarn test

如果你使用了WebStorm,可以直接执行

相关文章:

搭建TypeScript单元测试环境

我们在学习TypeScript的时候如果能够搭建一个单元测试的环境,那写些demo会很简单,下面我们使用jest来搭建一个单元测试环境 Jest 是一个由 Facebook 开发并开源的 JavaScript 测试框架,被广泛应用于前端和 Node.js 项目的单元测试。以下是关…...

Vue3父子组件数据同步方法

在 Vue 3 中&#xff0c;当子组件需要修改父组件传递的数据副本并同步更新时&#xff0c;可以通过以下步骤实现&#xff1a; 方法 1&#xff1a;使用 v-model 和计算属性&#xff08;实时同步&#xff09; 父组件&#xff1a; vue <template><ChildComponent v-mo…...

免费且开源的企业级监控解决方案:Zabbix

一、Zabbix 简介 Zabbix 是一款功能强大的企业级开源监控解决方案。它可以监控各种 IT 基础设施组件&#xff0c;包括网络设备、服务器、虚拟机、云服务、应用程序和数据库等。Zabbix 提供实时的监控、告警、报表和可视化功能&#xff0c;帮助用户及时发现和解决 IT 系统中的问…...

高并发系统的通用设计方法是什么?

背景 高并发系统的通用设计方法是解决系统在面对大量用户访问时的性能瓶颈问题。当系统遇到性能瓶颈时&#xff0c;通常是因为某个单点资源&#xff08;如数据库、后端云服务器、网络带宽等&#xff09;达到了极限。 为了提升整个系统的容量&#xff0c;需要找到这个瓶颈资源…...

ubuntu系统下部署使用git教程

在ubuntu系统下部署并使用git教程 1.下载并安装 sudo apt update sudo apt install git2.检验安装是否成功 git --version若输出git版本号即为成功。 3.配置参数 git config --global user.name "你的名字" git config --global user.email "你的邮箱&quo…...

redis client.ttl(key)

对应 Redis 的 TTL 命令&#xff1a; bash 复制 下载 TTL key 使用示例 1. 基本用法 java 复制 下载 try (Jedis jedis jedisPool.getResource()) {long ttl jedis.ttl("user:1001:session");if (ttl > 0) {System.out.println("键将在 " t…...

基于ACL方式手动建立站点间 IPSec 隧道

换句话说 不使用 IKE 自动协商&#xff0c;而是静态配置密钥和 SPI&#xff08;安全参数索引&#xff09;来配置隧道规则 环境基础 还是使用eNSP软件进行模拟&#xff0c;等后面再更新实际通信中的环境 没有框架&#xff0c;就没有基本思路 还是使用前面文章GRE VPN的拓扑&…...

电池大脑的基准测试及AI拓展

从为我们的智能手机供电到驱动电动汽车&#xff0c;我们的日常生活都离不开锂离子电池&#xff08;LIB&#xff09;。但是&#xff0c;理解其复杂的内部运作并预测其性能需要精密的工具。由此引入了多孔电极理论&#xff08;PET&#xff09;模型&#xff0c;我们可以将其视为模…...

数据通信学习笔记之OSPF的基础术语

Router ID RouterID 用于在自治系统中唯一标识一省运行 OSPF 的路由器&#xff0c;它是一个 32 位的无符号整数 配置完成后&#xff0c;如果需要修改 Router ID 的话&#xff0c;需要重启进程才能上生效 ​<Huawei>reset ospf 1 process​ // 重启 ospf 进程 1 Route…...

Android Cordova 开发 - Cordova 快速入门(Cordova 环境配置、Cordova 第一个应用程序)

一、Cordova 1、Cordova 概述 Cordova 是使用 HTML&#xff0c;CSS 和 JavaScript 构建混合移动应用程序的平台 2、Cordova 特征 &#xff08;1&#xff09;命令行界面&#xff08;Cordova CLI&#xff09; 这是可用于启动项目&#xff0c;构建不同平台的进程&#xff0c;…...

AndroidAutomotive模块介绍(四)VehicleHal介绍

前言 前面的文章中&#xff0c;描述了 Android Automotive 的框架中应用、Framework 层服务等知识&#xff0c;本篇文章将会继续按照 Android Automotive 框架介绍 Vehicle Hal 层服务的内容。 上一篇&#xff1a;AndroidAutomotive模块介绍&#xff08;三&#xff09;CarSer…...

Pingora vs. Nginx vs. 其他主流代理服务器性能对比

Pingora vs. Nginx vs. 其他主流代理服务器性能对比 核心对比概览 特性Pingora (Cloudflare)NginxEnvoyHAProxyCaddyTraefik开发公司CloudflareNginx, Inc/F5Lyft/CNCFHAProxy TechApache 2.0社区Containous核心语言RustCCCGoGo并发模型异步/多线程事件驱动事件驱动事件驱动协…...

4月23日作业

需求&#xff1a; 1&#xff0c;R5为ISP&#xff0c;其上只能配置IP地址&#xff1b; R5与其他所有直连设备间均使用公有IP&#xff1b;环回地址为100.1.1.1/32 2&#xff0c;R4设备为企业出口路由器 3&#xff0c;整个OSPF环境IP基于172.16.0.0/16划分&#xff1b; 4&…...

5.学习笔记-SpringMVC(P53-P60)

1.响应 &#xff08;1&#xff09;响应页面 &#xff08;2&#xff09;响应数据&#xff08;异步提交&#xff09;&#xff1a;文本数据、json数据 2.REST风格 (1)REST:表现形式状态转换。 (2)传统风格资源描述形式 3.Restful入门案例 5.基于RESTful页面数据…...

安卓14默认赋予应用权限

安卓14上赋予应用默认权限的方式跟之前的不太一样了 需要修改两个地方&#xff0c;一个是frameworks\base\services\core\java\com\android\server\pm\permission\Permission.java public boolean isNormal() {//eturn (mPermissionInfo.protectionLevel & PermissionInfo…...

数据的加载与保存

加载数据的方法 选项参数&#xff1a;可以通过选项参数传入URL地址、用户名、密码和数据表名称等。 路径参数&#xff1a;可以传入加载数据的路径。 MySQL语句&#xff1a;可以直接导入MySQL语句来加载数据。 保存数据的方法通用方法&#xff1a;使用df.write方法保存数据。…...

网络编程——通信三要素

一、概述 &#xff08;一&#xff09;网络编程 可以让设备中的程序与网络上的其他设备中的程序进行数据交互&#xff0c;实现网络通信 Java.net包下提供了网络编程的解决方案。 &#xff08;二&#xff09;通信的基本架构 1. CS架构&#xff08;Client客户端/Server服务端…...

es-存储与搜索优化

字段选型优化 链接&#xff1a;es-字段类型详解与优化建议 存储优化 es的底层使用Lucene,Lucene的存储的核心文件包括&#xff1a; 原始数据存储&#xff08;Store&#xff09;、倒排索引&#xff08;Inverted Index&#xff09;、列式存储&#xff08;DocValues&#xff09…...

Hadoop 集群扩容新增节点操作文档

Hadoop 集群扩容新增节点操作文档 一、前期准备 1. 环境检查&#xff08;所有新节点&#xff09; 确保 JDK 安装&#xff1a; java -version确保 Hadoop 安装&#xff1a; hadoop version添加主机名映射&#xff08;所有节点&#xff09;&#xff1a; cat >> /etc/h…...

高光谱相机在工业检测中的应用:LED屏检、PCB板缺陷检测

随着工业检测精度要求的不断提升&#xff0c;传统机器视觉技术逐渐暴露出对非可见光物质特性识别不足、复杂缺陷检出率低等局限性。高光谱相机凭借其独特的光谱分析能力&#xff0c;为工业检测提供了革命性的解决方案。以下结合中达瑞和VIX系列推扫式高光谱相机的技术特点与实际…...

07-IDEA企业开发工具-开发入门程序

1. IDEA创建Java项目的代码结构 项目结构: IDEA中的Java项目包含四种主要结构&#xff1a;工程(Project)、模块(Module)、包(Package)、类(Class)。 工程(Project): 代表整个项目&#xff0c;通常是一个磁盘目录或文件夹。模块(Module): 工程下的子单元&#xff0c;用于划分项…...

即插即用模块(3) -LSK 特征提取

paper&#xff1a;LSKNet: A Foundation Lightweight Backbone for Remote Sensing Code&#xff1a;https://github.com/zcablii/LSKNet 大型选择性内核块 (LSK Block) 功能 通过动态调整感受野&#xff0c;自适应提取遥感图像中目标的上下文信息&#xff0c;增强目标与环境关…...

彩虹表攻击与Nest密码存储

文章目录 前言&#x1f9e8; 什么是彩虹表攻击&#xff1f;&#x1f4f7; 图中解析左侧是彩虹表&#xff1a;右侧是用户数据库中的数据&#xff1a; &#x1f510; 如何防御彩虹表攻击&#xff1f;✅ 1. **使用 Salt 加密&#xff08;推荐&#xff09;**✅ 2. **使用强哈希函数…...

vue keep-alive标签的运用

keep-alive&#xff0c;想必大家都不会很陌生&#xff0c;在一些选项卡中会使用到。其实&#xff0c;它的作用大概就是把组件的数据给缓存起来。 比如果我有一个选项卡&#xff0c;标签一&#xff0c;标签二&#xff0c;标签三。现在&#xff0c;我需要实现&#xff0c;当我在标…...

python编写一段爱心代码

代码编写 1. 导入模块和常量定义 python import random from math import sin, cos, pi, log from tkinter import *CANVAS_WIDTH 640 # 画布的宽 CANVAS_HEIGHT 480 # 画布的高 CANVAS_CENTER_X CANVAS_WIDTH / 2 # 画布中心的X轴坐标 CANVAS_CENTER_Y CANVAS_HEIGH…...

Python流程控制

目录 一&#xff0c;条件判断&#xff1a;if语句 1.基本语法与示例 2.多重条件判断&#xff08;elif&#xff09; 3.常见错误与避坑指南 1.缩进错误 2.遗漏冒号 二&#xff0c;循环结构&#xff1a;while与for 1.while循环 2.Python的注释 3.字符串的格式化输出 4.fo…...

机器人雅克比Jacobian矩阵程序

% 定义机器人的连杆参数 L1 Link(d, 0, a, 0, alpha, pi/2); L2 Link(d, 0, a, 1, alpha, 0); L3 Link(d, 0, a, 1, alpha, 0);% 创建机器人对象 robot SerialLink([L1, L2, L3], name, MyRobot);% 设置机器人的关节角度&#xff08;弧度&#xff09; q [0, pi/4, pi/6];%…...

Qt Creator中自定义应用程序的可执行文件图标

要在Qt Creator中为你的应用程序设置自定义可执行文件图标&#xff0c;你需要按照以下步骤操作&#xff1a; Windows平台设置方法 准备图标文件&#xff1a; 创建一个.ico格式的图标文件&#xff08;推荐使用256x256像素&#xff0c;包含多种尺寸&#xff09; 可以使用在线工…...

应该怎样理解“被劫持“

通常, 在 iOS 开发相关的语境中&#xff0c;「被劫持」的精确定义 一句话&#xff1a;任何「未经应用或服务器授权&#xff0c;第三方改变了客户端—服务器之间解析结果、传输路径或数据内容」的情形&#xff0c;都视为网络被劫持。 具体可拆成 六大类&#xff0c;每类都对应可…...

RocketMQ面试题:进阶部分

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…...

【k8s系列7-更新中】kubeadm搭建Kubernetes高可用集群-三主两从

主机准备 结合前面的章节,这里需要5台机器,可以先创建一台虚拟机作为基础虚拟机。优先把5台机器的公共部分优先在一台机器上配置好 1、配置好静态IP地址 2、主机名宇IP地址解析 [root@localhost ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost…...

12、高阶组件:魔法增幅器——React 19 HOC模式

一、魔法增幅器的本质 "高阶组件是魔法师用咒语叠加的炼金术&#xff0c;"霍格沃茨魔咒研究院院长凝视着发光的增幅器&#xff0c;"通过函数式能量场的嵌套&#xff0c;让基础组件获得预言家日报式的逻辑继承&#xff01;" ——以神秘事务司的「维度叠加理…...

Linux避免文件误删详解(Linux Avoids File Deletion Errors with Detailed Explanation)

Linux避免文件误删详解 背景 大家都知道&#xff0c;rm指令在Linux中非常牛&#xff0c;rm -rf更是牛中的霸主。什么删系统跑路、删库跑路就是这个指令造成的。可以看出指令虽然牛&#xff0c;但是危险性极高。那么怎么避免某些时候的这种误操作造成的影响呢&#xff0c;阿祥…...

模板方法模式:定义算法骨架的设计模式

模板方法模式&#xff1a;定义算法骨架的设计模式 一、模式核心&#xff1a;模板方法定义算法骨架&#xff0c;具体步骤延迟到子类实现 在软件开发中&#xff0c;经常会遇到这样的情况&#xff1a;某个算法的步骤是固定的&#xff0c;但具体步骤的实现可能因不同情况而有所不…...

QT之Q_PROPERTY介绍以及在QWidget中的用法

目录 一、 Q_PROPERTY介绍 1、 Q_PROPERTY是什么 2、Q_PROPERTY 的语法 3、Q_PROPERTY 的作用 二、在QWidget中的用法 1、示例1&#xff1a;自带属性 2、 示例2&#xff1a;自建属性第一种 3、 示例3&#xff1a;自建属性第二种 4、动态属性 三、注意事项 四、总结 一…...

MySQL 8 自动安装脚本(CentOS-7 系统)

文章目录 一、MySQL 8 自动安装脚本脚本说明&#x1f4cc; 使用脚本前提条件1. 操作系统2. 用户权限3. 网络要求 &#x1f4cc; 脚本的主要功能1. 环境检查2. MySQL 自动安装3. 自动配置 MySQL4. 防火墙配置5. 验证与输出 &#x1f4cc; 适用场景 二、执行sh脚本1. 给予脚本执行…...

软件测试基础知识(2) -- 软件评测师(十三)

3 基于风险的测试 风险是当前未发生而未来有肯会发生并造成一定负面影响的事件。 3.1 基于风险的测试概述 &#xff08;1&#xff09;测试计划内容的核心&#xff1a; 1&#xff09;测什么&#xff1a;从风险出发&#xff0c;需要明确地列举出要测试哪些具体的功能和非功能的质…...

axios 在请求拦截器中设置Content-Type无效问题

Axios 会根据请求数据自动设置 Content-Type&#xff1a; 当请求体为空时&#xff0c;Axios 会移除 Content-Type 头部 当请求体为对象时&#xff0c;默认设置为 application/json 当请求体为 URLSearchParams 时&#xff0c;默认设置为 application/x-www-form-urlencoded …...

MFC案例:使用键盘按键放大、缩小窗口图像的实验

当在对话框窗口居中显示一幅图像时&#xff0c;图像的尺寸可能大于或小于窗口的尺寸&#xff0c;这时我们希望通过使用按键“”进行图像放大显示&#xff0c;使用按键“-”进行缩小显示&#xff08;当然也可以使用其它按键&#xff09;。下面开始使用MFC进行这个实验&#xff0…...

本地(NAS/服务器)与云端(Docker/Kubernetes)部署详解与对比

本地&#xff08;NAS/服务器&#xff09;与云端&#xff08;Docker/Kubernetes&#xff09;部署详解与对比 一、本地部署&#xff08;NAS/服务器&#xff09; 适用场景&#xff1a; 需要完全控制硬件和数据&#xff08;如隐私敏感场景&#xff09;。小规模应用或测试环境。网…...

如何解决极狐GitLab 合并冲突?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 合并冲突 (BASIC ALL) 合并冲突发生在合并请求的两个分支&#xff08;源分支和目标分支&#xff09;对相同代码行进行了不同…...

DeepSeek在物联网设备中的应用:通过轻量化模型实现本地化数据分析

文章目录 一、引言二、DeepSeek轻量化模型的技术原理1. 模型量化2. 模型剪枝3. 动态精度调整 三、本地化数据分析的实现路径1. 硬件环境配置2. 模型加载与推理3. 数据预处理与后处理 四、行业应用案例1. 医疗智能穿戴设备2. 工业设备预测性维护3. 智能家居能耗优化 五、性能优化…...

opencv--图像

像素(像素点) 定义&#xff1a; Pixel 是 Picture Element&#xff08;图像元素&#xff09;的缩写&#xff0c;是数字图像中最小的独立单位。每个像素代表图像中的一个点的颜色和亮度信息。 关键特性&#xff1a; 颜色&#xff1a;通过不同的色彩模型&#xff08;如RGB、CMYK…...

【KWDB 创作者计划】_嵌入式硬件篇---数字电子器件

文章目录 前言一、系列前缀(如 "74" 或 "54")74(商用级)54(工业级)二、逻辑家族(如 "LS"、"HC"、"HCT" 等)TTL(晶体管-晶体管逻辑)家族CMOS(互补金属氧化物半导体)家族BiCMOS(双极 CMOS)家族三、功能编号(如…...

前端加密介绍与实战

前端数据加密 文章目录 前端数据加密前端数据加密介绍为什么需要前端数据加密&#xff1f;前端数据加密的常见方式前端数据加密的实现场景&#xff1a;加密用户密码并发送到后端步骤 1&#xff1a;安装加密库步骤 2&#xff1a;实现加密逻辑步骤 3&#xff1a;后端解密 实战总结…...

DAG(有向无环图)计算模型面试内容整理-拓扑排序(Topological Sort)和节点依赖与并行度

拓扑排序(Topological Sort) 拓扑排序(Topological Sort): 拓扑排序是针对有向无环图(DAG)的一种线性排序方法。这种排序方法的特点是,对于DAG中的每一条有向边 (A → B),在拓扑排序中节点A总是排在节点B之前。...

AI语音助手自定义角色百度大模型 【全新AI开发套件掌上AI+4w字教程+零基础上手】

1、简介 此项目主要使用ESP32-S3实现一个自定义角色的AI语音聊天助手&#xff08;比如医生角色&#xff09;&#xff0c;可以通过该项目熟悉ESP32-S3 arduino的开发&#xff0c;百度语音识别&#xff0c;百度语音合成API调用&#xff0c;百度APPBuilder API的调用实现自定义角…...

【Java面试笔记:基础】13.谈谈接口和抽象类有什么区别?

在 Java 中,接口(Interface) 和 抽象类(Abstract Class) 都是实现多态和代码抽象的机制,但它们在设计目的、语法特性及使用场景上有显著差异。 1. 接口和抽象类的区别 接口(Interface) 定义:接口是对行为的抽象,是抽象方法的集合,用于定义 API 规范。 特点: 不能…...

内存管理(Linux程序设计)

内存管理 目录 内存管理 一.简单的内存分配 代码功能概述 代码流程图 变量声明 动态内存分配 内存分配错误检查 向内存写入字符串 设置退出状态并退出程序 二.请求全部的物理内存 代码功能概述 变量声明 三..可用内存 四.滥用内存 1.代码功能&#xff08;预期 …...

Prompt 结构化提示工程

Prompt 结构化提示工程 目前ai开发工具都大同小异&#xff0c;随着deepseek的流行&#xff0c;ai工具的能力都差不太多&#xff0c;功能基本都覆盖到了。而prompt能力反而是需要更加关注的&#xff08;说白了就是能不能把需求清晰的输出成文档&#xff09;。因此大家可能需要加…...