在进行前端开发时，我们经常需要进行测试来确保代码的正确性。而 Jest 是一个常用的 JavaScript 测试框架，它提供了很多方便的测试工具和语法，让我们能够更快速地编写测试用例。然而，有时候我们需要在 Jest 测试中 mock 已经加载的模块，以方便我们进行单元测试，这时候该怎么做呢？
什么是 mock？
在 Jest 测试中，mock 可以用来模拟某些函数、对象等行为，以便我们能够更方便地进行测试。mock 可以帮助我们隔离被测代码和依赖的外部模块之间的关系，从而能够更容易地进行单元测试。
如何 mock 已经加载的模块？
在 Jest 中，我们可以使用 jest.mock() 函数来 mock 模块。这个函数接收模块的路径作为参数，并返回模块的模拟函数。在使用 jest.mock() 函数时，Jest 会自动将模块的所有导出都替换为模拟函数，我们可以在测试中直接使用这个模拟函数。
下面是一个例子，假设我们有一个 utils.js 模块，其中有一个 add 函数用于对两个数进行加法运算：
-- -------------------- ---- ------- -- -------- -------- ------ -- - ------ - - -- - -------------- - - --- --
如果我们想要测试一个依赖 utils.js 的模块时，我们可以使用 Jest 提供的 jest.mock() 函数模拟 utils.js 模块，代码如下：
-- -------------------- ---- ------- -- ------- --------------------- ----- - --- - - ------------------- --------- -------- ----- ----------- -- -- - ------------- ------------ ---
在测试中，我们首先使用 jest.mock() 函数来 mock utils.js 模块。然后，我们通过 require() 函数引入 add 函数，这时候我们引入的 add 函数已经被 Jest 替换为模拟函数，我们可以直接使用它进行单元测试。
如何自定义模拟函数？
有时候，我们可能需要自定义模拟函数的实现代码，以便更好地测试我们的代码。在 Jest 中，我们可以使用 jest.fn() 函数来创建自定义的模拟函数。这个函数会返回一个新的可调用的函数，在函数被调用时会自动记录调用的参数和返回值。
下面是一个例子，假设我们想要测试一个依赖 axios 模块的模块时，我们可以使用 Jest 提供的 jest.mock() 函数和 jest.fn() 函数模拟 axios 模块的 get 函数，并自定义返回值和实现逻辑，代码如下：
-- -------------------- ---- ------- -- ------- ------------------- ----- ----- - ----------------- ----- --------- - ----------------------- --------------- -------- ----- ----------- ----- -- -- - ----- -------- - - ----- - ------- --------- - -- ------------------------------- -- --------------------------- ----- ------ - ----- ------------ ------------------------------------------ --------------------------------------------------------------------- ---
在测试中，我们首先使用 jest.mock() 函数来 mock axios 模块，然后通过 require() 函数引入模块中的函数 fetchData。接着，我们使用 jest.fn() 函数来模拟 axios 模块的 get 函数，并在模拟函数中返回一个 Promise 对象，用于模拟异步请求的返回值。最后，我们可以对模拟函数的行为进行断言。
总结
在 Jest 测试中，mock 可以帮助我们更方便地进行单元测试。我们可以使用 jest.mock() 函数来模拟已经加载的模块，也可以使用 jest.fn() 函数来自定义模拟函数的实现逻辑。在实际开发中，我们应该善于利用 Jest 的 mock 功能，以提高测试效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edcd6df6b2d6eab37f4b13