为什么采用测试驱动开发和 Jest

大多数测试都是事后才想到的。程序员编写数百行代码来为应用程序添加新功能，随后草草写上一两个测试。这种“先实现后测试”的工作方式存在诸多弊端。

实现功能后再写测试的弊端

以下是实现功能后再写测试的主要问题：

• 没有测试的情况下，程序员在编写功能时无法获得即时反馈。如果他们的设计思路最终证明是死胡同，直到整个实现完成才会发现。

• 在功能实现之后编写的测试往往不够全面，缺乏想象力。通常只验证功能在“正常流程”下是否能运行——即按照预期使用时的情况，而难以暴露在边界情况下的潜在缺陷。

• 程序员倾向于将新功能直接附加到现有应用中，而不是重新思考整体架构，这会导致代码库膨胀。由于担心破坏其他功能，他们不敢进行重构。

先写测试的优势

幸运的是，有一种更好的替代方案：先写测试。这是测试驱动开发（TDD）方法的核心原则。除了促进更全面的测试覆盖外，TDD 还通过提供快速反馈改变了编码体验。有了预先准备好的测试，你可以迅速判断哪些方案可行、哪些不可行。这让你能够自由尝试不同的实现方式。实验带来学习，学习带来更优质的代码。而且，这个过程本身也更有趣。

本课程将向你介绍一种适用于 React 开发的 TDD 工作流。这意味着充分利用近年来 JavaScript 生态系统中涌现的丰富支持工具：Jest、ESLint、Prettier、Babel、webpack 等。我们不会一开始就搭建完整的项目环境，而是逐步引入这些工具。目标是让你充分理解这些工具，从而真正掌握它们，最终让工具本身退居幕后。真正重要的是工具为你提供的反馈。

在本章中，你将使用测试驱动的方式构建一个简单的 JavaScript 项目。借助 Jest 测试框架，你将建立起极快的反馈循环。在此过程中，你还将学习如何使用 npm 管理项目依赖。

尽管本章的项目非常简单，但所介绍的工具将在后续课程中持续发挥作用。在《使用 VS Code 集成工具》一节中，你将把这些工具以及其他工具整合进 VS Code 编辑器。所有这些准备工作，都将为你深入学习 React 开发打下坚实基础，特别是在《使用 Enzyme 测试 React》一课中。

初识 Jest

Jest 是由 Facebook 开发的测试框架。凭借其出色的性能和丰富的功能，它已成为测试 React 应用的事实标准，并正在逐渐被非 React 生态系统广泛采用。

与早期的测试框架（如 Jasmine）不同，Jest 并不依赖浏览器环境运行，而是直接在 Node.js 进程中执行。这看似反直觉：难道在浏览器中运行的代码不该在浏览器中测试吗？如今已不再必要。得益于名为 jsdom 的神奇库，我们可以在 Node.js 中模拟浏览器 API。在 Node 中使用模拟浏览器环境带来了巨大优势：测试速度显著提升，代码覆盖率可轻松计算，且相同的测试可在任何系统上稳定运行，结果一致。

在整个课程中，我们将以 Jest 作为主要测试框架。本节中，我们将创建一个 Node 项目，将 Jest 添加为依赖项，并运行第一个测试。虽然无需具备 Node 经验，但你需要熟悉 JavaScript 语言，包括 ES6 的箭头函数语法。如果需要入门或复习，建议阅读 Kyle Simpson 的《你不知道的 JavaScript》。