在前端开发中，常常需要对代码中的依赖进行 Mock，以便在测试时能够更好地控制测试环境，从而提高测试效率和测试质量。而在 Jest 中，可以使用 Jest-Mock-Extended 库来进行 Mock，它提供了更加丰富和灵活的 Mock 功能，能够更好地满足测试的需求。
本文将介绍在 Jest 中使用 Jest-Mock-Extended 库进行 Mock 的最佳实践，包括如何创建 Mock 函数、如何设置 Mock 函数的返回值、如何设置 Mock 函数的实现、如何检查 Mock 函数的调用次数和参数等方面。本文内容详细且有深度和学习以及指导意义，并包含示例代码。
创建 Mock 函数
在 Jest-Mock-Extended 中，可以使用 jest.fn() 方法来创建 Mock 函数。例如：
const mockFn = jest.fn();
可以使用 mockFn 变量来调用 Mock 函数。例如：
mockFn();
同时，可以使用 mockFn.mock 对象来访问 Mock 函数的属性和方法。例如：
mockFn.mockReturnValue(42);
设置 Mock 函数的返回值
在 Jest-Mock-Extended 中，可以使用 mockReturnValue 方法来设置 Mock 函数的返回值。例如：
const mockFn = jest.fn().mockReturnValue(42);
在调用 Mock 函数时，将返回 42。例如：
const result = mockFn(); // result 的值为 42
如果需要根据不同的参数设置不同的返回值，可以使用 mockReturnValueOnce 方法来实现。例如：
const mockFn = jest.fn()
.mockReturnValueOnce(42)
.mockReturnValueOnce('hello')
.mockReturnValueOnce(true);在第一次调用 Mock 函数时，将返回 42；在第二次调用 Mock 函数时，将返回 'hello'；在第三次调用 Mock 函数时，将返回 true。
设置 Mock 函数的实现
在 Jest-Mock-Extended 中，可以使用 mockImplementation 方法来设置 Mock 函数的实现。例如：
const mockFn = jest.fn().mockImplementation(() => 42);
在调用 Mock 函数时，将执行函数体中的代码，并返回结果。例如：
const result = mockFn(); // result 的值为 42
如果需要根据不同的参数设置不同的实现，可以使用 mockImplementationOnce 方法来实现。例如：
const mockFn = jest.fn() .mockImplementationOnce(() => 42) .mockImplementationOnce(() => 'hello') .mockImplementationOnce(() => true);
在第一次调用 Mock 函数时，将执行函数体中的代码，并返回 42；在第二次调用 Mock 函数时，将执行函数体中的代码，并返回 'hello'；在第三次调用 Mock 函数时，将执行函数体中的代码，并返回 true。
检查 Mock 函数的调用次数和参数
在 Jest-Mock-Extended 中，可以使用 mock.calls 属性来访问 Mock 函数的调用次数和参数。例如：
const mockFn = jest.fn(); mockFn(1, 'hello', true); mockFn(2, 'world', false); console.log(mockFn.mock.calls);
在控制台中将输出：
[ [1, 'hello', true], [2, 'world', false] ]
可以使用 mock.calls.length 属性来访问 Mock 函数的调用次数。例如：
const mockFn = jest.fn(); mockFn(); mockFn(); mockFn(); console.log(mockFn.mock.calls.length); // 输出 3
可以使用 mock.calls[index] 属性来访问 Mock 函数的第 index 次调用的参数。例如：
const mockFn = jest.fn(); mockFn(1, 'hello', true); mockFn(2, 'world', false); console.log(mockFn.mock.calls[0]); // 输出 [1, 'hello', true] console.log(mockFn.mock.calls[1]); // 输出 [2, 'world', false]
同时，可以使用 mock.results 属性来访问 Mock 函数的返回值。例如：
-- -------------------- ---- ------- ----- ------ - --------- ------------------------ ----------------------------- --------------------------- --------- --------- --------- ---------------------------------
在控制台中将输出：
[
{ type: 'return', value: 42 },
{ type: 'return', value: 'hello' },
{ type: 'return', value: true }
]总结
本文介绍了在 Jest 中使用 Jest-Mock-Extended 库进行 Mock 的最佳实践，包括创建 Mock 函数、设置 Mock 函数的返回值、设置 Mock 函数的实现、检查 Mock 函数的调用次数和参数等方面。这些技巧可以帮助开发者更好地控制测试环境，从而提高测试效率和测试质量。同时，本文也提供了示例代码，方便读者学习和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fd25195b1f8cacd8826a6