reactjs - 具有重复参数的 Axios 模拟适配器

Question

我在反应应用程序中使用模拟适配器进行测试，其中一个看起来像这样：

http://endpoint.com/api/entities?id=123&select=labels&select=versions&labelsLang=en

需要注意的重要部分是select参数在那里两次。

其中一个测试是用另一种语言呈现，所以我们设置了两个模拟端点来反映这一点，但是我似乎找不到正确模拟重复参数的方法。我只是继续获得第一个结果。

模拟端点的代码是这样的：

const mockApiClient = axios.create({ baseURL: "http://localhost" });
const mock = new MockAdapter(mockApiClient);

const params1 = new URLSearchParams();
params1.append("id", "123");
params1.append("select", "labels");
params1.append("select", "versions");
params1.set("labelsLang", "en");
mock
  .onGet("/entities", {
    asymmetricMatch: function(actual: any) {
      return actual.params.toString() === params1.toString();
    },
  })
  .reply(200, getCompanyResponse);

const params2 = new URLSearchParams();
params2.append("id", "123");
params2.append("select", "labels");
params2.append("select", "versions");
params2.set("labelsLang", "de");
mock
  .onGet("/entities", {
    asymmetricMatch: function(actual: any) {
      return actual.params.toString() === params2.toString();
    },
  })
  .reply(200, getCompanyResponseDE);

我知道这很混乱，我只想了解如何正确执行此操作。

每当我尝试在对象中指定特定参数时，它都会抱怨您不能有重复键。

（即。 { params:{select:'labels', select:'versions} }）

标签： reactjsunit-testingaxios

Answer 1

解决了。

这是如何完成的：

const mockApiClient = axios.create({ baseURL: "http://localhost" });
const mock = new MockAdapter(mockApiClient);

const params1 = {
  "id": "123",
  select: ["labels", "versions"],
  "labelsLang": "en",
};
mock
  .onGet("/entities", {
    params: {
      asymmetricMatch: function(actual: any) {
        actual.sort(); // Important, as without it the order of params would affect the result
        return actual.toString() === toURLSearchParams(params1).toString();
      },
    },
  })
  .reply(200, getCompanyResponse);


export const toURLSearchParams = (params: {[key: string]: string|string[]}, sort:boolean = true):URLSearchParams => {
  if(params instanceof URLSearchParams) return params

  const searchParams = new URLSearchParams();
  for(const key in params){
    const value = params[key];
    if(Array.isArray(value)){
      value.forEach((eachValue) => {
        searchParams.append(key, eachValue)
      })
    } else {
      searchParams.append(key,value)
    }
  }
  if(sort) searchParams.sort() // Likewise here. 
  return searchParams;
}