typescript - Hvordan mocke AxiosInstance?


Jeg har axios med følgende HttpClient-klasse

export default class HttpClient {
  constructor(baseUrl: string) {
    const axiosInstance = axios.create({
      validateStatus(status: number) {
        return status === 200 || status === 201;
      },
    });

    axiosInstance.interceptors.request.use((config) => {
      if (AuthUtil.getAuthHeader()) config.headers = AuthUtil.getAuthHeader();
      return config;
    });

    return new Proxy(this, {
      get(_, prop) {
        return (url: string, ...args: any) => {
          url = baseUrl + url;
          return Reflect.get(axiosInstance, prop)(url, ...args);
        };
      },
    });
  }

  get<T = any, R = AxiosResponse<T>>(_url: string, _config?: AxiosRequestConfig): Promise<R> {
    return Promise.resolve(null);
  }
.....
}

Her er tjenesten som bruker HttpClient

export default class UserManagementServiceImpl implements UserManagementService {
  private client = new HttpClient('/api/user');

  async getUser(): Promise<User> {
    const res = await this.client.get('/user');
    return res.data;
  }

Jeg tester tjenesten som følger. Her kaller jeg ikke userService.getUser direkte, men bare for testing har jeg laget dette.

describe('User actions', () => {
  test('creates GET_TERMS_SUCCESS', async () => {
    jest.mock('axios', () => {
      return {
        create: jest.fn().mockReturnValue({
          interceptors: {
            request: { use: jest.fn(), eject: jest.fn() },
            response: { use: jest.fn(), eject: jest.fn() },
          },

          get: jest.fn().mockReturnValue({ data: user }),
        }),
      };
    });

    const user = await userService.getUser();
  });
});

// ERROR:
/*
Error: Error: connect ECONNREFUSED 127.0.0.1:80
*/

Jeg har prøvd flere andre løsninger som er listet her på Stack Overflow, men det ser ikke ut til å fungere. Hvordan bør dette gjøres?

Svar #1

Oppdatering [2022-mai-18]

Jeg tror jeg endelig har funnet ut hvordan jeg kan kombinere axios-mock-adapter for å mocke AxiosInstance-er opprettet av axios.create().

Det vi gjør i testing er å tilordne en AxiosStatic-instans som returverdi av axios.create, som er tilgjengelig lokalt. Så vi mocker axios som vanlig ved å bruke axios-mock-adapter.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import UserManagementServiceImpl from '../../../services/impl/UserManagementServiceImpl';

jest.mock('axios', () => {
  return {
    ...(jest.requireActual('axios') as object),
    create: jest.fn().mockReturnValue(jest.requireActual('axios')),
  };
});

const mockAdapter = new MockAdapter(axios);

test('hello', async () => {
  const userService = new UserManagementServiceImpl();

  mockAdapter.onGet('/api/user/user').reply(200, { name: 'name' });
  const r = (await userService.getUser()) as any;
  expect(r.name).toBe('name');
});

Gammelt svar

jest.mock() bør tilsynelatende alltid være utenfor testens livssyklusmetoder.

jest.mock('axios', () => {
  return {
    create: jest.fn().mockReturnValue({
      interceptors: {
        request: { use: jest.fn(), eject: jest.fn() },
        response: { use: jest.fn(), eject: jest.fn() },
      },

      get: jest.fn().mockReturnValue({ data: user }),
    }),
  };
});

describe('User actions', () => {
  test('test', async () => {
    const user = await userService.getUser();
  });
});

Du kan også lage mock og definere funksjoner senere også

jest.mock('axios')

describe('User actions', () => {
  test('test', async () => {
    (axios.create as jest.Mock<any, any>).mockReturnValue({
      interceptors: {
        request: { use: jest.fn(), eject: jest.fn() },
        response: { use: jest.fn(), eject: jest.fn() },
      },

      get: jest.fn().mockReturnValue({ data: { name: 'name' } }),
    });

    const user = await userService.getUser();
  });
});

Relaterte artikler