在前端开发中，我们经常需要编写和调试一些复杂的代码逻辑，如网络请求、业务逻辑等，而这些逻辑往往又与外部依赖紧密相连，如第三方库、API 接口等。在测试这些代码时，我们往往需要模拟这些外部依赖，以便更好地控制测试环境，从而保证代码的正确性和稳定性。Jest 的 Mock 功能正是为此而设计，本文将详细探讨 Jest 中的 Mock 功能。
Jest Mock 的分类
在 Jest 中，Mock 功能可以分为两种类型：手动 Mock 和自动 Mock。
- 手动 Mock
手动 Mock 是指我们需要手动编写代码来模拟外部依赖，这种方式需要我们自己编写 mock 模块，以便 Jest 在测试时进行加载。手动 Mock 能够更灵活地掌控测试环境，但也需要我们自己编写和维护 mock 模块，稍微有些繁琐。
- 自动 Mock
自动 Mock 是指 Jest 根据被测试的模块自动生成 mock，这种方式无需我们手动编写 mock 模块，Jest 会自动加载并使用自动生成的 mock 模块。自动 Mock 能够更加方便地进行测试，但也可能会出现自动模拟不够精准的情况，需要我们进行手动调整。
Jest Mock 的使用
接下来，我们将结合示例代码来介绍 Jest Mock 的具体用法。
手动 Mock
在使用 Jest 的手动 Mock 功能时，我们需要在测试文件中使用 jest.mock() 或 require.mock() 方法来手动编写并加载 mock 模块。下面是一个简单的示例代码：
-- -------------------- ---- ------- -- -------- ------ ------ -------- ----------- - ------ --- ----------------- -- - ------------- -- - --------------- -- ---- -- - -- ---- ---- ----- - --------- - - --------------------------- ----------------------------- -- -- - ------ - ---------- ---------- -- --------------------- ------- - -- --------------- ------ ------ ---- ------ ----- -- -- - ----- ---- - ----- ----------- -------------------------- ------ --展开代码
在这个示例中，我们首先定义了一个 originalModule 模块，其中包含一个 fetchData 函数，该函数返回一个 Promise 对象，其中包含一个 setTimeout，以便进行异步调用。在测试文件中，我们使用 require.mock() 方法手动加载 mock 模块，其中 mock 模块中再次定义了 fetchData 函数，并使用 jest.fn() 包裹，以便让 Jest 进行 mock。在测试代码中，我们调用 fetchData 函数，并期望返回 "mock data"。
自动 Mock
在使用 Jest 的自动 Mock 功能时，我们只需要通过 jest.mock() 方法来自动加载 mock 模块，Jest 会根据被测试模块来进行自动模拟。下面是一个简单的示例代码：
-- -------------------- ---- ------- -- -------- ------ ------ -------- ----------- - ------ --- ----------------- -- - ------------- -- - --------------- -- ---- -- - -- ---- ---- ----- - --------- - - --------------------------- ----------------------------- --------------- ------ ------ ----------- ----- -- -- - ----- ---- - ----- ----------- ------------------------------- --展开代码
在这个示例中，我们仍然定义了一个 originalModule 模块，其中包含一个 fetchData 函数。在测试文件中，我们使用 jest.mock() 方法自动加载 mock 模块，由于未指定 mock 模块中的 fetchData 函数，因此 Jest 将其自动 mock 为一个空函数。在测试代码中，我们调用 fetchData 函数，并期望返回 undefined。
Jest Mock 的细节
在使用 Jest 的 Mock 功能时，还需要注意以下几个细节问题：
- 复位 Mock
在使用 Jest 进行多个测试时，可能需要在每个测试之间重置 Mock 对象。此时，我们可以使用 jest.resetAllMocks() 或 jest.restoreAllMocks() 方法来进行重置。
- 来源跟踪
当使用 Jest 进行 Mock 时，我们需要确保 Mock 对象能够正确地追踪代码来源，即能够跟踪被 Mock 的模块和方法。此时，我们可以通过设置 jest.mockImplementation() 方法的第二个参数来实现。
- 动态 Mock
有些情况下，Mock 代码需要根据不同的参数调用不同的 Mock。此时，我们可以使用 jest.fn() 方法来创建一个动态的 Mock 函数，以便针对不同的参数进行不同的 mock。
综上所述，Jest 的 Mock 功能可以极大地方便我们进行测试，并保证代码的正确性和稳定性。在使用 Jest 进行前端开发时，我们应该合理地使用 Mock 功能，以便更好地控制测试环境和处理测试数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b8f7b8306f20b3a67237dc
