在前端开发中，测试是非常重要的一环。Jest 是一个流行的前端测试框架，它提供了丰富的 API 来方便我们编写测试用例。其中一个重要的功能就是 Mock 函数。Mock 函数可以模拟任何你想模拟的函数，并且可以让我们方便地测试一些难以测试的代码。本文将介绍如何在 Jest 中编写 Mock 函数。
什么是 Mock 函数
Mock 函数在测试中经常用到，它可以模拟任何你想模拟的函数，并且在测试中替代原有函数。这样就可以避免在测试时调用一些不必要的接口，或者是一些需要连接数据库或网络的函数，从而提高测试的效率和可靠性。
Mock 函数有以下几个优点：
- 能够有效测试与外部依赖的代码；
- 能够帮助我们测试错误和异常情况；
- 能够更好的判断测试的代码是否符合预期。
当我们使用 Mock 函数时，我们可以将其设置成任何我们想要的返回值，来调试和测试我们的代码。
如何编写 Mock 函数
在 Jest 中，我们可以使用 jest.fn() 创建一个 Mock 函数。下面是一个简单的例子：
-- -------------------- ---- ------- -- ---- -------- ------ -- - ------ - - -- - -- ---- -- ----- ------- - ----------- -- -- - ------ -- ---
在上面的例子中，我们使用 jest.fn() 创建了一个 Mock 函数 mockSum 来替代 sum 函数。在定义 Mock 函数时，我们使用了一个回调函数，并在回调函数中设置了 Mock 函数将要返回的值，这里返回了 0。
这个例子非常简单，因为我们只是在 Mock 函数中返回了一个固定的值，但是在实际的测试中，需要更多的条件和逻辑。
下面我们来看一个更具体的例子：
-- -------------------- ---- -------
-- ----
-------- -------------- --------- -
------------- -- -
--------------
-- ------
-
-- ---- --
----- ------------- - ------------- --------- -- -
--------------
---
----------------- -- -- -
----- -------- - ----------
------------------------------------ ----------
-----------------------------------------------------------
---在上面的例子中，我们使用 Mock 函数 mockFetchData 来替代 fetchData 函数。在定义 Mock 函数时，我们使用了一个回调函数，并在回调函数中直接调用了传入的 callback，并将 url 作为参数传递给它。
在测试中，我们先定义了一个 callback 函数，并使用 fetchData 函数，并将这个 callback 传递给了 fetchData，然后我们使用 expect 断言，判断我们传入的 callback 是否被正确调用，并传递了正确的参数。
如何指定 Mock 函数的行为
在 Jest 中，我们可以使用 mockReturnValue 或者 mockImplementation 来指定 Mock 函数的返回值，以便在测试中验证代码的行为。
下面我们从例子入手来详细介绍：
-- -------------------- ---- -------
-- ----
-------- ------------------------- -
------ --- ----------------- ------- -- -
------------- -- -
-------------
-- ------
------------ ----------- ---------
---
-
-- ---- --
----- ------------------------ - ------------- -- -
------ --- ----------------- ------- -- -
-- -------------
---------- ----------- ---------
---
---
---------------------------- -- -- -
------ ---------------------------------------------------
-------------- -- -
------------------------- ----------- ---------
---
---在上面的例子中，我们使用 mockReturnValue 方法指定了 Mock 函数 mockFetchDataWithPromise 的返回值为一个 Promise，这个 Promise 是一个 reject 状态，并返回了一个 Error 对象。
在测试中，我们使用了 catch 方法来捕获这个异常，然后使用 expect 断言，验证是否为我们传入的异常。
除了使用 mockReturnValue 方法来指定返回值，我们还可以使用 mockImplementation 方法来实现更复杂的逻辑：
-- -------------------- ---- -------
-- ----
-------- -------------- --------- -
------------- -- -
--------------
-- ------
-
-- ---- --
----- ------------- - ----------
-------------------------------------- --------- -- -
-- ---- --- -------------------------- -
-------------- -- - ---- --------
- ---- -
------------ -------------- --------
-
---
----------------- -- -- -
----- -------- - ----------
---------------------------------------- ----------
------------------------------------- -- - ---- --------
---------------------------------------- ----------
----------------------------------- -------------- --------
---在上面的例子中，我们使用 mockImplementation 方法来实现 Mock 函数 mockFetchData 的行为。这个 Mock 函数会根据传入的参数进行判断，如果 url 是 'https://www.example.com'，则返回一个固定的值 'This is a fake data.'，否则返回一个异常 'Invalid URL.'。
在测试中，我们分别调用了 mockFetchData 函数并传入不同的参数，然后使用 expect 断言来验证它们是否被正确调用，并传递了正确的参数。
总结
Mock 函数是一个非常强大的测试工具。在 Jest 中，我们可以使用 jest.fn() 方法来创建 Mock 函数，并使用 mockReturnValue 或者 mockImplementation 方法指定 Mock 函数的返回值和行为。通过 Mock 函数，我们可以更方便地测试我们的代码，提高测试的覆盖率和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b56c57d4982a6eb538ae7