随着前端应用复杂度不断提高，引入了越来越多的第三方库和模块。这些模块为我们提供了丰富的功能和服务，同时也增加了代码的复杂度和可测试性。在编写测试时，我们需要使用 Mock 对象来模拟这些模块的行为，以便更好地测试我们的代码。在 Jest 测试中，我们需要考虑的 Mock 对象范围包括以下几种情况：
1. 基于模块的 Mock 对象
对于使用 import 或者 require 引入的模块，我们可以使用 Jest 的 jest.mock() 方法来创建一个基于模块的 Mock 对象。该方法接收两个参数：模块名称和模块的实现。模块名称可以是相对路径、绝对路径或者模块名称。模块的实现可以是一个函数、类、对象等类型。以下是基于模块的 Mock 对象示例：
-- -------------------- ---- ------- -- ---- ------ ----- -------- - -- -- - -- --------- - -- ---- ----------------------- -- -- - ------ - --------- --------------------------- - --- -- ----- ------- -- - --- -- ----- ------- -- --- - --展开代码
在上面的示例中，我们通过 jest.mock() 方法来创建了一个基于 ./todos.js 模块的 Mock 对象。该 Mock 对象包含了一个 getTodos() 函数，该函数被 Jest 的 jest.fn() 方法包装成了一个 Mock 函数，并使用 mockReturnValue() 方法指定了该函数的返回值。这样，在测试中我们就可以使用 Mock 对象来代替原始的 getTodos() 函数。
2. 外部依赖的 Mock 对象
对于一些与应用外部交互的依赖，比如网络请求、本地存储等，在测试时我们也需要使用 Mock 对象来模拟其行为。这些 Mock 对象可以使用 Jest 提供的 jest.fn() 方法来创建，并使用 mockImplementation() 方法来指定其行为。以下是一个外部依赖的 Mock 对象示例：
-- -------------------- ---- ------- -- ------ ----- --- - - ----- ---------- - -- ----------- - - -- ---- ---------------- ------ ------ ------- ----- -- -- - ----- -------------------- - - - --- -- ----- ------- -- - --- -- ----- ------- -- - ----- ------- - - --------- ------------------------------- -- -------------------------------------- - ----- ----- - ----- ------------------- ------------------------------------------- --展开代码
在上面的示例中，我们通过 Jest 的 jest.fn() 方法创建了一个 Mock 函数，并使用 mockImplementation() 方法指定了该 Mock 函数的行为。这里我们模拟了一个网络请求的 Mock 对象，并在测试中使用 fetchTodos() 函数来获取数据并验证返回结果。
3. 组件的 Mock 对象
在 React 组件中，我们需要在测试中使用 Mock 对象来代替一些 Props 和 State，以便更好地测试组件的渲染和交互行为。Jest 提供了 jest.mock() 方法来创建基于组件的 Mock 对象，并使用 shallow() 方法来创建一个浅层渲染实例。以下是一个组件的 Mock 对象示例：
-- -------------------- ---- ------- -- ---- ----- ----------- - -- ----- -- -- - ------ - ---- --------------- -- - --- ------------------------------ --- ----- - - -- ---- -------------------------- -- -- - ----- ----- - - - --- -- ----- ------- -- - --- -- ----- ------- -- - ------ - ------------ -- ----- - ----- -- -- - ------ ------------------- -- --- ------------------------------------- - - -- ----------------- ------ ------ ----------- -- -- - ----- ------- - -------------------- --- --------------------------------- --展开代码
在上面的示例中，我们使用 jest.mock() 方法来创建了一个基于 MyComponent 组件的 Mock 对象。该 Mock 对象包含了一个名为 MyComponent 的组件，以及一个默认的 Props todos。在测试中，我们使用 shallow() 方法创建了一个浅层渲染实例，并验证其渲染结果是否正确。
通过以上示例，我们可以看到在 Jest 测试中，Mock 对象是很重要的一个工具，能够极大地帮助我们进行单元测试和集成测试。但是需要注意的是，在使用 Mock 对象时要确保其范围合适，不要过度使用或者粒度过大，以免影响测试的真实性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf756e0c976d473a4174ee
