单元测试是前端开发过程中不可或缺的环节，可以有效确保代码质量、避免代码出错。而 Jest 是一款流行的前端测试工具，具有易用性、高性能及丰富的功能特性。在本文中，我将分享一些使用 Jest 进行单元测试的经验和技巧。
Jest 的基础用法
在使用 Jest 进行单元测试前，需要先安装 Jest，并在 package.json 的 scripts 中添加一个 test 脚本：
-
---------- -
------- ------
-
-接着，我们可以在项目中创建一个名为 tests 的文件夹作为测试用例的存放目录。在该文件夹下，新建一个 test.js 文件，并编写一个简单的测试用例：
-- ----------------- -------- ------ -- - ------ - - -- - ---------- - - - -- ----- --- -- -- - ------------- ------------ ---
在该测试用例中，我们定义了一个名为 sum 的函数，它接收两个参数，并返回它们的和。接着，我们使用 Jest 提供的 test 函数进行测试。test 函数接收两个参数：测试用例的描述和测试用例的具体实现。
在该测试用例的具体实现中，我们使用 expect 和 toBe 两个函数进行断言。expect 函数用于指定被测试的代码，而 toBe 函数用于判断其返回值与预期值是否相等。在本例中，我们测试了 sum 函数以保证其正确性。
在命令行中运行 npm test，我们将会看到类似下面的输出：
---- ----------------- - ---- - - - -- ----- - ----- ---- ------- - ------- - ----- ------ - ------- - ----- ---------- - ----- ----- ------ --- --- ---- -------
其中，PASS 表示测试通过，adds 1 + 2 to equal 3 是测试用例的描述，1.091s 是测试用例的执行时间。
Jest 的进阶用法
除了基础用法之外，Jest 还提供了一些高级功能，以帮助开发者更快速、高效地进行单元测试。接下来，我们将探索其中的几个特性。
常用匹配器
Jest 提供了许多匹配器（Matcher），用于在测试中进行各种断言。下面是几个常用匹配器的示例：
---------- ------------ -- -- - ----- ----- - -- --------------------------- -- ------ --- ---------- ----------- -- -- - ----- ----- - -- -------------------------- -- ------ --- ---------- ------ -- -- - ----- ----- - ----- ------------------------- -- ----- ---- --- ---------- --- ------ -- -- - ----- ----- - -- ----------------------------- -- ------ ---- --- ---------- ----------- -- -- - ----- ----- - ---------- ------------------------------ -- ----- --------- --- ---------- --- ----------- -- -- - ----- ----- - -- ---------------------------------- -- ------ --------- --- ---------- -------- -- -- - ----- ----- - -- --------------------------------- -- ------ - --- ---------- -------- -- -- - ----- ----- - ------ ------- ------------------------------- -- ------------ ------- --- ---------- ------- -- -- - ----- ----- - --- -- --- --------------------------- -- -------- - --- ---------- -------- -- -- - ----- ----- - - ----- -------- ---- -- -- ------------------------------------- -- ------- ---- --- ---
以上匹配器可以适用于各种类型的数值、字符串、数组和对象等类型。
测试异步代码
在编写前端代码时，异步调用是很常见的场景，如 API 调用、定时器等。在 Jest 中，我们可以使用异步测试的方法来测试异步代码的正确性。以下是一个异步代码的测试用例：
-------- ------------------- -
------------- -- -
-----------------
-- ------
-
--------- ---- -- ------- -------------- ---- -- -
----- -------- - ---- -- -
--------------------------
-------
--
--------------------
---在该测试用例中，我们定义了一个 fetchData 函数，它异步调用 callback 函数，并在 1 秒后返回 data。在测试用例的执行中，我们使用 done 函数将测试用例的执行挂起，并在回调函数中执行 expect 函数进行断言。最后，我们在回调函数中调用 done 函数以恢复测试用例的执行。
测试 React 组件
在 React 开发中，组件是最基本的构建模块。因此，在 Jest 中测试 React 组件也是非常必要的。以下是一个测试 React 组件的示例：
------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------- ---- ------------- ---------------- --------- -- -- - ----- - ----------- - - --------------- ---- ----- -------------- - ----------------------- ----- ------------- - ---------------------- ------------------------------- --------------------------------------------- ---
在该测试用例中，我们编写了一个 Counter 组件，并引入了 @testing-library/react 包用于测试。我们使用 render 函数渲染该组件，并通过 getByTestId 函数获取到展示计数的元素以及加一的按钮元素。接着，我们使用 fireEvent 模拟点击加一的操作，并用 expect 断言计数器的值是否正确。
Mock 函数
Mock 函数是 Jest 中一个非常有用的特性，可以模拟一个函数的行为，避免测试时对外部依赖造成影响。以下是一个使用 Mock 函数的示例：
-------- -------------- -
------ ----------
--------- -- -----------
---------- -- ------
-
--------------- -- ------ -------------- ----- -- -- -
----- --------- - ---------- --
-----------------
----- -- -- ----------------- ----- ------ ---
--
--
------------ - ----------
----- ---- - ----- -------------------
------------------------------------------
---------------------- ----- ------ ---
---在该测试用例中，我们定义了一个 fetchData 函数用于异步获取数据，并在测试用例的实现中通过 jest.fn 函数新建了一个 Mock 函数。在测试用例的执行中，我们将全局变量 fetch 赋值为 Mock 函数 mockFetch，从而使 fetchData 函数执行过程中请求数据时调用 Mock 函数而非真实的 fetch 函数。接着，我们使用 expect 函数判断 Mock 函数是否被成功调用，并断言数据是否正确。
结语
本文介绍了 Jest 在单元测试中的使用经验总结，主要包括 Jest 的基础用法和进阶用法。通过学习本文，相信读者对 Jest 的单元测试和 Mock 函数等特性会有更为深入的理解，从而提升前端代码的质量和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649b899648841e989484d7eb