在前端开发中，我们经常需要使用 Jest 等测试框架来进行单元测试。在测试过程中，Mock 函数是非常常用的工具，它可以帮助我们模拟一些复杂的交互，从而使测试变得简单易行。但是，一般情况下，Mock 函数在使用时会覆盖原有的函数实现，这就很难进行针对性测试，也可能导致测试结果不准确。所以本篇文章就来介绍如何在 Jest 的 mock 函数中保留实现原理，以及如何正确应用这个技术。
什么是 Jest 的 Mock 函数
在 Jest 的测试框架中，Mock 函数是一个非常常用的工具。Mock 函数是一种模拟函数调用的技术，该技术可以用来模拟函数的行为。Mock 函数可以模拟复杂的函数调用，可以模拟异步操作，还可以通过返回值来测试特定的情况。它是一个测试框架的核心组件。在 Jest 中，Mock 函数的使用非常简单。
下面是一个简单的 Mock 函数的例子：
const fn = jest.fn((input) => input * 2); console.log(fn(10)); // 20 console.log(fn(5)); // 10
上面的代码中，我们使用 jest.fn() 来创建一个 Mock 函数，并用构造函数的参数来指定该函数的具体实现。在调用 fn 时，Mock 函数会按照我们指定的实现逻辑来执行。这就是 Jest 的 Mock 函数的基本用法。
Mock 函数的一些问题
虽说 Mock 函数是 Jest 中非常常用的组件。但是，在实际应用中，我们发现 Mock 函数也存在一些问题：
- Mock 函数通常会覆盖原有函数的实现。
- Mock 函数可能在某些情况下无法模拟原来的返回值和异常情况。
这些问题的根源就在于 Mock 函数采取了一种“替代”（substitute）原函数的方式，因此可能会覆盖原函数本身的功能。而在某些情况下，我们需要保留原函数的功能才能进行有效的测试。那么，如何在 Mock 函数中保留原函数的功能呢？接下来我们就介绍一种解决方案。
将 Mock 函数和原函数结合
为了解决上述问题，我们需要将 Mock 函数和原函数结合起来，以实现功能的共存。具体做法如下：
首先，我们需要创建一个新的 Mock 函数，并在该函数中调用原函数。然后，我们可以在 Mock 函数中添加我们需要测试的逻辑，以实现目标测试。
下面是示例代码：
-- -------------------- ---- -------
-- -------
-------- ------ -- -
------ - - --
-
-- -------- ---- --
----- ------- - -------------------------------- -- -- -
----- ------ - ------ ---
-- - ---- ---------
-- ------- - --- -
------ ------- -------
-
------ -------
---
---------------------- ---- -- --
----------------------- ---- -- ------- ------在上面的示例代码中，我们首先声明了一个原函数 add，然后使用 jest.fn() 创建一个 Mock 函数 mockAdd。在 mockAdd 的实现中，我们首先调用了 add 函数来得到原函数的结果。然后，在 Mock 函数中，我们添加了一个测试逻辑：如果结果大于 10，则返回字符串 'exceed limit'；否则，返回原函数的结果。
这样一来，Mock 函数中就既保留了原函数的功能，又添加了我们需要测试的逻辑。这样我们就可以更好地完成单元测试了。
更多的示例
下面是一些关于 Jest Mock 函数的示例代码，供参考。
-- -------------------- ---- -------
-- -- ---- ---- ----- ---
------------ - ---------- -- -----------------
----- -- -- ----------------- ----- -- ---
----
----- -------- ------------ -
--- -
----- -------- - ----- ----------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
------------------ ----- -- -- -
----- ---- - ----- -------------
---------------------- ----- -- ---
---
-- -- ---- --------
-------- --------- -
------ --- ----------------- -- -
------------------- ----
---
-
------------- ----- -- -- -
----- -------- - ----------
----- ---------------------------
------------------------------------
---
-- -- ---- -----------
-------- ------ -- -
------ - - --
-
----------- -- -- -
----- ------- - -------------------------------- -- -- ------ -- - ----
----------------- -------------
---
-- -- ---- ---------
-------- --------- -- -
-- -- --- -- -
----- --- --------------- -- -------
-
------ - - --
-
-------------- -- -- -
----- ---------- - -------------------------------- -- -- -
-- -- --- -- -
----- --- --------------- -- -------
-
------ - - --
---
--------- -- ------------- --------------------- -- -------
---总结
用 Jest 的 Mock 函数模拟函数的实现，保留原函数的功能，可以帮助我们完成更加有效的单元测试。在实际开发中，我们应该清楚自己的测试目标，并针对目标选择合适的 Mock 函数策略。本篇文章就介绍了一些常用的 Mock 函数技巧，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c6233968c7c53b0b5df5f