TypeScript 测试:初学者分步指南

面向初学者的在线Python训练器

轻松学习Python,无需理论负担。在浏览器中直接解决带自动检查的实践任务,无需安装任何东西。

开始课程

为什么 TypeScript 测试并不可怕,反而有益

\n\n

你用 TypeScript 写了一个很棒的函数,运行了项目——一切正常。一周后添加了一个新功能,旧的逻辑却出错了。熟悉吗?如果是这样,那么你迫切需要与测试交朋友。不要害怕:测试不是枯燥的义务,而是你个人的“错误检测器”,它 24/7 全天候工作。

\n\n

在本文中,我们将探讨初学者如何开始 TypeScript 测试。你将了解如何配置环境、编写第一个单元测试以及避免在类型中迷失。没有废话——只有实践和真实的代码示例。

\n\n

既然 TypeScript 已经很安全了,为什么还要测试它?

\n\n

TypeScript 确实能在编译阶段捕获许多错误:错误的类型、缺失的字段、错误的参数。但静态类型检查无法防止逻辑错误。你的函数可能完美地通过编译,却产生错误的结果。例如:

\n\n
function sum(a: number, b: number): number {\n  return a - b; // 错误!应该是加法,却做了减法\n}
\n\n

TypeScript 不会报错——类型是符合的。但单元测试会立即显示 sum(2, 2) 不等于 4。因此,TypeScript 测试不是一种任性,而是任何严肃项目的必需品。

\n\n

步骤 1. 选择工具:为什么 Jest 是初学者的最佳伙伴

\n\n

市场上有几个流行的测试框架:Mocha、Jasmine、Vitest、Jest。对于初学者,我强烈推荐 Jest。为什么?

\n\n
    \n
  • 开箱即用——无需长时间配置。
  • \n
  • 内置的 mock 机制和代码覆盖率。
  • \n
  • 通过 ts-jest 对 TypeScript 有出色的支持。
  • \n
  • 清晰的错误信息。
  • \n
\n\n

让我们在你的项目中安装 Jest。假设你已经有了 TypeScript。如果没有,请创建一个新项目:

\n\n
mkdir my-ts-project\ncd my-ts-project\nnpm init -y\nnpm install typescript jest @types/jest ts-jest --save-dev
\n\n

现在在项目根目录创建 jest.config.js 文件:

\n\n
module.exports = {\n  preset: 'ts-jest',\n  testEnvironment: 'node',\n  roots: ['/src'],\n  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],\n};
\n\n

并在 package.json 中添加脚本:

\n\n
"scripts": {\n  "test": "jest",\n  "test:watch": "jest --watch"\n}
\n\n

完成!现在可以编写测试了。

\n\n

步骤 2. 编写你的第一个 TypeScript 测试

\n\n

在 src/math.ts 文件中创建一个简单的函数:

\n\n
export function add(a: number, b: number): number {\n  return a + b;\n}\n\nexport function divide(a: number, b: number): number {\n  if (b === 0) {\n    throw new Error('禁止除以零');\n  }\n  return a / b;\n}
\n\n

现在为它编写测试。创建文件夹 src/__tests__/ 和文件 math.test.ts:

\n\n
import { add, divide } from '../math';\n\ndescribe('Math functions', () => {\n  test('adds two numbers correctly', () => {\n    expect(add(2, 3)).toBe(5);\n    expect(add(-1, 1)).toBe(0);\n    expect(add(0, 0)).toBe(0);\n  });\n\n  test('divides two numbers', () => {\n    expect(divide(10, 2)).toBe(5);\n    expect(divide(9, 3)).toBe(3);\n  });\n\n  test('throws error when dividing by zero', () => {\n    expect(() => divide(5, 0)).toThrow('禁止除以零');\n  });\n});
\n\n

运行 npm test,你会看到绿色的报告。恭喜——你刚刚编写了你的第一个 TypeScript 单元测试!

\n\n

这里发生了什么?

\n\n
    \n
  • describe — 将测试分组到逻辑组中。
  • \n
  • test 或 it — 单独的测试用例。
  • \n
  • expect — 断言,用于检查

博客

书籍推荐