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

搭建TypeScript单元测试环境

news 来源：原创 2025/4/24 9:27:25

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

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

简单易上手：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"}
}

总体目录结构如下