JavaScript中的TDD：如何不再害怕Bug并自信地编码

为什么TDD不是时尚潮流，而是您新的最佳朋友

想象一下：您编写代码，一切运行完美。您启动应用程序——没有Bug。一周后，您添加一个新功能，然后……一切都崩溃了。熟悉吗？如果您曾经因为相邻模块的意外更改而花费数小时寻找错误——这篇文章就是为您准备的。

测试驱动开发（Test-Driven Development, TDD）不仅仅是一种方法论，更是开发者的真正救生圈。在JavaScript的世界里，代码变化比天气还快，TDD帮助您保持稳定。让我们来了解它是如何工作的，以及为什么在接触TDD之后，您将无法再像以前那样编写代码。

什么是真正的TDD？（剧透：这不是关于测试）

许多人认为TDD只是“在代码之前编写测试”。但实际上，这是一种设计哲学。TDD迫使您在编写代码之前思考代码将如何使用。这就像一位建筑师，先绘制建筑平面图，然后才开始建造。

TDD循环由三个步骤组成（通常称为“红-绿-重构”）：

\n
• 红色：编写一个肯定会失败的测试（因为功能尚不存在）。
\n
• 绿色：编写最少的代码使测试通过。
\n
• 重构：改进代码，不改变其行为（测试确保您没有破坏任何东西）。
\n

是的，这个循环针对每个小的功能单元重复进行。听起来像是变慢了？也许。但从长远来看，您将节省数小时的调试时间。

为什么JavaScript非常适合TDD

JavaScript是一种动态语言。这是它的优点也是缺点。运行时错误是常见问题，尤其是在大型项目中。TDD将JavaScript从“灵活但脆弱”的工具转变为可靠的平台。

此外，JS生态系统拥有丰富的测试工具：Jest、Mocha、Chai、Jasmine。我们将使用Jest——它简单、强大且流行。如果您还不熟悉Jest，不用担心：我们将从基础开始。

实践：用TDD编写计算器

理论很好，但让我们进入实际代码。我们将使用TDD编写一个简单的计算器。这是一个经典示例，但它完美地展示了整个过程。

步骤1：项目设置

创建一个新文件夹并初始化项目：

mkdir tdd-calculator\ncd tdd-calculator\nnpm init -y\nnpm install --save-dev jest\n

在package.json中添加脚本：

"scripts": {\n  "test": "jest"\n}\n

步骤2：红色——为加法编写测试

创建文件calculator.test.js：

// calculator.test.js\nconst { add } = require('./calculator');\n\ndescribe('Calculator', () => {\n  test('adds 2 + 3 to equal 5', () => {\n    expect(add(2, 3)).toBe(5);\n  });\n});\n

运行测试：npm test。它会因add函数不存在而失败。这很正常——这是红色阶段。

步骤3：绿色——编写最少的代码

创建calculator.js：

// calculator.js\nfunction add(a, b) {\n  return a + b;\n}\n\nmodule.exports = { add };\n

再次运行测试。绿色？太棒了！我们刚刚完成了绿色阶段。

步骤4：重构

代码很简单，没什么可重构的。但假设我们想添加类型检查。TDD允许安全地执行此操作：先测试，后代码。

// calculator.test.js\ntest('throws error if arguments are not numbers', () => {\n  expect(() => add('2', 3)).toThrow('Arguments must be numbers');\n});\n

现在修改add：