Jest 测试中使用 Axios Mock 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Jest 是一种流行的测试框架，而 Axios 是常用的 HTTP 请求库。Axios 提供了一个方便的方式来处理 HTTP 请求和响应，但在测试中，我们不想要真正地向服务器发起请求。这时候，我们可以使用 Axios Mock，这是一个允许我们在测试中模拟 Axios 请求和响应的库。在本篇文章中，我们将介绍 Jest 测试中使用 Axios Mock 的最佳实践。

安装 Axios Mock

我们可以使用 npm 安装 Axios Mock。首先，我们需要在项目目录下运行以下命令：

npm install axios-mock-adapter --save-dev

这将安装 Axios Mock Adapter 并将其添加到 devDependencies。

创建 Mock

创建 Mock 有两种方式：手动编写 Mock 或使用自动生成的 Mock。手动编写 Mock 具有很高的灵活性，但是在测试大型应用程序时，手动编写 Mock 可能会非常耗时。自动生成的 Mock 能够更快地测试一个大型应用程序，但是它们缺乏灵活性。

在本文中，我们将展示如何手动编写 Mock。以下是 Axios Mock Adapter 的基本用法，具有以下参数：

url: 请求的 URL。
method: 请求方法。
response: 模拟响应。

以下是一个模拟 GET 请求的示例：

// javascriptcn.com 代码示例
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ],
});

在此示例中，我们创建了一个名为 mock 的新 MockAdapter 实例，并为 /users URL 编写了一个简单的模拟响应。

使用 Mock 进行测试

一旦我们编写了 Mock，就可以开始编写我们的测试用例了。以下是如何使用 Jest 和 Axios Mock 测试 HTTP 请求的示例：

// javascriptcn.com 代码示例
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

describe('test API', () => {
  it('fetches data from an API', async () => {
    const mock = new MockAdapter(axios);
    mock.onGet('/api/data').reply(200, {
      data: 'Hello, World!',
    });
    const response = await axios.get('/api/data');
    expect(response.data).toEqual({ data: 'Hello, World!' });
  });
});

在此示例中，我们从 /api/data 发出 GET 请求，并使用 Axios MockAdapter 模拟响应。我们使用 await 等待请求完成，并检查响应是否符合预期。

此外，在测试中我们也可以修改 Mock 的返回值，来测试不同的场景。以下是一个修改 Mock 返回值进行测试的示例：

// javascriptcn.com 代码示例
it('should return an error for invalid inputs', async () => {
  const mock = new MockAdapter(axios);
  mock.onGet('/api/data').reply(config => {
    if (config.params.q === 'undefined') {
      return [404, {}];
    }
    return [200, { data: 'some data' }];
  });
  const response1 = await axios.get('/api/data', { params: { q: 'foo' }});
  expect(response1.status).toBe(200);
  expect(response1.data.data).toBe('some data');
  const response2 = await axios.get('/api/data', { params: { q: undefined }});
  expect(response2.status).toBe(404);
});

在此示例中，我们根据 config.params.q 的值返回不同的 HTTP 状态码和响应体。我们使用 axios.get 来发送请求，并检查返回值是否符合预期。

总结

在本文中，我们介绍了 Jest 测试中 Axios Mock 的最佳实践。我们讨论了如何手动编写 Axios Mock，以及如何使用 Mock 进行测试。Axios Mock 允许我们在测试时模拟实际的请求和响应，从而更好地测试我们的代码。

使用 Axios Mock 进行测试还有其他一些注意事项。例如，我们还需要考虑如何处理异步请求和错误处理。但是在这篇文章中，我们提供了一个基本的步骤来开始使用 Axios Mock 进行测试。

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