Jest 是一个广泛使用的 JavaScript 测试框架，它的功能和性能都非常强大。在前端开发中，正确撰写 Jest 测试用例能够帮助我们轻松地更新和维护代码，提高代码质量，并保持代码稳定性。本文将详细介绍如何正确撰写 Jest 测试用例，并附上示例代码。
一、编写基础测试用例
首先来编写一些基础的测试用例。假设我们有一个名为 utils.js 的工具函数文件，其中有一个函数 sum 用于求两个数的和。我们需要编写一个测试用例来验证其正确性。
-- -------------------- ---- ------- -- -------- ------ -------- ------ -- - ------ - - -- - -- ------------- ------ - --- - ---- ---------- ---------- - - - -- ----- --- -- -- - ------------- ------------ ---
在上面的测试用例中，我们使用了 Jest 提供的 test 函数来编写测试用例。test 函数接收两个参数，第一个参数是测试用例的描述，第二个参数是测试用例的执行函数。在执行函数中，我们可以使用 Jest 提供的 expect 函数来进行断言，确保测试结果符合预期。
在上面的测试用例中，我们使用 toBe 方法断言 sum(1, 2) 的结果是否等于 3。如果测试结果不符合预期，测试就会失败，我们需要根据失败信息来调整代码或测试用例。
二、使用异步测试
在实际的开发中，我们经常需要进行异步操作，如异步请求、异步读写文件等。这时就需要使用 Jest 的异步测试功能来编写测试用例。
1. 回调函数方式
假设我们有一个异步请求函数 fetchData，返回一个 Promise 对象，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。
-- -------------------- ---- -------
-- --------
------ -------- ----------- -
------ --------------------------- -- ------------
-
-- -------------
------ - --------- - ---- ----------
------------- ---- ---- -------- ---- -- -
--------------------- -- -
---------------------- ----- ------- ---- -- ---
-------
---
---在上面的测试用例中，我们使用了 Jest 提供的 done 回调函数来标记异步操作完成。我们也可以使用 Promise 的 then 方法来处理异步结果，但要注意使用 done 回调函数确保测试用例完成，否则测试可能会被标记为超时失败。
2. Promise 方式
除了回调函数方式，我们还可以使用 Promise 方式来进行异步测试。假设我们有一个返回 Promise 对象的异步函数 fetchData，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。
-- -------------------- ---- -------
-- --------
------ -------- ----------- -
------ --------------------------- -- ------------
-
-- -------------
------ - --------- - ---- ----------
------------- ---- ---- ------ ----------- -- -- -
------ --------------------- -- -
---------------------- ----- ------- ---- -- ---
---
---在上面的测试用例中，我们使用了 return 语句来确保异步测试完成。如果测试结果不符合预期，expect 语句将抛出错误，测试就会失败。
3. async/await 方式
除了回调函数方式和 Promise 方式，我们还可以使用 async/await 方式来进行异步测试。假设我们有一个返回 Promise 对象的异步函数 fetchData，我们需要编写一个测试用例来验证该函数是否能够正确地获取数据。
-- -------------------- ---- ------- -- -------- ------ -------- ----------- - ------ --------------------------- -- ------------ - -- ------------- ------ - --------- - ---- ---------- ------------- ---- ---- ------ --------------- ----- -- -- - ----- ---- - ----- ------------ ---------------------- ----- ------- ---- -- --- ---
在上面的测试用例中，我们使用了 async 关键字和 await 关键字来等待异步操作完成。如果测试结果不符合预期，expect 语句将抛出错误，测试就会失败。
三、使用 Jest 提供的 Mock 功能
在实际开发中，我们可能需要对某些模块进行 Mock，以便于测试。Jest 提供了 Mock 功能，能够很方便地帮助我们 Mock 模块或者函数。
1. Mock 模块
假设我们有一个名为 utils.js 的工具函数文件，其中引用了一个名为 backend.js 的后端数据接口模块。我们需要编写一个测试用例来验证在后端数据接口出错的情况下，工具函数能否正确处理异常情况。
-- -------------------- ---- -------
-- --------
------ - --------- - ---- ------------
------ -------- ---------------------- -
--- -
----- - ---- - - ----- ------------------------------------
------ ----------
- ----- ----- -
--------------------- -- ----- ---- --- -------------
------ ---
-
-
-- -------------
------ - ------------- - ---- ----------
------ - --------- - ---- ------------
-----------------------
------------- ------ ---- --------- -- -- -
----------------------------------- -------------- ---------
----- ---------- - -----------------
----------------------------
---在上面的测试用例中，我们使用了 jest.mock 函数来 Mock backend.js 模块，将其替换为一个虚拟模块用于测试。我们使用 mockRejectedValueOnce 方法模拟了一个网络错误的响应，并调用了工具函数 getParentName。测试结果应该返回一个空字符串。
2. Mock 函数
除了 Mock 模块，我们还可以使用 Jest 提供的 Mock 函数来模拟函数的行为。假设我们有一个名为 utils.js 的工具函数文件，其中引用了一个名为 backend.js 的后端数据接口模块，并且工具函数中除了请求数据，还进行了一些计算操作。我们需要编写一个测试用例来验证在请求数据出错的情况下，工具函数能否正确处理异常情况。
-- -------------------- ---- ------- -- -------- ------ - --------- - ---- ------------ ------ -------- ---------------------- - ----- - ---- - - ----- ------------------------------------ ----- ------ - ------- -- -- ----- ------ - - ------- ------ ------ - --------- - ------- - -- ------------- ------ - ------------- - ---- ---------- ------ - --------- - ---- ------------ ----------------------- ------------- ------ ---- ------- ----- ----------- -- -- - ----- ------------- - ---------- --------------------------------------- -------------- --------- ----------------- ----------------------------------------------- ------------------------------------------------------------ ---
在上面的测试用例中，我们使用了 jest.fn 函数创建了一个 Mock 函数，并使用 mockRejectedValueOnce 方法模拟了一个网络错误的响应。然后我们调用了工具函数 getParentName，在测试结果中验证了 Mock 函数 fetchData 是否正常被调用了，并且是否传入了正确的参数。
四、总结
本文详细介绍了如何正确地撰写 Jest 测试用例，并附上了相应的示例代码。正确的测试用例可以帮助我们提高代码的质量，维护代码的稳定性。除了编写基础测试用例，我们还介绍了如何使用 Jest 的异步测试功能和 Mock 功能。我们希望本文能够帮助您更好地掌握 Jest 测试框架的使用，使您的前端开发工作更加高效和质量保证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653636587d4982a6ebe25b60