Jest 中 Mock 自定义模块的问题及解决方法

Jest 是一个非常流行的 JavaScript 测试框架,可以用于测试前端和后端代码。在 Jest 中,Mock 是一个非常重要的概念,可以用来模拟一些功能,比如模拟网络请求、模拟组件等等。但是,在使用 Jest 进行测试时,Mock 自定义模块的问题可能会让你感到困惑。本文将详细介绍 Jest 中 Mock 自定义模块的问题及解决方法。

问题描述

在 Jest 中,我们可以使用 jest.mock() 方法来 Mock 一个模块。例如,我们可以 Mock 一个 axios 模块来模拟网络请求:

-- ------
------ ----- ---- --------

------ -------- ----------- -
  ------ -----------------------
-

-- -----------
------ - --------- - ---- --------

------------------ -- -- --
  ---- ---------- -- ----------------- ----- ----- ----- ----
----

--------------- ------- ---- ------ -- -- -
  ------ --------------------- -- -
    ----------------------- -------
  ---
---

在上面的示例中,我们使用 jest.mock() 方法来 Mock axios 模块,然后在测试中调用 fetchData() 方法。这个测试会通过,并且返回的数据是我们 Mock 的数据。

然而,当我们需要 Mock 一个自定义模块时,就可能会遇到一些问题。考虑以下示例:

-- --------
------ -------- ------ -- -
  ------ - - --
-

-- -------
------ - --- - ---- ----------

------ -------- ------ -- -
  ------ ------ ---
-

-- ------------
------ - --- - ---- ---------

-------------------- -- -- --
  ---- ---------- -- ---
----

--------- ------- --- -- -- -
  ------------- ------------
---

在上面的示例中,我们想要 Mock utils 模块中的 add() 方法,然后测试 math 模块中的 sum() 方法。我们使用了和前面示例中一样的方式来 Mock add() 方法,但是测试并没有通过。相反,它返回了 NaN

这是因为在 math.js 中,我们使用了 import { add } from './utils' 来引入 add() 方法,而 jest.mock() 方法只能 Mock 模块,而不能 Mock 模块中的方法。因此,在 math.test.js 中,我们 Mock ./utils 模块后,math.js 中的 add() 方法仍然会调用原始的 add() 方法,而不是 Mock 的方法。

解决方法

为了解决这个问题,我们需要使用 __mocks__ 文件夹来 Mock 自定义模块中的方法。具体来说,我们需要在 __mocks__ 文件夹中创建一个与自定义模块同名的文件,并在其中 Mock 所有的方法。例如,在上面的示例中,我们需要创建一个 __mocks__/utils.js 文件,然后在其中 Mock add() 方法:

-- ------------------
------ -------- ------ -- -
  ------ --
-

然后在 math.test.js 中,我们需要使用 jest.mock() 方法来 Mock utils 模块:

-- ------------
------ - --- - ---- ---------
------ - --- - ---- ----------

---------------------

--------- ------- --- -- -- -
  ------------- ------------
---

现在,我们可以成功 Mock add() 方法,并且测试通过了。

结论

在 Jest 中,Mock 自定义模块的问题可能会让你感到困惑。但是,通过使用 __mocks__ 文件夹,我们可以成功 Mock 自定义模块中的方法。在编写 Jest 测试时,我们应该注意这个问题,并且遵循正确的 Mock 方式,以确保我们的测试能够准确地模拟我们的应用程序行为。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/673b106339d6d08e88b17659