Jest 测试中如何 mock API 请求-JavaScript中文网-JavaScript教程资源分享门户

在进行前端测试时，我们常常需要模拟API请求并获取相应的数据来进行测试。为解决这一问题，Jest提供了一种mock API请求的方法。本文将介绍使用Jest进行mock API请求的方法，希望能够帮助读者更好地进行前端测试。

为什么需要Mock API请求？

在进行前端测试时，我们经常会需要模拟API请求，获取相应的数据来进行测试。一方面，我们需要测试代码在不同数据下的表现，同时利用mock可以在测试环境中模拟出现各种错误，以便快速发现和解决问题。另一方面，实际API请求可能由于网络环境等因素耗费较长时间，通过mock可以快速获取到数据，提高测试效率。

Jest如何Mock API请求

基本使用

Jest提供了一种mock API请求的方法，可以使用Jest.fn()来模拟请求函数。例如：

const fetchData = jest.fn(() => Promise.resolve("data"));

这样，我们就定义了一个名为fetchData的mock函数，当被调用时，它将返回一个Promise对象并resolve指定的数据。

模拟请求

在程序中使用mock函数时，我们可以通过jest.mock()来模拟请求。例如：

// www.javascriptcn.com code example
import fetchData from './fetchData';

jest.mock('./fetchData');

test('测试fetchData函数', () => {
  fetchData('/api/data').then(data => {
    expect(data).toBe('mock data');
  });
});

这里我们将jest.mock()传入要模拟的模块路径，这里是‘./fetchData’。这样，在测试中调用fetchData时就会使用我们自定义的mock函数，而不是真实的函数。

模拟异步请求

在下面的例子中，我们将模拟一个异步API请求。我们通过使用setTimeout()函数来模拟一个耗时的异步请求，并且使用Promise对象来封装返回数据。

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: 'mock data' });
    }, 1000);
  });
}

下面是我们如何使用Jest和mock函数来测试异步请求：

import fetchData from './fetchData';

test('测试异步函数fetchData', () => {
  return fetchData().then(data => {
    expect(data).toEqual({ data: 'mock data' });
  });
});

这里我们使用了Jest的asynchronous testing的功能来测试经过了一秒后返回的结果是否符合我们的预期。

模拟错误

mock函数不仅可以节省测试时间，还可以让我们更方便地测试代码的错误处理。例如：

function fetchData() {
  return fetch('/api/data').then(response => {
    if(!response.ok){
        throw new Error('请求错误');
    }
    return response.json();
  });
}

这会返回一个包含错误消息的Promise对象。但是我们如何测试出现错误时的代码呢？

import fetchData from './fetchData';

test('测试fetchData函数', () => {
  expect.assertions(1); // 断言要求代码中必须有一个错误

  return fetchData('/api/data').catch(e => expect(e).toMatch('请求错误'));
});

这里使用Jest的expect断言判断出现了一个错误，并使用toMatch()模拟该错误消息。

小结

在本文中，我们介绍了使用Jest进行mock API请求的方法，这不仅可以节省测试时间，还可以更方便地测试代码的错误处理。对于大型前端项目，身为前端开发工程师的您一定需要掌握这一技巧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d017fbe46428fe9ecada6d

Jest 测试中如何 mock API 请求