前端开发中，编写可重用的通用函数是一个常见的任务。这些功能通常运行在不同的应用程序或模块中，并用于执行诸如验证、处理和格式化等任务。
但是，在编写这些通用函数时，保证它们的正确性并不容易。一个小错误可能会导致整个应用程序崩溃，而且找到这个错误也非常困难。因此，在编写通用函数时使用测试驱动开发（Test Driven Development TDD）方法是一个很好的选择。
在本文中，我们将使用 Jest 框架测试通用函数并深入了解使用 Jest 的一些最佳实践。
什么是 Jest？
Jest 是一个开源的 JavaScript 测试框架，由 Facebook 推出。它为测试提供了一系列开箱即用的功能，如断言（assertions）、模拟（mocking）和测试报告等。它非常容易配置，并且适用于测试任何 JavaScript 代码，包括 React 组件、Node.js 服务器和通用函数等。
在接下来的部分中，我们将演示如何使用 Jest 测试通用函数，并介绍 Jest 提供的基本功能。
编写测试用例
在开始编写测试用例之前，让我们先来看一个示例通用函数：
function sum(a, b) {
return a + b;
}这是一个非常简单的通用函数，它接受两个数字 a 和 b 作为参数并返回它们的和。我们将使用 Jest 编写测试用例来检查该函数是否按预期工作。
首先，我们需要安装 Jest。可以使用 npm 安装：
npm install --save-dev jest
一旦安装成功，我们可以创建一个名为 sum.test.js 的新文件，以编写测试用例。在该文件中，我们将包含一个或多个测试套件（test suite），每个测试套件将测试单个功能或多个相关功能。
describe('sum function', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});首先，我们使用 describe 函数创建一个测试套件，并将其命名为 sum function。接下来，我们使用 test 函数创建一个测试用例，并将其命名为 adds 1 + 2 to equal 3。该测试用例使用 expect 函数来断言 sum(1, 2) 的值应该等于 3。
注意，我们在此处使用的是 toBe 断言，它检查值的类型和值是否相等。Jest 还提供了其他许多断言，例如 toEqual、toBeNull、toBeTruthy 等等。
运行测试
要运行测试用例，只需在命令行中运行 Jest：
npx jest
这将自动运行所有测试套件（所有以 .test.js 结尾的文件），并显示测试运行结果。
-- -------------------- ---- -------
---- ---------------
--- --------
- ---- - - - -- ----- - -- ---
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -
--- --- ---- ------ -------- ---------------------注意，我们的测试用例通过了，所有测试均已通过（1 passed）。如果有错误或失败的测试用例，Jest 将向我们报告哪些测试失败并提供了有关错误的详细信息。
测试多个输入和输出
上面提到的示例通用函数非常简单，只接受两个数字作为参数并返回它们的和。但是，在实际应用程序中，常常需要编写更复杂的通用函数，可能需要处理多个不同类型的输入和产生不同类型的输出。
在这种情况下，我们需要测试多个输入和输出，以确保函数能够正确地处理所有情况。为此，我们可以创建多个测试用例，每个测试用例都使用不同的输入，以检查函数的输出是否正确。
例如，假设我们有一个名为 capitalize 的通用函数，它接受一个字符串作为参数并返回一个首字母大写的字符串。我们可以编写以下测试用例，来测试 capitalize 函数在不同情况下的输出是否正确：
-- -------------------- ---- -------
-------------------- ---------- -- -- -
----------------- ------ ------ -- -- -
------------------------------------------
---
----------------- -------- ------- -- -- -
------------------------ -------------------- --------
---
----------------- ----- -------- -- -- -
--------------------------------
---
---注意，这里我们编写了三个测试用例，每个测试用例都使用不同的输入测试 capitalize 函数的输出。第一个测试用例测试 capitalize 函数是否可以正确地将单个单词的首字母大写。第二个测试用例测试 capitalize 函数是否可以正确地将多个单词的首字母大写。第三个测试用例测试 capitalize 函数是否可以正确地处理空字符串。
监视文件变化
在开发过程中，我们需要经常运行测试来检查代码的正确性。为了简化这个过程，Jest 提供了一些工具，可以在文件发生更改时自动重新运行测试。
要启用监视模式（watch mode），只需在命令行中运行 Jest，并使用 --watchAll 或 -w 参数：
npx jest --watchAll
现在，Jest 将自动运行所有测试套件，并在文件更改时重新运行测试。此外，每次运行测试时，Jest 还将仅运行发生更改的测试套件。
模拟函数
在编写通用函数时，常常需要模拟其他函数或模块。这些模块可能会涉及网络请求、数据库访问或事件监听等任务，而在运行测试时，我们往往不想执行这些任务。
为了避免这种情况，我们可以使用 Jest 提供的模拟函数（mock），以模拟其他函数的行为。模拟函数可以将函数替换为一个简单的实现，以在运行测试时避免执行其他函数或模块。
例如，假设我们有一个名为 fetchData 的函数，它使用 axios 库从远程服务器获取数据。我们可以使用 Jest 提供的 jest.fn() 函数创建一个模拟函数，并将其替换为 fetchData 函数的实现。在此之后，每当我们调用 fetchData 函数时，它将调用模拟函数而不是 axios 库：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----------- -
------ ------------------------------------ -- ---------------
-
------------------- ---------- -- -- -
------------- ---- ---- -------- -- -- -
----- --------- - ---------- -- ----------------- ----- - ---- ----- - ----
--------- - ----------
------ --------------------- -- -
-------------------------------------
---------------------- ---- ----- ---
---
---
---注意，我们在此处使用了 Promise.resolve() 函数，以创建一个返回 { data: { foo: 'bar' } } 的模拟响应。该模拟响应作为模拟函数的返回值，以模拟返回自服务器的数据。
结论
在本文中，我们已经学习了如何使用 Jest 测试通用函数，并了解了一些最佳实践和使用 Jest 所提供的一些示例代码。使用测试驱动开发的方法，可以帮助我们编写更可靠和高质量的代码，并减少错误和缺陷。
如果您还没有尝试过 Jest，请花些时间学习它，并在下一次编写通用函数时使用它。我相信您会发现 Jest 是一个强大的工具，它可以帮助您写出更好的代码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd3c9544713626017b2859