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