我们在学习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"
}
}
总体目录结构如下
这样所有环境都配置完了，最后在终端中执行：
yarn test如果你使用了WebStorm，可以直接执行
