Mock 是前端测试框架中必备的技能之一，能够帮助我们模拟各种场景，方便测试代码的可靠性，提高测试的稳定性。这篇文章主要介绍 Jest 中的 Mock 实战，包括 Mock 的类型和使用方法。
什么是 Mock？
Mock 即为“模拟”，是一种在测试过程中替代特定组件的行为的技术。Mock 可以替代各种类型的组件，包括网络请求、函数、类和组件等。通过 Mock 技术，我们可以模拟出各种场景，方便测试代码的可靠性，提高测试的稳定性。
Jest 中的 Mock 类型
Jest 中主要有两种 Mock 类型：手动 Mock 和自动 Mock。
手动 Mock
手动 Mock 是一种手动创建 Mock 对象的技术，它可以帮助我们模拟各种场景，从而方便测试代码的可靠性，提高测试的稳定性。
手动 Mock 通常是在测试文件中，通过 Jest 提供的 API 创建一个 Mock 对象。比如，我们可以创建一个通过 Mock 实现的函数，代码如下所示：
jest.mock('./path/to/module', () => { return { functionToMock: jest.fn(() => 'mocked return value'), }; });
这里我们使用了 jest.mock API，来创建一个 Mock 对象。这个对象代表了我们所需要 Mock 的模块，并且实现了需要 Mock 的函数。
自动 Mock
自动 Mock 是一种通过 Jest 自动生成的 Mock 对象。它可以自动为我们创建 Mock 对象，从而方便测试代码的可靠性，提高测试的稳定性。
自动 Mock 模块可以通过一个 __mock__ 后缀的文件命名，在测试时会自动加载。在这个文件中，我们可以通过一个 module.exports 对象来定义 Mock 的内容，代码如下所示：
module.exports = { functionToMock: jest.fn(() => 'mocked return value'), };
下面我们通过一个 Demo，介绍 Jest 中的 Mock 实战。
假设我们有一个 userService 模块，它包含了一个名为 getUserById 的函数，我们需要测试这个函数。在测试中，我们需要模拟这个函数返回的数据，这样才能保证测试的可靠性和稳定性。
下面是 userService 模块的代码：
-- -------------------- ---- ------- -- -------------- ------ ----- ---- -------- ----- -------- - --------------------------- ------ -------- --------------- - ------ ------------------------------------ -------------- -- --------------- -展开代码
我们需要对 getUserById 函数进行测试，并且在测试中模拟它返回的数据。
首先，我们需要创建一个 userService.test.js 测试文件，代码如下：
-- -------------------- ---- ------- -- ------------------- ------ ----- ---- -------- ------ - ----------- - ---- ---------------- ------------------- ----------------------- -- -- - --------------- ------ ------ ---- ------ ----- -- -- - ----- -------- - - ----- ----- ---- --- ---- --- -- ----------------------------- ----- -------- --- ----- ------ - ----- ------------------- ------------------------ ----- ----- ---- --- ---- --- --- --- ---展开代码
在这个文件中，我们首先使用 jest.mock API，来创建一个 Mock 对象代表 axios 模块。接着，在测试中，我们使用 axios.get.mockResolvedValue API，来模拟 axios.get 的返回值。最后，我们调用 getUserById 函数，并对其返回值进行断言。
通过这个测试，我们可以保证 getUserById 函数的返回值符合预期，从而保证代码的可靠性和稳定性。
总结
本文主要介绍了 Jest 中的 Mock 实战，包括 Mock 的类型和使用方法。通过本文的介绍，相信读者们已经了解了 Jest 中的 Mock 技术，并且能够灵活地应用在自己的项目中。Mock 不仅可以帮助我们模拟各种场景，还可以提高测试的稳定性和可靠性，是前端测试中必不可少的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490efcc48841e9894ef3e1f
