JavaScript测试：2024年初学者从何入手

为什么JavaScript测试并不可怕，反而很有用？

当我刚开始用JavaScript编程时，我觉得测试像是某种高级魔法。“为什么？我明明能看到代码能运行！”——我当时这么想。然后到了周一，我添加了一个小功能，结果整个程序都崩溃了。熟悉吗？

JavaScript测试就像是给代码买了一份保险。你只需编写一次，却能自动检查数百次运行情况。相信我，当你的项目增长到10,000行代码时，你会感谢那个逼你写出第一个测试的人。

在这篇文章中，我将告诉你初学者如何开始JavaScript测试，展示真实案例，并提供现成的模板。你会惊讶地发现，15分钟内就能写出第一个测试。

测试类型：初学者需要了解什么

在编写代码之前，我们先来了解一下理论。总共有三个主要的测试层级，但起步阶段我们只需要一个。

单元测试（Unit tests）

这是针对最小代码片段——函数、方法、类的测试。它们检查：“这个特定函数是否按我预期的方式工作？”JavaScript单元测试是所有人起步的基础。

集成测试（Integration tests）

检查系统的不同部分如何协同工作。例如，“表单→数据提交→服务器响应”这个链条是否正常。

端到端测试（E2E tests）

最复杂的测试。模拟真实用户的操作：点击、填写表单、页面跳转。对于初学者来说，这是下一个阶段。

起步时，你只需掌握单元测试。其他一切都会随着经验积累而掌握。

工具：初学者该如何选择？

JavaScript测试工具市场非常庞大。但我推荐三种适合初学者的组合：

• Jest——最流行的框架。开箱即用，无需复杂配置。非常适合入门。
• Mocha + Chai——经典组合。Mocha运行测试，Chai提供方便的断言函数。
• Vitest——现代且快速，几乎和Jest一样，但适用于Vite项目。

我建议从Jest开始。它直观易懂，文档优秀，社区庞大。如果你掌握了Jest，切换到其他工具会很容易。

编写第一个测试：分步指南

让我们编写真实的代码。假设我们有一个简单的函数，用于两个数相加：

// math.jsfunction add(a, b) {  return a + b;}

module.exports = add;

现在安装Jest。在项目文件夹中打开终端并执行：

npm init -ynpm install --save-dev jest

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

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

在同一文件夹中创建math.test.js文件。编写测试：

// math.test.jsconst add = require('./math');

test('2 + 3 等于 5', () => {  expect(add(2, 3)).toBe(5);});

test('负数相加', () => {  expect(add(-1, -1)).toBe(-2);});

test('零相加', () => {  expect(add(0, 0)).toBe(0);});

使用命令npm test运行测试。如果一切正确，你会看到绿色的勾号。恭喜，你刚刚写出了第一个JavaScript测试！

如何测试更复杂的函数？

好的，我们已经学会了数字相加。但如果函数处理数组或对象呢？让我们看一个更复杂的例子。

按年龄过滤用户的函数：

// users.jsfunction filterAdults(users) {  return users.filter(user => user.age >= 18)