前端从零配置 基于 TypeScript 的 Jest 单元测试环境，手把手教程

写在前面

本教程从零开始而且不是基于一个 Vue 或者 React 框架，打破测试环境配置的心里障碍，如果从零都可以配置成功，上个框架原理和方法也会大差不差。

本教程基于 yarn 来进行安装，如果使用使用 npm 和 pnpm 的话方法类似，无非就是把 yarn 换成 npm 或者 pnpm，yarn add 换成 npm install 或者 pnpm add，最保险的做法就是自行查阅一下这三者的安装区别，应该会很快。

如果你你想直接去 Jest 官网阅读这里贴上：https://jestjs.io/docs/getting-started。直接看我这个教程或者遇到问题再参考我这个教程都可以。

开始安装

直接进入正题，新建文件夹 ts-jest-demo，双击进入文件夹，右键使用 vscode 打开当前文件夹。

• 打开 terminal 终端默认进入 ts-jest-demo 目录，输入：

yarn init -y

• 新建 src 文件夹。在 src 文件夹下新建 index.ts，写入：

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

• 安装 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"
  ]
};

• 在 src 目录下新建 tests 文件夹，并新建测试文件 index.test.ts，写入：

import { add } from "../index";

//写一个add的测试用例
it("init", () => {
  expect(add(1, 2)).toBe(3);
});

• 在 package.json 中配置 scripts 的 test 字段：

"scripts": {
    "test": "jest"
  },

• 这样所有环境都配置完了，最后在终端中执行：

yarn test

如果你是 npm 就是 npm run test，pnpm 的话就是 pnpm test。应该可以看到测试的结果。

有时候 vscode 可能会抽风，爆红提示错误，重启 vscode，重新运行测试指令即可。