在前端开发中，测试是至关重要的一环，特别是在项目规模逐渐扩大和迭代速度加快的情况下。Jest 是一个流行的 JavaScript 测试框架，它提供了 Mock 函数功能，可以用于模拟函数的实现，以便在测试期间进行测试。
在本文中，我们将探究 Jest Mock 函数的使用，包括其定义、用法和最佳实践。我们还将看到如何快速创建 Mock 函数，以及整合 Mock 函数到 Jest 单元测试中。
何谓 Jest Mock 函数？
在 Jest 中，Mock 函数是一种可以模拟其他函数行为的特殊函数。Mock 函数允许我们模拟其他函数的行为，并检查我们的代码如何与这些模拟行为进行交互。
与传统的模拟方法相比，Jest Mock 函数非常容易创建和使用。使用它们可以更轻松地通过 Jest 单元测试来测试代码，并确保代码在正确的场景和预期输出情况下保持稳定。
如何定义 Jest Mock 函数
在 Jest 中，我们可以使用 jest.fn() 函数来定义 Jest Mock 函数。它允许我们创建一个函数的模拟版本，以便我们可以在测试期间使用它。例如，我们可以使用 jest.fn() 定义以下函数：
function add(a, b) {
return a + b;
}
const mockFunction = jest.fn(add);
console.log(mockFunction(1, 2)); // 输出 3在上面的代码中，我们首先定义了一个名为 add 的函数，然后使用 jest.fn() 函数来创建一个名为 mockFunction 的 Mock 函数。最后，我们将 add 函数作为参数传递给 jest.fn()，以便 Jest 可以使用 Mock 函数的实现。
Jest Mock 函数的用法
使用 jest.fn() 函数定义 Mock 函数之后，我们可以使用它们用于单元测试的各种方案。下面是一些基本的用法，可以帮助您开始使用 Jest Mock 函数：
模拟函数的实现
使用 Jest Mock 函数之前，我们需要确定它模拟的实际函数的实现情况。这可以通过使用 .mockImplementation() 方法来实现。
例如，我们可以使用以下代码创建一个 Mock 函数：
const mockFunction = jest.fn(); mockFunction.mockImplementation(() => 'Hello World!'); console.log(mockFunction()); // 输出 Hello World!
在上面的代码中，我们首先使用 jest.fn() 创建一个名为 mockFunction 的 Mock 函数。然后，我们使用 .mockImplementation() 方法将其实现为返回字符串“Hello World!”。
最后，我们调用 mockFunction 函数时，它将返回我们设置的字符串值。
记录函数的调用次数和参数
Jest Mock 函数还提供了一些方法来帮助我们记录它们的使用情况，包括调用次数和参数。例如，我们可以使用以下方法记录 mockFunction 函数的调用和参数：
const mockFunction = jest.fn();
console.log(mockFunction.mock.calls.length); // 输出 0
mockFunction('Hello', 'World');
console.log(mockFunction.mock.calls.length); // 输出 1
console.log(mockFunction.mock.calls[0]); // 输出 ['Hello', 'World']在上面的代码中，我们创建了一个名为 mockFunction 的 Mock 函数，然后通过调用它并传递两个字符串参数来增加其调用次数。最后，我们使用 mock.calls 属性来记录 mockFunction 函数的所有调用，以及每次调用的参数。
模拟函数的返回值
Mock 函数还可以模拟实际函数的返回值，并使其根据我们的需求返回不同的值。例如，我们可以使用以下代码模拟检查用户是否具有管理员权限的函数：
const isAdmin = jest.fn(); isAdmin.mockReturnValueOnce(true); isAdmin.mockReturnValueOnce(false); console.log(isAdmin()); // 输出 true console.log(isAdmin()); // 输出 false console.log(isAdmin()); // 输出 undefined
在上面的代码中，我们首先调用 isAdmin.mockReturnValueOnce(true) 方法，该方法将使 isAdmin Mock 函数在第一次调用时返回 true。然后，我们再次调用该方法，并返回 false。
最后，我们调用 isAdmin 函数第三次时，它将返回 undefined。这是因为我们没有为第三个返回调用设置任何返回值。
检查函数是否被调用过
使用 Jest Mock 函数，我们可以轻松检查它们是否被调用过，并确保它们被调用了我们所需的次数。例如，我们可以使用以下代码检查 mockFunction 函数是否已经在我们的代码中被调用：
// javascriptcn.com 代码示例 const mockFunction = jest.fn(); console.log(mockFunction.mock.calls.length); // 输出 0 mockFunction(); console.log(mockFunction.mock.calls.length); // 输出 1 expect(mockFunction).toHaveBeenCalled(); expect(mockFunction.mock.calls.length).toBe(1);
在上面的代码中，我们创建了一个名为 mockFunction 的 Mock 函数，并通过调用它来增加其调用次数。然后，我们可以使用 toHaveBeenCalled() 方法和 mock.calls.length 属性来检查函数是否被调用过及其调用次数。
如何整合 Jest Mock 函数到 Jest 单元测试中
要在 Jest 单元测试中使用 Jest Mock 函数，请使用以下步骤：
- 在测试文件的顶部使用
jest.mock()函数来定义您要模拟的函数。 - 在测试中使用定义的 Mock 函数。
例如，我们可以使用以下步骤测试代码中的几个简单函数：
// javascriptcn.com 代码示例
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
test('arithmatic functions', () => {
jest.mock('./utils', () => {
return {
add: jest.fn((a, b) => a + b),
subtract: jest.fn((a, b) => a - b),
multiply: jest.fn((a, b) => a * b),
};
});
const { add, subtract, multiply } = require('./utils');
expect(add(1, 2)).toBe(3);
expect(subtract(4, 2)).toBe(2);
expect(multiply(3, 3)).toBe(9);
expect(add).toHaveBeenCalled();
expect(subtract).toHaveBeenCalled();
expect(multiply).toHaveBeenCalled();
});在上述代码中，我们先定义了三个基本的算术函数：add、subtract 和 multiply。然后，我们使用 jest.mock() 函数来定义工具函数的 Mock 版本。
最后，我们使用 require() 方法来加载 Mock 版本的工具文件，并使用定义的三个 Mock 函数调用它们各自的测试用例。
在测试中，我们还使用了 toHaveBeenCalled() 方法来检查每个 Mock 函数是否被调用过。
总结
在本文中，我们探究了 Jest 中 Mock 函数的定义、用法和最佳实践。我们还看到了如何快速创建 Mock 函数，并将它们应用到 Jest 单元测试中。
Mock 函数是 Jest 中非常有用的工具，可以在测试中模拟其他函数的实现，以便更简单地测试代码。如果您正在编写 Jest 单元测试，Mock 函数将是您工具箱中的强大工具之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545e8c37d4982a6ebf97ed6