Jest 如何测试请求 API，记录和回放 mock 数据

在前端开发中，测试是非常重要的一部分。而对于请求 API 的测试，我们需要使用 Jest 框架来进行单元测试。Jest 是一个非常流行的 JavaScript 测试框架，它提供了丰富的 API，能够帮助我们轻松地编写测试用例。在本文中，我们将介绍 Jest 如何测试请求 API，以及如何记录和回放 mock 数据。

Jest 测试请求 API

在 Jest 中，我们可以使用 fetch 或者 axios 等库来请求 API。我们可以使用 async/await 来处理异步请求。下面是一个使用 axios 请求 API 的例子：

import axios from 'axios';

test('fetch data from API', async () => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
  expect(response.status).toBe(200);
});

在上面的例子中，我们使用 axios 请求了一个 API，并使用 expect 断言来判断请求是否成功。我们使用了 async/await 来等待异步请求的结果。

记录和回放 mock 数据

有时候我们需要测试一些需要登录或者需要特定条件才能触发的 API，这时候我们可以使用 mock 数据来模拟这些情况。在 Jest 中，我们可以使用 jest.fn() 来创建一个 mock 函数，然后使用 mockReturnValue 方法来设置 mock 数据。下面是一个例子：

import axios from 'axios';

jest.mock('axios');

test('fetch data from API with mock data', async () => {
  const mockResponse = {
    data: {
      title: 'mock title',
      body: 'mock body',
    },
    status: 200,
  };
  axios.get.mockReturnValue(mockResponse);

  const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
  expect(response.data.title).toBe('mock title');
});

在上面的例子中，我们使用 jest.mock 来创建一个 axios 的 mock 函数。然后使用 mockReturnValue 方法来设置 mock 数据。在实际请求时，axios.get 将返回我们设置的 mock 数据。

总结

在本文中，我们介绍了 Jest 如何测试请求 API，以及如何记录和回放 mock 数据。使用 Jest 进行单元测试可以帮助我们更好地保证代码的质量和可靠性。希望本文能够对你有所帮助！

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