JavaScript 中的测试驱动开发

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

测试我们编写的代码至关重要。尽管有些团队根本不做测试，但这却是成功交付的关键环节之一。

软件测试方法有很多种。我最喜欢的方法之一是TDD，即测试驱动开发。它之所以脱颖而出，是因为它颠覆了传统的（或者说看似传统的）先编写逻辑再编写测试的流程。TDD的原则是先编写测试，再编写逻辑。

为什么 TDD 有意义

起初，这或许显得很奇怪。为什么要测试一个根本无法运行的东西？为什么要检查显而易见的东西？换个角度思考，想想如何为你的代码设定需求和假设。当你接到一个任务时，它会促使你将其分解成尽可能小的部分，并为每个部分编写相应的假设。

以斐波那契数列生成器为例。目标是创建一个函数，该函数接受一个参数并返回一个数字数组。很简单。我们应该测试什么呢？

• 如果参数不是整数，则应该抛出错误；
• 它应该返回一个数组；
• 当参数为 0 时，应该抛出错误；
• [0]当参数为 1 时，它应该返回；
• 它应该返回一个包含整数的数组；
• 它应该返回[0, 1, 1, 2]参数为 4 的结果。

请看这份清单。六个案例。没错，是六个案例，不是六行文字。这些案例很容易应用到考试中。请看：

it ("should return an array", () => {
  expect(Array.isArray(fib(5))).toBeTruthy();
});

这种表示法非常简单，便于提前规划。

测试驱动开发的三个周期

TDD最重要的事之一就是为自己创建一个循环。它由三个阶段组成—— 红灯、绿灯和重构。

• 红色阶段正在编写和运行测试。测试会失败，IDE 或任何其他运行程序都会显示红色；
• 绿色阶段是指编写给定测试的代码。代码必须通过测试，但不需要写得非常好；
• 重构阶段的目的是使你的代码达到标准；

到每个周期结束时，你负责的部分代码应该已经过测试，并且编写时也符合当前的（项目）标准。请记住，这些周期的长度应该大致相同，甚至相近。测试驱动开发与番茄工作法配合使用效果很好。

如何表达这个意思呢？我们来尝试写一个返回数组的例子。

首先，我们创建一个测试（红色）：

// index.test.js
const fib = require(".");

describe("fib tests", () => {
  it("should return an array", () => {
    expect(Array.isArray(fib(5))).toBeTruthy();
  });
});

运行它会失败，可能是因为我们根本没有index.js文件，或者即使有，它也没有任何内容。

让我们开始绿色阶段。

// index.js
const fib = (target) => {
  const collection = [];

  while (collection.length < target) {
    collection.push(null);
  }

  return collection;
};

这段代码可以运行，现在运行测试结果会很好，这意味着它符合假设。

但是，使用while循环似乎有点不太好。或许我们应该采用函数式编程范式，使用递归！让我们重构一下：

const fib = (target, col = [0, 1]) => {
  if (col.length === target) {
    return col;
  }

  const newCollection = const newCollection = [...col, null];

  return fib(target, newCollection);
};

结果没有改变，但这段代码看起来更好了。（我知道我应该使用 TCO，但我不想让画面变得模糊。）

我不会在这里编写更多测试用例，您可以自行完成。您可以在我的Codesandbox中查看结果或获得帮助。

结论

这里我展示了测试驱动开发的基本用法。它能让你初步了解这项技术的工作原理及其优势。但要真正体会它的精髓，你需要花些时间去实践。我强烈建议你这样做！

—

完整的代码和测试用例都在 Codesandbox 上。