在前端开发过程中，我们经常需要测试我们的代码，保证其高质量。而 Jest 是一个非常优秀的前端测试框架，它具有简单易用、强大的功能以及广泛的社区支持等优点，可以帮助我们轻松地进行前端测试。
Jest 还提供了 mocks 文件夹，它可以让我们很方便地自定义代码及外部依赖的模拟，这能够帮助我们避免在测试过程中产生副作用，提高测试代码的可靠性。
使用 mocks 文件夹
在 Jest 中，我们可以使用 mocks 文件夹来模拟我们需要测试的代码及外部依赖。在编写测试代码时，Jest 会自动优先加载 mocks 文件夹中的模块，从而根据我们的需求自动进行模拟。
为了更好地理解，我们来看一个示例代码：
-- -------- ------ -------- ------ -- - ------ - - -- - -- ------------ ------ - --- - ---- ---------- -------- --------- - ------------------ ---- - ---------- -- ---- ------ ------ - ------- - ---- -------------- ---------- ----- -- -- - ---------- ---
在上面的代码中，我们在 testUtils.js 文件中引用了 add 函数，并在控制台中输出其返回值。在 Jest 中通过调用 testAdd 方法进行测试，这样测试的结果就会在控制台中输出。
现在我们想要测试 utils.js 中的代码，因为测试代码中引用了这些代码。但是如果我们直接测试 utils.js，那么 testAdd 方法中的输出就会出现在控制台中，这是我们不想要的。为了避免这种情况的发生，我们可以在 mocks 文件夹中创建一个与 utils.js 同名的模块，然后在模块中模拟 utils.js 中的函数。具体代码如下：
-- ------------------ ------ -------- ------ -- - ------ - - -- - -- ---- ------ ------ - ------- - ---- -------------- --------------------- -- ------ ---------- ----- -- -- - ---------- ---
在上面的代码中，我们首先引入了模拟模块，然后在测试代码中使用 jest.mock('./utils') 引入了模拟模块。这样在测试代码执行时，将会优先加载模拟模块，从而达到我们模拟代码及外部依赖的目的。
模拟外部依赖
除了模拟自己的代码以外，mocks 文件夹还可以用来模拟外部依赖。下面我们来看一下一个简单的例子。
-- --------
------ -------- ----------- -
------ -----------------------------------------------------
-------------- -- ----------------
---------- -- ------------
-
-- ------------
------ - --------- - ---- ----------
-------- ----------- -
---------------------- -- --------------------
-
------------
-- ---- ------
------ - --------- - ---- --------------
---------- ------- -- -- -
----------------------- -- -- -
------ ------------------------------- -- -----------------
----- -- -- ----------------- ------ ----- ------ --
----
--- -- -- ----- --
------------
---在上面的代码中，我们模拟了 fetch 依赖，以便能够进行测试，具体实现是在 mocks/node-fetch.js 文件中模拟了该依赖。这段代码中我们使用了 jest.fn() 和 mockImplementation() 方法来创建一个模拟的返回值。
总结
Jest 中的 mocks 文件夹可以帮助我们更方便地对自己的代码及外部依赖进行模拟。这样不仅可以有效地消除不必要的副作用，而且还可以提高测试代码的可靠性，从而让我们更加轻松地进行前端开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651a54e695b1f8cacd24c750