在前端开发中，测试是非常重要的一环。在 JavaScript 中，Jest 是一款用于测试 JavaScript 代码的库。它是由 Facebook 开发并维护的，易于使用且功能强大，受到了广泛的欢迎和使用。
Mock 是一种测试技术，用于创建虚拟数据、模拟函数行为和测试异步代码。Jest 支持使用 Mock 来测试你的代码，本文将向你介绍如何在 Jest 中使用 Mock 测试。
Mock 的基本概念
Mock 是指用伪造的对象来替换真实的对象，以便在测试时能够完全控制所测试的代码，从而保证测试的准确性和可靠性。Mock 的本质是一种依赖注入机制，它可以替换掉代码中的依赖项，使测试代码能够轻松地模拟依赖项的行为，从而能够更好地进行单元测试和集成测试。
在 JavaScript 代码中，Mock 可以使用 Jest 提供的 Mock 函数来实现，Mock 函数是一种特殊的函数，它可以模拟对象的行为、返回值和异常等信息。
使用 Mock Function
Jest 提供了两种 Mock 函数的创建方式：手动创建和自动创建。手动创建 Mock 函数需要定义模拟的函数行为，而自动创建 Mock 函数不需要手动定义模拟的函数行为，可以自动模拟返回值或者延迟执行。
手动创建 Mock 函数
手动创建 Mock 函数有两种方式：使用 jest.fn() 和使用 jest.mock()。下面是使用 jest.fn() 创建 Mock 函数的示例代码：
const div = document.createElement('div');
const mockFn = jest.fn(() => 'Mocked Result');
div.addEventListener('click', mockFn);
div.click();
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveReturnedWith('Mocked Result');上面的代码中，我们创建了一个 Mock 函数 mockFn，然后将其作为事件 click 的回调函数，最后触发了该事件。在测试代码中，我们使用了 jest.fn() 函数来创建 Mock 函数，然后使用 expect 断言来验证 Mock 函数的调用次数和返回值。
如果你需要控制 Mock 函数的行为，可以传递一些参数来实现。例如，你可以使用 mockFn.mockImplementation() 来定义 Mock 函数的行为，如下所示：
const mockFn = jest.fn((num1, num2) => num1 + num2); expect(mockFn(1, 2)).toEqual(3); expect(mockFn.mock.calls[0][0]).toEqual(1); expect(mockFn.mock.calls[0][1]).toEqual(2); expect(mockFn.mock.results[0].value).toEqual(3);
上面的代码中，我们通过 jest.fn() 创建了一个名为 mockFn 的 Mock 函数，并通过 mockImplementation() 方法为其定义了行为，即将两个数字相加。在测试代码中，我们使用 expect 断言验证了 Mock 函数的调用参数和返回值。
自动创建 Mock 函数
自动创建 Mock 函数可以使用 jest.genMockFromModule() 方法或者 jest.mock() 方法来实现。下面是使用 jest.genMockFromModule() 方法自动创建 Mock 函数的示例代码：
const utils = jest.genMockFromModule('./utils');
test('genMockFromModule', () => {
expect(utils.parseUrl('/api/users')).toEqual({
protocol: 'http',
host: 'localhost',
path: '/api/users',
});
});上面的代码中，我们使用 jest.genMockFromModule() 创建了名为 utils 的 Mock 对象，并定义了 parseUrl 方法返回指定的路径对象。
下面是使用 jest.mock() 方法自动创建 Mock 函数的示例代码：
-- -------------------- ---- -------
---------------------
------ ----- ---- ----------
------------ -- -- -
--------------------------------
--------- -------
----- ------------
----- -------------
---
----------------------------------------------
--------- -------
----- ------------
----- -------------
---
---上面的代码中，我们使用 jest.mock() 创建了名为 utils 的 Mock 对象，并定义了 parseUrl 方法的返回值。在测试代码中，我们使用了 mockReturnValue() 方法为 Mock 函数定义了返回值，然后使用 expect 断言来验证 Mock 函数的返回值。
Mock 异步代码
Mock 还可以用于测试异步代码。异步代码通常会产生异步行为，例如：异步调用、异步回调、异步事件等等。我们可以使用 Jest 提供的 Mock 工具来模拟异步行为，以便在测试时能够完全控制异步行为。
下面是使用 Jest 测试异步代码的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------------------- ---------- ----- --------- ----- -- -- - ----- ---- - - --- -- ----- ------- -- ----------------------------- ---- --- ----- ------ - ----- ------------------------ ---------------------------------- ---
上面的代码中，我们使用 Jest 的 mockResolvedValue() 方法灵活地定义了 Mock 函数的返回值，然后使用 await 关键字来等待异步请求的结果，最后使用 expect 断言来验证异步请求的结果。
总结
本文介绍了如何在 Jest 中使用 Mock 测试。Mock 是一种测试技术，可以用于创建虚拟数据、模拟函数行为和测试异步代码，以便在测试时能够完全控制所测试的代码，从而保证测试的准确性和可靠性。我们可以使用 jest.fn()、jest.genMockFromModule() 和 jest.mock() 来创建 Mock 函数，还可以使用对于 Mock 工具来测试异步代码。
通过学习本文，相信你已经了解了如何在 Jest 中使用 Mock 测试，希望能对你在前端测试中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1ec0b83d39b4881613d77