Axios 请求的头部测试

Question

我正在使用Mocha + Chai以及axios-mock-adapter来测试我的axios请求。它工作得很好，但我不知道如何通过axios-mock-adapter测试axios的头信息，并确保Authorization和Content-type是正确的！

export const uploadFile = (token: string, fileName: string, file: Buffer): Promise<string> => {
  return new Promise((resolve, reject): void => {
    const uploadFileURL = `xxxxx.com`;
    axios
      .put(uploadFileURL, file, {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-type": "application/x-www-form-urlencoded",
        },
      })
      .then((response): void => {
        resolve(response.data.id);
      })
      .catch((error: Error): void => {
        reject(error.message);
      });
  });
};

这是我的测试函数

  describe("uploadFile", (): void => {
    let mockAxios: MockAdapter;
    beforeEach((): void => {
      mockAxios = new MockAdapter(axios);
    });

    afterEach((): void => {
      mockAxios.reset();
    });

    it("should return item's id", (done): void => {
      const fileName: string = faker.system.fileName();
      const token: string = faker.random.words();
      const file: Buffer = Buffer.from(faker.random.words());
      const expectedResult = {
        id: faker.random.uuid(),
      };
      mockAxios.onPut(`xxxxx.com`).reply(200, expectedResult, {
        Authorization: `Bearer ${token}`,
        "Content-type": "application/x-www-form-urlencoded",
      });

      uploadFile(token, fileName, file)
        .then((actualResult: string): void => {
          // I want to test my header of my requests
          expect(actualResult).to.equal(expectedResult.id);
          done(); // done make sure we know when we run the test
        })
        .catch(done);
    });
  });

如果有人知道如何编写正确的标题请求测试，请帮助我。提前感谢！

- Tran B. V. Son

Answer 1

到目前为止，唯一的方法是在 .reply 中访问请求头，并在此处进行验证：

mockAxios.onPut(`xxxxx.com`).reply((config) => {
  expect(config.headers."Content-Type").toEqual("What do you expect here");
  return [200, expectedResult, {
    Authorization: `Bearer ${token}`,
    "Content-type": "application/x-www-form-urlencoded",
  }];
});

事实上，我认为它也可以以声明性方式实现：

mockAxios.onPut(`xxxxx.com`, undefined, { 
  expectedHeader1: "value1", 
  expectedHeader2: "value2"}
).reply(200, expectedResult);

如果请求头与期望不符，它就会抛出异常而不是返回模拟响应。

但是当前的实现方式并非如此。

原因： axios-mock-adapter 使用 deepEqual 进行这种过滤。所以我们需要指定所有标头（包括 axios 自己添加的，如 Accept），而不仅仅是一些必需的标头（我们正在关注的）。因此，代码会变得难以阅读。

我已在他们的存储库中提交了#219。如果没有特别原因意外，这个问题可能会在未来得到解决。

- skyboyer

---

谢谢你的帮助。但我认为我们不需要模拟“headers”，只需返回[200，expectedResult]，因为在uploadFile中，我们同时使用了授权和“Content-type”。但无论如何，回答得很好！ - Tran B. V. Son

@TranB.V.Son 实际上我已经复制了你的代码示例 :) 因为我无法知道 then 链中是否有什么依赖于响应中存在的标头。但是当然，如果你不需要那个，你就不需要它。 - skyboyer

Answer 2

@skyboyer提到的声明式方法可以与objectContaining一起使用。

mockAxios.onPut(
  `xxxxx.com`,
  undefined,
  expect.objectContaining({ expectedHeader1: "value1", expectedHeader2: "value2"})
).reply(200, expectedResult);

- Michal Čizmazia