_axios.default.post.mockImplementationOnce is not a function VuesJS

Question

I try to test my API Call. I'm using:

1. VueJS
2. Jest
3. Axios

I received the error: "_axios.default.post.mockImplementationOnce is not a function" when I run this test:

import axios from 'axios'

let url = ''
let body = {}

jest.mock("axios", () => ({
  //__esModule: true,
  post: (_url, _body) => { 
    return new Promise((resolve) => {
      url = _url
      body = _body
      resolve(true)
    })
  }
}))

//axios.mockResolvedValue();

describe('getGameList', () => {
  test('Success: should return the game list of the user and update gameList in the store', async () => {
    
    const response = {
      data: [ 
        { id:1, name:"game_name1" },
        { id:2, name:"game_name2" }
      ]
    };

    //axios.post.mockResolvedValue(response);
    //OR
    axios.post.mockImplementationOnce(() => Promise.resolve(response));

    expect(url).toBe("api/game_list_of_user")
    expect(body).toStrictEqual({"user_id": 1})

  });

});

Any clue ?

Edit 1: Following the help of tmhao2005:

jest.mock("axios", () => ({
  post: jest.fn((_url, _body) => { 
      url = _url
      body = _body
      return Promise.resolve();
    }),
  create: jest.fn(function () {
      return this;
  })
}))

describe('getGameList', () => {
  test('Success: should return the game list of the user and update gameList in the store', async () => {
    
    const url = "api/game_list_of_user";
    const body = {
      "user_id": 1
    };   
    const response = {
      data: [ 
        { id:1, name:"game_name1" },
        { id:2, name:"game_name2" }
      ]
    };
    axios.post.mockResolvedValue(response); //OR axios.post.mockImplementationOnce(() => Promise.resolve(response));

    expect(url).toBe("api/game_list_of_user")
    expect(body).toStrictEqual({"user_id": 1})

    expect(axios.post).toHaveBeenCalledTimes(1);

  });

});

But I still have that problem:

It looks like my mock axios is not called. the toHaveBeenCalledTimes method is the correct method to call ?

Edit 2: I called my action and try to mock my context.

let url = ''
let body = {}

jest.mock("axios", () => ({
  post: jest.fn((_url, _body) => { 
    return new Promise((resolve) => {
      url = _url
      body = _body
      resolve(true)
    })
  })
}))

//https://medium.com/techfides/a-beginner-friendly-guide-to-unit-testing-the-vue-js-application-28fc049d0c78
//https://www.robinwieruch.de/axios-jest
//https://lmiller1990.github.io/vue-testing-handbook/vuex-actions.html#testing-actions
describe('getGameList', () => {
  test('Success: should return the game list of the user and update gameList in the store', async () => {
    //const commit = jest.fn()
    const MockContext = jest.fn(() => {
      let context= {
        state: {
          user: {
            id:1
          }
        }
      }
      return context
    });
    const response = {
      data: [ 
        { id:1, name:"game_name1" },
        { id:2, name:"game_name2" }
      ]
    };

    axios.post.mockResolvedValue(response); //OR axios.post.mockImplementationOnce(() => Promise.resolve(response));

    await actions.getGameList(axios.post, MockContext)
    expect(url).toBe("api/game_list_of_user")
    expect(body).toStrictEqual({"user_id": 1})

    expect(axios.post).toHaveBeenCalledTimes(1)
    //expect(commit).toHaveBeenCalledWith(mutations.UpdateGameList, true)
  });

  test('Error: an error occurred', () => {
    const errorMessage = 'Error';
    axios.post.mockImplementationOnce(() =>
      Promise.reject(new Error(errorMessage))
    );
  });

});

I have this error now:

Answer 1

I found the solution:

import actions from '@/store/actions'
import mutations from '@/store/mutations'
import state from '@/store/state'
import store from '@/store'
import axios from 'axios'

let url = ''
let body = {}

jest.mock("axios", () => ({
  post: jest.fn((_url, _body) => { 
    return new Promise((resolve) => {
      url = _url
      body = _body
      resolve(true)
    })
  })
}))

//https://medium.com/techfides/a-beginner-friendly-guide-to-unit-testing-the-vue-js-application-28fc049d0c78
//https://www.robinwieruch.de/axios-jest
//https://lmiller1990.github.io/vue-testing-handbook/vuex-actions.html#testing-actions
describe('getGameList', () => {
  test('Success: should return the game list of the user and update gameList in the store', async () => {
    const context= {
      state: {
        user: {
          id:1
        }
      },
      commit: jest.fn()
    }
    const response = {
      data: [ 
        { id:1, name:"game_name1" },
        { id:2, name:"game_name2" }
      ]
    };

    axios.post.mockResolvedValue(response) //OR axios.post.mockImplementationOnce(() => Promise.resolve(response));
    await actions.getGameList(context)
    expect(axios.post).toHaveBeenCalledWith("api/game_list_of_user",{"user_id":1});
    expect(axios.post).toHaveBeenCalledTimes(1)
    expect(context.commit).toHaveBeenCalledWith("UpdateGameList", response.data)

  });

  test('Error: an error occurred', () => {
    const errorMessage = 'Error';
    axios.post.mockImplementationOnce(() =>
      Promise.reject(new Error(errorMessage))
    );
  });

});