如何在 Jest 中通过 Mock 模拟异步函数？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要测试异步函数。而在 Jest 测试框架中，通过 Mock 来模拟异步函数是一种常见的测试方法。本文将详细介绍如何在 Jest 中通过 Mock 模拟异步函数，以及如何在测试中使用这些 Mock 函数。

为什么需要 Mock 异步函数？

在测试中，我们需要对异步函数进行测试。但是，由于异步函数的执行时间不确定，我们无法在测试中直接调用异步函数并进行断言。此时，我们需要使用 Mock 来模拟异步函数的行为，以便在测试中进行断言。

如何使用 Jest Mock 异步函数？

在 Jest 中，我们可以使用 jest.fn() 来创建 Mock 函数。Mock 函数可以模拟任何函数的行为，包括异步函数。下面是一个简单的例子：

// javascriptcn.com 代码示例
// 异步函数
function fetchData(callback) {
  setTimeout(() => {
    callback('data');
  }, 1000);
}

// 测试用例
test('fetchData should return data', () => {
  const callback = jest.fn();
  fetchData(callback);
  expect(callback).toHaveBeenCalled();
  expect(callback).toHaveBeenCalledWith('data');
});

在上面的例子中，我们定义了一个异步函数 fetchData，它接受一个回调函数作为参数，并在 1 秒后调用回调函数。在测试用例中，我们使用 jest.fn() 创建了一个 Mock 函数 callback。然后，我们调用 fetchData 函数，并断言 callback 函数已经被调用，并且传入了 'data' 参数。

如何 Mock 异步函数的返回值？

在实际开发中，异步函数的返回值通常是从后端 API 获取的数据。为了测试异步函数的行为，我们需要 Mock 后端 API 并模拟返回值。在 Jest 中，我们可以使用 jest.mock() 来 Mock 后端 API。

下面是一个例子：

// javascriptcn.com 代码示例
// 异步函数
import axios from 'axios';

async function fetchData() {
  const response = await axios.get('/data');
  return response.data;
}

// 测试用例
jest.mock('axios');

test('fetchData should return data', async () => {
  const data = 'data';
  axios.get.mockResolvedValue({ data });
  const result = await fetchData();
  expect(result).toBe(data);
});

在上面的例子中，我们定义了一个异步函数 fetchData，它使用了 axios 库来获取数据。在测试用例中，我们使用 jest.mock() 来 Mock axios 库，并使用 mockResolvedValue() 来模拟返回值。然后，我们调用 fetchData 函数，并断言返回值与模拟的值相同。

如何使用 Mock 函数的返回值？

在测试中，我们通常需要使用 Mock 函数的返回值来进行断言。在 Jest 中，我们可以使用 mockReturnValue() 或 mockResolvedValue() 来设置 Mock 函数的返回值。

下面是一个例子：

// javascriptcn.com 代码示例
// 异步函数
function fetchData(callback) {
  setTimeout(() => {
    callback('data');
  }, 1000);
}

// 测试用例
test('fetchData should return data', () => {
  const callback = jest.fn().mockReturnValue('data');
  fetchData(callback);
  expect(callback).toHaveBeenCalled();
  expect(callback).toHaveReturnedWith('data');
});

在上面的例子中，我们使用 jest.fn().mockReturnValue() 来创建 Mock 函数 callback 并设置返回值。然后，我们调用 fetchData 函数，并断言 callback 函数已经被调用，并且返回值为 'data'。

总结

在 Jest 中，使用 Mock 来模拟异步函数的行为是一种常见的测试方法。在本文中，我们介绍了如何使用 jest.fn() 创建 Mock 函数，如何使用 jest.mock() Mock 后端 API，以及如何使用 mockReturnValue() 或 mockResolvedValue() 设置 Mock 函数的返回值。希望本文可以帮助你更好地理解 Jest 测试框架，并在实际开发中使用 Mock 函数来测试异步函数。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583ec96d2f5e1655deb8674