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

搭建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,可以直接执行

http://www.xdnf.cn/news/1510.html

相关文章:

  • 高性能全闪存储在大模型训练与推理中的效率提升作用
  • HTTP 请求头的 key 不区分大小写。
  • 接口测试和功能测试详解
  • 【AI】Windows环境安装SPAR3D单图三维重建心得
  • 玩转Docker | 使用Docker部署Neko自托管浏览器
  • Chronos - 时间序列预测语言模型
  • SwiftUI 1.Text介绍和使用
  • Elasticsearch 报错 Limit of total fields [1000] has been exceeded
  • SwiftUI 3.Button介绍和使用
  • Python爬虫学习:高校数据爬取与可视化
  • UIAutomator 与 Playwright 在 AI 自动化中的界面修改对比
  • Java学习手册:Web 安全基础
  • MyBatis 升级至 MyBatis-Plus 详细步骤
  • 常用嵌入式软件代码编码规范的关系和覆盖
  • 海康NVR配置NAS-TrueNAS
  • Mysql 简单数据查询
  • 知识储备-后仿
  • AtCoder Beginner Contest 402题解
  • Pillow库中的convert(“L“)彩色图像转换灰度图像详解~
  • 2026《数据结构》考研复习笔记六(串的KMP算法)
  • 【网工第6版】第5章 网络互联⑥
  • 《MySQL:MySQL表的内外连接》
  • 【Redis】redis主从哨兵
  • MySQL常见问题解答
  • 【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案
  • C++类与继承
  • SpringBoot中6种自定义starter开发方法
  • 同z科技面经
  • Python爬虫第18节-动态渲染页面抓取之Splash使用上篇
  • Sci期刊的编辑会对投稿论文进行查重吗?