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