在前端开发过程中，单元测试是非常重要的一个环节。而在测试过程中，我们常常需要使用 mock 来模拟一些数据或者方法。Jest 是一个非常强大的测试框架，自带有 mock 功能，下面我们将介绍 Jest 中 mock 的实际应用场景及实现方法。
什么是 Jest Mock？
Jest 中的 mock 可以理解为一组测试中的虚拟对象。也就是说，当我们在测试中需要测试一个依赖关系或者函数间的交互，但又不希望真正调用这些依赖或函数，这时我们就可以使用 Jest 的 mock 功能来创建虚拟对象，来代替真实对象的行为与输出，更方便地进行测试的编写与调试。
实际应用场景
后端接口
在前端开发中，我们常常需要调用后端接口来获取数据。但在测试阶段，如果直接调用实际的后端接口，可能会有下面几个问题：
- 后端接口未完成
- 后端接口变化频繁导致测试用例需要频繁更改
- 后端接口数据太过复杂，难以模拟出所有测试场景
这时我们可以使用 Jest 的 mock 功能，模拟后端接口的返回数据。示例代码如下：
// 模拟获取用户信息接口
const getUserInfo = jest.fn(() => Promise.resolve({ name: '张三', age: 20 }));
// 测试用例
test('getUserInfo()', async () => {
const data = await getUserInfo();
expect(data).toEqual({ name: '张三', age: 20 });
});难以构造的数据
有时候，测试场景中需要一些特殊的数据，但是这些数据比较难以构造，或者构造数据的成本比较高，这时我们也可以使用 Jest 的 mock 功能。示例代码如下：
-- -------------------- ---- -------
-- -----------
----- ---- - -
----- -
----- -----
---- --
--
------- -
-
--- --
------ ------
------- ----
--
-
--- --
------ ------
------- ----
-
-
--
----- ------- - ---------- -- -----------------------
-- ------------- ------ ---------- -----
----------------- ----- -- -- -
----- --- - ----- ----------
----------------------------------------
---浏览器 API
在开发 Web 应用时，我们经常需要操作一些浏览器 API，例如修改 DOM、操作 Cookie、localStorage 等等。但是在测试中，直接访问真实的浏览器 API 是不现实的。这时我们可以使用 Jest 的 mock 功能来模拟浏览器 API 的行为。示例代码如下：
-- -------------------- ---- ------- -- ---- ------ ----- --------- - ---------- --------------- - ---------- -- ---- ------------------- -- -- - ----------------- --------- ------------------------------------------- ---
实现方法
Jest 提供了两种 mock 的实现方式：
手动编写 mock 函数
手动编写 mock 函数是比较灵活的方式。我们可以自己编写一个假的函数或对象，然后将它注入到待测试函数中。
-- -------------------- ---- ------- -- ----- -------- ----------- - ------ ------------------------------------------ - -- ---- ---- -- ------------------ -- -- -- ---- -- -- ----------------- ----- ----- ----- -- ---- -- ---- ------------------- ----- -- -- - ----- - ---- - - ----- ------------ ----------------------- ------- ---
在这个例子中，我们手动编写了一个模拟的 axios 函数，然后将它注入到 fetchData 函数中，从而实现了 mock 的效果。
自动生成 mock 函数
Jest 还提供了自动生成 mock 函数的方式，这种方式更加方便，但是也可能会有一定的局限性。
-- -------------------- ---- ------- -- ----- ------ - --------- - ---- -------- -- ---- ---- -- ------------------- -- ---- ------------------- -- -- - --------------------------------- ------- ------ --------------------------------------- ------- ---
在这个例子中，我们使用了 Jest 提供的 mock 函数自动生成机制。我们先将 fetchData 函数注入到 Jest 的自动 mock 机制中，然后使用 mockResolvedValue 方法设置 mock 函数的返回值，并进行断言验证。
总结
Jest 中的 mock 功能可以帮助我们更方便地进行测试编写和调试。在实际开发中，我们可以使用 Jest 的 mock 功能，并结合手动编写和自动生成 mock 函数的方式，来应对不同的测试场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482c67348841e98942222c8