在前端开发中，我们经常需要使用 API 来获取或发送数据。在进行单元测试时，我们需要模拟这些 API 的行为，以确保我们的代码在与实际 API 交互时能够正确地处理数据。这就需要使用 Jest 的模拟功能来模拟这些 API。
前置知识
在本文中，我们假设您已经熟悉 Jest 的基本概念和用法，并且您已经知道如何编写基本的测试用例。如果您不熟悉 Jest，请查看 Jest 的官方文档。
使用 Jest 模拟 API
在 Jest 中，我们可以使用 jest.mock 函数来模拟 API。这个函数接受两个参数：要模拟的模块的路径和一个可选的工厂函数。
如果我们只想模拟一个模块，并且我们不需要控制模拟的行为，我们可以使用以下代码：
jest.mock('api-module');这将会自动将 api-module 模块替换为一个空的模拟对象。
如果我们要控制模拟的行为，我们可以使用工厂函数。这个函数会返回一个对象，该对象将作为模拟对象的实例。我们可以在该对象上设置属性和方法，以模拟实际 API 的行为。
以下是一个示例工厂函数，它将返回一个模拟的 API 对象，该对象具有一个 get 方法，该方法将返回一个 Promise 对象，该 Promise 对象解析为一个包含数据的对象：
const mockApi = {
get: jest.fn(() => Promise.resolve({ data: 'mocked data' })),
};
jest.mock('api-module', () => ({
__esModule: true,
default: () => mockApi,
}));在这个示例中，我们首先创建了一个包含 get 方法的模拟对象 mockApi。我们然后使用 Jest 的 jest.fn 函数来模拟 get 方法的行为。在这里，我们返回一个解析为 { data: 'mocked data' } 的 Promise 对象。
接下来，我们使用 jest.mock 函数来模拟 api-module 模块。我们传递一个工厂函数，该函数返回一个对象，该对象包含一个 default 方法，该方法返回我们刚刚创建的 mockApi 对象。
现在，我们已经成功地模拟了 api-module 模块，并且我们可以在测试用例中使用它。
编写测试用例
现在，我们已经成功地模拟了 API，我们可以编写测试用例来测试我们的代码是否正确处理返回的数据。
以下是一个示例测试用例，它测试了一个使用 api-module 模块的函数 getData。
// javascriptcn.com 代码示例
import getData from 'path/to/getData';
import api from 'api-module';
describe('getData', () => {
beforeEach(() => {
jest.clearAllMocks();
});
test('should call api.get method with correct arguments', async () => {
await getData();
expect(api.get).toHaveBeenCalledTimes(1);
expect(api.get).toHaveBeenCalledWith('/path/to/data');
});
test('should return the correct data', async () => {
const data = await getData();
expect(data).toEqual('mocked data');
});
});在这个示例中，我们首先导入 getData 函数和 api-module 模块。我们使用 Jest 的 describe 函数来组织测试用例，并使用 beforeEach 函数来在每个测试用例之前清除所有模拟的方法和属性。
在第一个测试用例中，我们测试了 getData 函数是否正确地调用了 api.get 方法，并传递了正确的参数。我们使用 Jest 的 expect 函数来断言 api.get 方法是否被调用了一次，并且是否传递了正确的参数。
在第二个测试用例中，我们测试了 getData 函数是否正确地处理了返回的数据。我们首先调用 getData 函数，并使用 Jest 的 expect 函数来断言返回的数据是否与我们预期的数据相等。
总结
在本文中，我们学习了如何在 Jest 测试中模拟 API，并编写了一个测试用例来测试我们的代码是否正确地处理返回的数据。通过使用 Jest 的模拟功能，我们可以确保我们的代码在与实际 API 交互时能够正确地处理数据，并且可以更快地编写测试用例和减少对实际 API 的依赖。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6565c108d2f5e1655def78a3