使用笑话模拟 axios 请求

Question

I tried following:

jest.mock('axios', () => jest.fn(() => Promise.resolve({ data: testData })));

also tried adding __mocks__/axios.ts :

export default {
    default: jest.fn(),
    request: jest.fn(),
};

but it returns:

 TypeError: Cannot read property 'request' of undefined

       7 |     const CLIENT_ROUTER_REQUIRED_HEADER = { 'Content-Type': 'application/json' };
       8 | 
    >  9 |     axiosRetry(axios, { retries: 3 });
         |               ^
      10 | 
      11 |     const responseData = axios({
      12 |         baseURL: baseUrl ? baseUrl : '',

AxiosService.ts

import axios, { AxiosResponse } from 'axios';
import axiosRetry from 'axios-retry';

export const axiosRequest = (data: object, baseUrl?: string): Object => {
    const CLIENT_ROUTER_END_POINT = '/client-router';
    const CLIENT_ROUTER_HTTP_METHOD = 'POST';
    const CLIENT_ROUTER_REQUIRED_HEADER = { 'Content-Type': 'application/json' };

    axiosRetry(axios, { retries: 3 });

    const responseData = axios({
        baseURL: baseUrl ? baseUrl : '',
        url: CLIENT_ROUTER_END_POINT,
        method: CLIENT_ROUTER_HTTP_METHOD,
        headers: CLIENT_ROUTER_REQUIRED_HEADER,
        data: data,
    })
        .then(function (response: AxiosResponse) {
            return response.data;
        })
        .catch((e) => {
            return JSON.stringify(e);
        });
    return responseData;
};

index.ts

import { axiosRequest } from './AxiosService';

export const retrieveDataFromServer = async (
    httpMethod: string,
    gatewayPath: string,
    requestParameters: object,
    baseUrl?: string
): Promise<Object> => {
    const data = {
        httpMethod: httpMethod,
        gatewayPath: gatewayPath,
        requestParameters: requestParameters,
    };

    const responseData = axiosRequest(data, baseUrl);

    return responseData;
};

index.test.ts

import { retrieveDataFromServer } from '../src';

describe('Frontend Client Router React Component', () => {
    test('Retrieve data from job-search endpoint', async () => {
        // The purpose of this test is to show an example on how to use retrieveDataFromServer()
        const data = {
            query: 'strawberry',
            //...other data
        };

        const testData = {
            responseBody:
                '["1", "2", "3"]',
            responseCode: 200,
        };

       jest.mock('axios', () => jest.fn(() => Promise.resolve({ data: testData })));

        expect(
            await retrieveDataFromServer(
                'GET',
                '/search',
                data,
                'http://localhost:8881/'
            )
        ).toMatchObject(testData);
    });
});

Answer 1

I ended up adding:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

test('Retrieve data from autocomplete endpoint', async () => {
        const data: AutocompleteData = {
            query: 'strawberry',
        };
        const testData = [
            'strawberry',
        ];
    mock.onPost().replyOnce(200, {
        testData,
    });

    await expect(autocomplete(AutocompleteType.where, data)).resolves.toEqual({
        testData: testData,
    });
}

to my test code.