Jest进阶知识：整合 TypeScript - 提升单元测试的类型安全与可靠性

引言

在现代软件开发中，TypeScript 以其静态类型检查的优势，成为越来越多开发者的选择。而 Jest 是一个功能强大的 JavaScript 测试框架，支持各种测试场景。本文将详细介绍如何在基于 TypeScript 的项目中集成 Jest 测试框架，实现更高的类型安全和可靠性。通过实际示例，展示如何准备项目环境、配置 TypeScript 和 Jest，以及编写和运行测试用例。

准备工作

初始化项目

首先，我们需要初始化一个新的项目。在项目根目录下运行以下命令：

npm init -y

安装 TypeScript

接下来，安装 TypeScript：

npm install typescript --save-dev

生成 TypeScript 配置文件

生成 TypeScript 配置文件 tsconfig.json：

npx tsc --init

安装 Node 类型说明文件

因为项目在 Node 环境中运行，需要安装 Node 的类型说明文件：

npm install @types/node --save-dev

解决 CommonJS 模块化问题

在 Node 环境中，如果模块化使用的是 CommonJS 规范，可能会出现“无法重新声明块范围变量”的问题。这是因为 CommonJS 规范中没有像 ESModule 中的闭包模块概念，所有模块在引用时会被抛到全局。为了解决这个问题，需要在 tsconfig.json 中开启 esModuleInterop 配置项，并在每个模块文件的最后一行添加 export {}，让 TypeScript 认为这是一个 ESModule。

{
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "./dist",
    "target": "ES2015",
    "module": "CommonJS"
  },
  "include": ["./src"]
}

在 tools.ts 文件的最后一行添加：

export {};

配置编译输出目录

在 tsconfig.json 中配置编译后的 JavaScript 文件存储目录：

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2015",
    "module": "CommonJS",
    "esModuleInterop": true
  },
  "include": ["./src"]
}

使用 Jest 测试

安装 Jest

安装 Jest 测试框架：

npm install --save-dev jest

生成 Jest 配置文件：

npx jest --init

创建测试文件

在 src 目录下创建 __tests__ 目录，并在其中新增测试套件。每个函数对应一个测试套件，在测试套件中针对不同的参数编写测试用例。

例如，创建 randomNum.test.ts 文件：

const { randomNum } = require("../utils/tools");

test("测试随机数", () => {
  // 得到一个 4 位数的数组
  const result = randomNum();
  expect(result.length).toBe(4);
  expect(new Set(result).size).toBe(4);
  result.forEach((num: number) => {
    expect(num).toBeGreaterThanOrEqual(0);
    expect(num).toBeLessThanOrEqual(9);
  });
});

export {};

创建 isRepeat.test.ts 文件：

const { isRepeat } = require("../utils/tools");

test("参数为 string 类型数组", () => {
  expect(isRepeat(["1", "1", "2", "3"])).toBe(true);
  expect(isRepeat(["1", "4", "2", "3"])).toBe(false);
});

test("参数为 number 类型数组", () => {
  expect(isRepeat([1, 1, 2, 3])).toBe(true);
  expect(isRepeat([1, 4, 5, 6])).toBe(false);
});

export {};

安装 Jest 类型说明文件

在编写测试用例时，TypeScript 会报错，提示找不到 Jest 相关的类型说明。为了解决这个问题，需要安装 Jest 的类型说明文件：

npm install @types/jest --save-dev

安装 ts-jest

为了在使用 Jest 测试 TypeScript 代码时直接运行 TypeScript 代码，需要安装 ts-jest：

npm install ts-jest --save-dev

修改 Jest 配置文件

修改 Jest 配置文件 jest.config.js，将 preset 修改为 ts-jest：

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  testMatch: ["**/__tests__/**/*.ts"],
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

运行测试

在 package.json 中添加测试脚本：

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

运行测试：

npm test

总结

通过本文的介绍，你已经学会了如何在基于 TypeScript 的项目中集成 Jest 测试框架。通过合理的配置，可以实现更高的类型安全和可靠性。以下是整合过程中的关键步骤：

初始化项目：使用 npm init -y 初始化项目。
安装 TypeScript：安装 TypeScript 并生成配置文件。
解决 CommonJS 模块化问题：开启 esModuleInterop 配置项并在每个模块文件中添加 export {}。
配置编译输出目录：在 tsconfig.json 中配置编译后的 JavaScript 文件存储目录。
安装 Jest：安装 Jest 测试框架并生成配置文件。
创建测试文件：在 src 目录下创建 __tests__ 目录，并编写测试用例。
安装 Jest 类型说明文件：安装 Jest 的类型说明文件。
安装 ts-jest：安装 ts-jest 以支持直接运行 TypeScript 代码。
修改 Jest 配置文件：将 preset 修改为 ts-jest。
运行测试：在 package.json 中添加测试脚本并运行测试。

总之，使用 Jest 和 TypeScript 的结合，可以帮助开发者在单元测试中实现更高的类型安全和可靠性。希望本文的介绍和示例能帮助你在实际开发中更好地应用这一强大工具。

秒客网