在测试前端程序时，我们通常会使用 Jest 这样的测试框架，它可以帮助我们编写并执行各种测试用例。在测试用例中，我们可能需要 Mock 一个方法或所有方法，以便模拟数据、模拟网络请求等操作。本文将介绍 Jest 中的 Mock 一个方法和所有方法的具体实现方法和注意事项，并通过示例代码来说明。
Mock 一个方法
Mock 一个方法是指在测试用例中替换某个方法，并定义预期行为。例如，在测试一个组件时，我们可能需要 Mock 组件所依赖的某个方法，以确保测试的独立性和可重复性。Jest 提供了多种方法来 Mock 一个方法，下面是其中常用的两种方法：
1. jest.fn()
jest.fn() 是 Jest 中最常用的 Mock 方法，它可以创建一个空函数并返回。我们可以通过 jest.fn() 的返回值来模拟所 Mock 的函数的行为。例如，下面是一个例子：
// javascriptcn.com 代码示例
// 待测试的方法
function add(a, b) {
return a + b;
}
// 测试用例
test('add 方法测试', () => {
const mockAdd = jest.fn(); // 创建 Mock 方法
mockAdd.mockReturnValue(3); // 定义 Mock 方法的返回值
expect(mockAdd(1, 2)).toBe(3); // 执行 Mock 方法
});在这个例子中，我们定义了一个待测试的方法 add，它接收两个参数并返回它们的和。然后我们使用 jest.fn() 创建了一个 Mock 方法 mockAdd，并使用 mockAdd.mockReturnValue(3) 定义了 mockAdd 的返回值为 3。最后，我们在测试用例中执行了 mockAdd(1, 2) 并断言其返回值为 3。这样就可以达到 Mock 方法的目的了。
2. jest.spyOn()
jest.spyOn() 是一个更加强大的 Mock 方法，它可以在不改变原有逻辑的情况下替换方法的具体实现。例如，下面是一个例子：
// javascriptcn.com 代码示例
// 待测试的方法
const user = {
name: '张三',
setName(name) {
this.name = name;
},
};
// 测试用例
test('user.setName 方法测试', () => {
const spySetName = jest.spyOn(user, 'setName'); // 创建 Mock 方法
spySetName.mockImplementation(name => {
user.name = 'Mock ' + name; // 修改 Mock 方法的行为
});
user.setName('李四'); // 执行 Mock 方法
expect(user.name).toBe('Mock 李四'); // 断言执行结果
spySetName.mockRestore(); // 恢复原方法
user.setName('王五'); // 再次执行原方法
expect(user.name).toBe('王五'); // 断言执行结果
});在这个例子中，我们定义了一个对象 user，它有一个 setName 方法用于修改 user 的 name 属性。然后我们使用 jest.spyOn() 创建了一个 Mock 方法 spySetName，并使用 spySetName.mockImplementation() 修改了 setName 方法的行为，使它在执行时会将 name 前加上 'Mock ' 前缀。最后，我们在测试用例中执行了 user.setName('李四') 并通过 expect(user.name).toBe('Mock 李四') 断言其结果为 'Mock 李四'，从而达到 Mock 方法的目的。需要注意的是，在测试用例结束后，我们使用 spySetName.mockRestore() 恢复原方法，避免对其他测试用例产生影响。
Mock 所有方法
Mock 所有方法是指在测试用例中替换整个模块的所有导出方法，并定义预期行为，以实现对模块的 Mock。例如，在测试一个包含多个组件的模块时，我们可能需要 Mock 整个文件，以便模拟多种场景的测试。Jest 也提供了多种方法来 Mock 所有方法，下面是其中常用的两种方法：
1. jest.mock()
jest.mock() 是 Jest 中最常用的 Mock 方法之一，它可以 Mock 整个模块并定义预期行为。例如，下面是一个例子：
// javascriptcn.com 代码示例
// 待测试的模块 a.js
function add(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
export { add, substract };
// 测试用例
jest.mock('./a', () => ({
add: jest.fn().mockReturnValue(3), // Mock add 方法
substract: jest.fn().mockReturnValue(1), // Mock substract 方法
}));
test('模块 a.js 测试', () => {
const a = require('./a'); // 重新 require a.js，获取 Mock 后的模块
expect(a.add(1, 2)).toBe(3); // 执行 Mock 后的 add 方法
expect(a.substract(2, 1)).toBe(1); // 执行 Mock 后的 substract 方法
});在这个例子中，我们定义了一个待测试的模块 a.js，它有两个方法 add 和 substract。然后我们使用 jest.mock() Mock 了整个模块 a.js，并使用 add: jest.fn().mockReturnValue(3) 和 substract: jest.fn().mockReturnValue(1) 来 Mock add 和 substract 方法。最后，我们在测试用例中重新 require 了 a.js 并执行了 add 和 substract 方法，并通过 expect() 断言其执行结果。
需要注意的是，jest.mock() 的第二个参数是一个“factory”函数，它返回的是一个对象，用于 Mock 所有导出的方法。可以使用 mockReturnValue()、mockImplementation() 等函数来定义 Mock 方法的行为，并使用 jest.requireActual() 来获取真实的模块定义。
2. jest.doMock()
jest.doMock() 是一个更加高级的 Mock 方法，它可以 Mock 外部模块的所有导出方法，以及所有子模块的传递方法，以实现更加精细的 Mock。例如，下面是一个例子：
// javascriptcn.com 代码示例
// 待测试的模块 a.js
import { get } from './b';
function add(a, b) {
return get() + a + b;
}
export { add };
// b.js
export function get() {
return 1;
}
// 测试用例
test('模块 a.js 测试', () => {
jest.doMock('./b', () => ({
get: jest.fn().mockReturnValue(2), // Mock 整个模块 b.js
}));
const a = require('./a'); // 重新 require a.js，获取 Mock 后的模块
expect(a.add(1, 2)).toBe(5); // 执行 Mock 后的 add 方法
});在这个例子中，我们定义了一个待测试的模块 a.js，它依赖于另一个模块 b.js。然后我们使用 jest.doMock() Mock 了整个模块 b.js，并使用 get: jest.fn().mockReturnValue(2) 定义了get方法的 Mock 行为。最后，我们在测试用例中重新 require 了 a.js 并执行了 add 方法，并通过 expect() 断言其执行结果。在执行过程中，Jest 会自动将外部模块 b.js 中的 get 方法替换为 Mock 方法，从而实现整个模块的 Mock。
需要注意的是，jest.doMock() 的第二个参数也是一个“factory”函数，但它的执行时机更靠后，只有在测试用例运行时才会被执行。因此，使用 jest.doMock() 可能会带来一定的性能开销，需要谨慎使用。同时，Mock 子模块的传递方法需要注意依赖关系，避免出现意外的运行时错误。
总结
Mock 是前端测试中非常重要的一环，它可以帮助我们在测试过程中模拟各种复杂的数据和场景。Jest 提供了多种 Mock 方法，可以满足不同测试场景的需求。在实际使用中，我们需要深入理解 Mock 的原理和实现方法，并合理运用各种 Mock 工具来提高测试的效率和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bc9c47d4982a6ebda6334