在前端开发中，我们经常会使用 Jest 进行测试，而 Jest 提供的 Mock 功能可以模拟函数的行为。但是，有时候我们会遇到一个问题，就是在使用 Mock 函数进行测试时，虽然 Mock 函数成功了，但是实际上被替换的函数并没有改变，这个问题我们该怎么解决呢？
问题产生的原因
这个问题的产生原因，是由于 JavaScript 的一些特性引发的。Mock 函数会创建一个新的函数来替换原有的函数，但在函数替换之前，如果原有函数已经被执行过了，那么它的返回值就会被缓存下来。Mock 函数创建的新函数无法访问到缓存中的返回值，所以新函数在执行时，会返回 undefined。
解决方案
那么问题来了，如何解决这个问题呢？其实，我们可以通过在测试用例执行前，手动清空缓存来解决这个问题。
---------------------
上述代码可以清空所有 Mock 函数的缓存。如果你只想清空某个 Mock 函数的缓存，可以使用下面的代码：
-------------------
示例代码
以下是一个简单的示例代码，演示了如何使用 jest.clearAllMocks() 方法来解决“Mock 成功，但实际上函数并没有被替换”这个问题。
-- -------
-------------- - -
---- ----------- -- -
------ - - --
-
--
-- ------------
----- ---- - ------------------
---------- --- --- ---------- -- -- -
----- ----------- - ---------
-------- - ---------- -- -
------ ---
---
------------------ -------------
---------------------------------------- ---
--------------------- ------------
---------------------
---在上面的测试用例中，我们使用 Jest 的 Mock 函数来模拟 add 函数的行为，我们期望该函数在传入 1 和 2 两个参数时返回 10。但我们在执行 expect(originalAdd(1, 2)).toBe(3) 时，发现原来的 add 函数并没有被替换，依然返回 3。
我们可以在测试用例执行前，调用 jest.clearAllMocks() 方法，来清空 Mock 函数的缓存，这样就能够成功替换该函数，并正确测试该函数的行为。
总结
解决 Jest Mock 成功，但是函数实际上不被替换的问题，关键在于手动清空缓存。当我们使用 Jest 进行测试时，需要时刻注意这个问题的发生，及时进行解决，以便更准确地测试代码的行为。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ace7448841e98949020a7