前言
Jest 是一款由 Facebook 开源的 JavaScript 测试框架，它提供了友好的 API、丰富的插件和简洁的测试报告等功能。使用 Jest 进行测试驱动开发（TDD）能够帮助我们开发出更加健壮、可靠、易维护的前端代码。
本篇文章将通过一个实例，讲述如何利用 Jest 进行 TDD 开发。
实例背景
假设我们需要实现一个函数，该函数接收一个字符串并返回同样长度的一串由 * 组成的字符串。以下是函数的测试用例：
------------------ -------- ------ -- -- - -------------------------------------------- -------------------------------------------- ------------------------------------------------------- ----------------------------- ------------------------------------------- ---
我们需要先编写一个名为 transformStr 的空函数，这样才能使用 Jest 进行 TDD 开发。
步骤一：红灯
我们需要先编写一个测试用例，然后运行测试，检查函数是否满足我们的要求。由于 transformStr 空函数的返回值是未定义的，因此我们需要编写一个判断 transformStr 函数返回值是否为期望值的测试用例。
------------------ -------- ------ ------ - ------ -- ----- ---- --- ---- ------ -- --- ----- -------- -- -- - -------------------------------------------- ---
由于 transformStr 函数目前返回的是 undefined，因此该测试用例会失败，控制台输出：
-------- --------- -- -- -------
我们需要修改 transformStr 函数，使其返回一个字符串，字符串的长度等于输入字符串的长度。
-------- ----------------- - ------ ----------------------- -
重新运行测试，控制台输出：
---- ----------------- - ------------ -------- ------ ------ - ------ -- ----- ---- --- ---- ------ -- --- ----- ------ -- --- ---- ------- - ------- - ----- ------ - ------- - -----
测试用例通过，此时我们的代码处于绿灯状态。
步骤二：绿灯
为了增强 transformStr 函数的健壮性，我们需要编写更多的测试用例。我们需要编写至少涵盖以下几个方面的测试用例：
- 输入字符串为
null或undefined - 输入字符串为空字符串
'' - 输入字符串长度为 1
- 输入字符串长度为偶数
- 输入字符串长度为奇数
接下来，我们编写针对 输入字符串长度为 1 的测试用例：
------------------ -------- ------ ------ --- ---- ----- ------ ------ -- --- -- -- - ------------------------------------ ---
然后我们运行测试，发现测试通过了。
这时我们需要继续编写下一组测试用例，保证函数的健壮性。由于这里篇幅的限制，我们不再一一列举和解释每一个测试用例，读者可以自己尝试编写和测试。
------------------ -------- ------ ------ -- ---- ----- ------ -- ------- -- -- - ---------------------------------- --- ------------------ -------- ------ ------ ---- --- --------- ------- -- -- - ------------------------------------ ----------------------------------------- --- ------------------ -------- ------ ------ - ------ -- --- ---- --- ---- ------ -- ----- -------- -- -- - -------------------------------------------- -------------------------------------------- ------------------------------------------------------- ----------------------------- ------------------------------------------- ------------------------- -- - ---------------------------- ------------------------------------ ------------------------------------------------------------ ---
步骤三：重构
当我们完成了所有测试用例，并且测试全部通过后，我们需要对函数进行一些重构。
由于 transformStr 函数在测试用例中表现良好，因此我们不需要进行太多的重构。但是，在实际项目中，如果存在复杂的逻辑和代码，我们需要在测试用例通过的情况下进行重构。
下面是对 transformStr 函数的重构：
------ ------- -------- ----------------- -
-- ------ -
------ ---
-
------ -----------------------
-在从测试用例切换到代码后，我们应该保持红灯状态，确保我们对已有功能进行重构时不破坏现有功能。
总结
本文通过一个实例，讲述了如何利用 Jest 进行 TDD 开发。TDD 开发可以使我们的代码更加健壮、可靠、易维护，尤其是在大型项目中可以大大降低代码维护成本。
做好测试用例的编写，严格按照测试用例的要求编写代码，以另外一种手段来协助我们实现功能的开发和调试。
由于篇幅限制，本文只涉及 Jest 的基础用法和 TDD 基本流程，读者可以在项目实际开发中多加实践和探索，也可以参考 Jest 的官方文档进行深入学习。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64704a30968c7c53b0e6bb57