在前端开发中，测试是非常重要的环节。而 Jest 是一款流行的 JavaScript 测试框架，也是我们常用的工具之一。在使用 Jest 进行测试时，我们通常需要使用 mock 和 stub 来模拟测试环境。但是，很多人在使用中并不知道如何准确地区分 mock 和 stub，因此本文将详细介绍 Jest 中如何辨别 mock 和 stub，以及它们的使用和指导意义。
mock 和 stub 是什么？
简单来说，mock 和 stub 都是一种在测试时使用的技术。它们的用途很相似，但实现方式却不同。在 Jest 中，使用 jest.fn() 函数可以创建一个 mock 或 stub。
Mock: mock 是一种测试技术，它用于模拟由函数、对象或类返回的数据或行为。mock 被用来验证代码是否按预期执行，而不是实际执行。
Stub: stub 是一种测试技术，它用于替换代码中的一个函数或方法的实现。 stub 被用来测试代码中对其他代码的调用是否按预期执行。
如何辨别 mock 和 stub？
虽然 mock 和 stub 都可以用于测试，但它们的概念和用途却略有不同。在 Jest 中，我们可以根据以下几个方面来辨别它们：
1.实现方式
mock 和 stub 的实现方式不同。mock 可以模拟函数、对象或类的返回值，而 stub 则是替换对象或方法的实现。
2.使用方法
mock 和 stub 在使用上也有区别。mock 通常用于模拟测试中预期的返回值，而 stub 则是用来控制代码执行路径，以满足测试用例的需要。
3.测试范围
mock 和 stub 在测试的范围上也有区别。mock 通常被用于测试被测代码本身，而 stub 则是用来测试与被测代码交互的其他代码。
mock 和 stub 的应用
使用 mock 模拟函数的返回值
用 Jest 创建一个 mock，可以使用以下方法：
const mockFunc = jest.fn();
使用 mock 函数模拟某个函数的返回值：
const mockFunc = jest.fn(() => {
return 'hello world';
});
expect(mockFunc()).toBe('hello world');
expect(mockFunc).toHaveBeenCalled();使用 mock 模拟对象的行为
使用 Jest 来创建一个 mock 对象：
const mockObject = {
getName: jest.fn(() => 'Tom'),
setName: jest.fn(),
};测对象方法：
mockObject.getName();
expect(mockObject.getName).toHaveBeenCalled();
mockObject.setName('Jerry');
expect(mockObject.setName).toHaveBeenCalledWith('Jerry');使用 stub 控制代码执行流程
使用 Jest 创建一个 stub：
const stubFunc = jest.fn();
stubFunc.mockReturnValue('hello world');测试代码中调用的函数：
function doSomething() {
return stubFunc();
}
expect(doSomething()).toBe('hello world');
expect(stubFunc).toHaveBeenCalled();总结
在 Jest 中，mock 和 stub 是两个重要的测试技术。无论是 mock 还是 stub，它们都可以被用来测试控制代码的输出和流程，以确保代码的准确性和稳定性。对于前端工程师而言，熟练掌握 Jest 中的 mock 和 stub 使用方法，将会对我们的前端测试工作有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b1d0a968c7c53b0a8a6cb