使用jest测试axios拦截器

Question

我正在使用axios拦截器将授权令牌添加到它的头中。拦截器工作正常。

//api.js
import { getAccessToken } from "./utils";

const apiInstance = axios.create();

apiInstance.interceptors.request.use((configIns) => {

  const token = getAccessToken();
  configIns.headers.Authorization = token ? `Bearer ${token}` : "";
  return configIns;

});

export { apiInstance };

下面是我用来测试拦截器的测试文件。

// api.test.js

import { apiInstance } from "./api"
import {getAccessToken} from "./utils";

describe("request interceptor", () => {
    it("API request should add authorization token to header", () => {

      const getAccessToken = jest.fn(getAccessToken);
      getAccessTokenMock.mockReturnValue("token");

      const result = apiInstance.interceptors.request.handlers[0].fulfilled({ headers: {} });

      expect(getAccessTokenMock.mock.calls.length).toBe(1);
      expect(result.headers).toHaveProperty("Authorization");
    });
  });

然而，由于某种原因，getAccessToken函数在拦截器中没有被模仿。测试失败。

Answer 1

这不是Jest中mock的工作方式。通过调用(我假设变量应该是getAccessTokenMock，而不是getAccessToken)：

const getAccessTokenMock = jest.fn(getAccessToken);
getAccessTokenMock.mockReturnValue("token");

您要做的是:创建新的本地模拟，当它被调用时，将调用您的getAccessToken函数。然后模拟返回值。但是，您的getAccessTokenMock永远不会被调用，因为它与您的实现中的实例不同！

您需要做的是模拟./utils文件中的实际函数getAccessToken。例如，可以这样做：

import { apiInstance } from "./api"
import {getAccessToken} from "./utils";

// Mock here:
jest.mock('./utils', () => ({
  getAccessToken: jest.fn(() => 'token')
});

describe("request interceptor", () => {
  it("API request should add authorization token to header", () => {
    const result = apiInstance.interceptors.request.handlers[0].fulfilled({ headers: {} });

    expect(getAccessToken.mock.calls.length).toBe(1);
    expect(result.headers).toHaveProperty("Authorization");
  });
});

这里发生的情况是，当加载文件时，jest.mock将首先运行，并用模拟替换您的getAccessToken实现-然后可以从实现和测试访问它(作为相同的实例)，这意味着您可以验证它是否已被调用。

请找到更多关于mocks here或here的信息。或者，您也可以使用spyOn来实现类似的结果(这样您就不需要jest.mock了，但是您必须在不进行解构的情况下导入getAccessToken函数)。