使用 TDD 模式编程--Jest + Typescript 环境集成

TDD是测试驱动开发（Test-Driven Development）的英文简称，是敏捷开发中的一项核心实践和技术，也是一种设计方法论。TDD的原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码。本篇文章主要是以 Jest, 为单元测试工具, 如何搭建测试环境。

---

Jest

Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库，自身包含了 驱动、断言库、mock 、代码覆盖率等多种功能，配置使用相当简单，可做到开箱即用的程度，教程非常多，这里贴上参考资料。

• Jest 中文文档
• 【催学社】vue3的测试指南
• 使用 jest 单元测试

初始化项目环境

1. 使用 yarn init -y 创建项目，生成 package.json 文件。
2. 在根目录下创建 src 文件夹，创建 index.ts 文件。

// /src/index.ts
export function add(a: number, b: number) {
  return a + b
}

3. 在 src 目录下创建文件夹 tests存放后续的测试文件，加入测试文件 add.spec.ts。

// /src/tests/add.spec.ts
import { add } from '../index';

describe('test', () => {
  it('add function params should combined', () => {
    let sum = add(1, 2)
    expect(sum).toBe(3)
  })
})

集成 typescript 与 Jest 环境

准备好了测试文件之后，此时编辑器是报错状态的。其中要解决 ts 环境问题，以及 Jest 文件报错。

1. 安装 typescript ，并创建 tsconfig.json 文件。

yarn add typescript --dev

npx tsc --init 

2. 安装配置 Jest

yarn add jest @types/jest --dev

此时还在报错，需要配置 jest 的 ts 集成环境。打开 tsconfig.json 文件，搜索 types 关键字。可以看到 types 配置是一个数组，在里面添加 "jest" 即可。

// typescript.json
"types": [ "jest" ]

3. 在 package.json 中添加命令启动 jest 并执行。

// package.json
"scripts": {
    "test": "jest"
  },

此时命令行，显示错误为 SyntaxError: Cannot use import statement outside a module,提示不支持 es6 模块导入。查阅官方文档，有说明使用 babel 解决。

使用 Babel 解决 es6 模块导入

jest 官方文档详细描述了使用 babel 配置方案，根据提示，完成配置。

1. 安装

   安装babel相关，让 babel 支持 ts。

yarn add --dev babel-jest @babel/core @babel/preset-env

yarn add --dev @babel/preset-typescript

2. 配置 babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
  ],
}

3. 执行测试代码 npm run test,报错消失，add 函数正常执行。