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() 方法：
// __mocks__/utils.js
export function add(a, b) {
return 3;
}然后在 math.test.js 中，我们需要使用 jest.mock() 方法来 Mock utils 模块：
-- -------------------- ---- ------- -- ------------ ------ - --- - ---- --------- ------ - --- - ---- ---------- --------------------- --------- ------- --- -- -- - ------------- ------------ ---
现在，我们可以成功 Mock add() 方法，并且测试通过了。
结论
在 Jest 中，Mock 自定义模块的问题可能会让你感到困惑。但是，通过使用 __mocks__ 文件夹，我们可以成功 Mock 自定义模块中的方法。在编写 Jest 测试时，我们应该注意这个问题，并且遵循正确的 Mock 方式，以确保我们的测试能够准确地模拟我们的应用程序行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673b106339d6d08e88b17659