javascript - Unable to mock axios call in Jest - Stack Overflow

admin管理员组

文章数量:1336656

It seems mocking is not working for me via axios as it seems to make acrtual API calls ( visible because I am getting 401 status code when running jest test ) I am not sure why am I not able to mock axios.Can anyone point out the mistake I am making?

index.test.ts

describe("positeScore()", () => {

    it("Mock Fetch API for Composite Score Response", async () => {
        
        const mock = jest.spyOn(axios, "post");
        mock.mockReturnValueOnce(mockResponse);
        const response = await dateFilter(platform);
        expect(mock).toHaveBeenCalledTimes(1);
        expect(response).toEqual(mockFetchCompositeScoreResponse);
    });
});

index.ts

export const dateFilters = async (platform) => {
    const dates = await fetchWrapper(
        platform.toLowerCase().concat("DateFilters"),
        platform,
        {}
    );
    return dates;
};


export async function fetchWrapper(
    queryName: string,
    platform: string,
    queryParams?: {}
) {
   
    const headers = {
        Accept: "application/json",
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
     
    };
    const config: AxiosRequestConfig = {
        method: "post",
        url,
        headers,
        data: {
            db: dbName,
            csl: queryParams
                ? substituteQueryParameters(queries[queryName], queryParams)
                : queries[queryName],
        },
    };

    return axios(config);
}

It seems mocking is not working for me via axios as it seems to make acrtual API calls ( visible because I am getting 401 status code when running jest test ) I am not sure why am I not able to mock axios.Can anyone point out the mistake I am making?

index.test.ts

describe("positeScore()", () => {

    it("Mock Fetch API for Composite Score Response", async () => {
        
        const mock = jest.spyOn(axios, "post");
        mock.mockReturnValueOnce(mockResponse);
        const response = await dateFilter(platform);
        expect(mock).toHaveBeenCalledTimes(1);
        expect(response).toEqual(mockFetchCompositeScoreResponse);
    });
});

index.ts

export const dateFilters = async (platform) => {
    const dates = await fetchWrapper(
        platform.toLowerCase().concat("DateFilters"),
        platform,
        {}
    );
    return dates;
};


export async function fetchWrapper(
    queryName: string,
    platform: string,
    queryParams?: {}
) {
   
    const headers = {
        Accept: "application/json",
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
     
    };
    const config: AxiosRequestConfig = {
        method: "post",
        url,
        headers,
        data: {
            db: dbName,
            csl: queryParams
                ? substituteQueryParameters(queries[queryName], queryParams)
                : queries[queryName],
        },
    };

    return axios(config);
}

• javascript
• reactjs
• typescript
• jestjs
• mocking

Share Improve this question Follow edited Mar 4, 2022 at 16:46 etotientz asked Mar 4, 2022 at 12:20 etotientzetotientz 41411 gold badge66 silver badges1919 bronze badges 2

• const mock = jest.spyOn(axios, "post"); isn't going to mock the actual import you'll need to mock the library – beautifulcoder Commented Mar 4, 2022 at 17:21
• How can I do that? I just use axios from node modules by importing axios from "axios" in every file – etotientz Commented Mar 5, 2022 at 4:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You are using axios function, not axios.post() method. So you should mock axios function rather than axios.post(). jest.mock() is the choice.

E.g.

index.ts:

import axios, { AxiosRequestConfig } from 'axios';

export const dateFilters = async (platform) => {
  const dates = await fetchWrapper(platform.toLowerCase().concat('DateFilters'), platform, {});
  return dates;
};

export async function fetchWrapper(queryName: string, platform: string, queryParams?: {}) {
  const token = '123';
  const url = 'http://localhost:3000/api';
  const dbName = 'test';

  const headers = {
    Accept: 'application/json',
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  };
  const config: AxiosRequestConfig = {
    method: 'post',
    url,
    headers,
    data: {
      db: dbName,
    },
  };

  return axios(config);
}

index.test.ts:

import axios, { AxiosResponse } from 'axios';
import { dateFilters } from '.';

jest.mock('axios');

const mAxios = axios as jest.MockedFunction<typeof axios>;

describe('71351319', () => {
  it('Mock Fetch API for Composite Score Response', async () => {
    const mockResponse = { data: {}, status: 200, statusText: 'ok' } as AxiosResponse;
    mAxios.mockResolvedValue(mockResponse);
    const response = await dateFilters('DateFilters');
    expect(mAxios).toHaveBeenCalledTimes(1);
    expect(response).toEqual({ data: {}, status: 200, statusText: 'ok' });
  });
});

package versions:

"axios": "^0.21.1",
"jest": "^26.6.3",

For anyone looking into mocking Axios, this may help!

https://www.npmjs./package/jest-mock-axios

It should massively simplify the mocking process.

本文标签： javascriptUnable to mock axios call in JestStack Overflow