Jest 中使用 __mocks__ 文件夹进行自定义代码及外部依赖的模拟

阅读时长 4 分钟读完

在前端开发过程中,我们经常需要测试我们的代码,保证其高质量。而 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

纠错
反馈