用Jest测试Axios请求

假设我们有一个简单的异步函数，它调用一些远程数据。我们传入查询和配置对象。要查看可通过此请求配置传递的内容的示例，请参阅Axios文档。在本例中，我的查询只是配置中的url键，例如/user，它可能是一个API端点。此函数仅返回来自axios（端点的实际响应主体）的数据。如果我们无法从端点得到响应，函数将捕获并抛出一个控制台错误。

request.js

export const fetchData = async (query, config
) => {
  try {
    const { data } = await axios.request({
      method: 'get',
      url: encodeURI(query),
      ...config
    });

    return data;
  } catch (e) {
    console.error('Could not fetchData', e);
  }
};

现在让我们创建一个新文件request.spec.js我们要添加两个导入

import mockAxios from 'axios';
import { fetchData } from '../request';

为了测试这一点，我们需要使用Axios的模拟版本，该版本可以方便地从核心库导入。我们现在准备编写测试

  it('should call a fetchData function', done => {
    fetchData('/test', {}).then(response => {
      expect(response).toEqual({
        data: {},
      });
    });
    expect(mockAxios.request).toHaveBeenCalledWith({
      method: 'get',
      url: '/test'
    });
    expect(mockAxios.request).toHaveBeenCalledTimes(1);
    expect(consoleErrorSpy).not.toHaveBeenCalled();
    done();
  });

首先我们用一个测试查询和一个空配置调用then函数，以确保然后测试我们的响应是正确的。现在我们正在测试mockAxios.request是否用我们期望的参数调用了它，是否只调用了一次，是否我们的函数没有抛出错误。最后，我们调用done()回调，它让我们知道异步操作已经完成。