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