An effective way to simulate an axios call within a method

Question

An effective way to simulate an axios call within a method

I'm attempting to simulate an axios call inside a vuejs method. Can this be achieved?

Below is my vue component (SomeObj):

 methods:{
        callAxiosMethod() { 
          const callApi= axios.create();
          callApi.defaults.timeout = 10000;
          callApi.get(mockedUrl)
          .then(response => {
             console.log('response is ' + response);
          })
          .catch(e => {});
        }
    }

And here is my spec.js

let mockData = {};
beforeEach(() => {
        jest.spyOn(axios, 'get').mockReturnValue(Promise.resolve(mockData));
    });

    let wrapper = shallowMount(SomeObj, {
        stubs: [], localVue, mocks: {
            mockUrl: mockUrl,
            $route: {
                params: { testId: "123" }
            }
        }
    });
    it('is a Vue instance', () => {
        expect(wrapper.isVueInstance()).toBeTruthy();
        axios.get.mockResolvedValue(mockData);
        wrapper.vm.callAxiosMethod();
    })

When reviewing the coverage report, it indicates that the callApi is not covered. Any suggestions on how I can properly mock the axios call within the function?

vue.js jestjs

Answer 1

Answer №1

Your code utilizes axios.create, hence you will need to mock the function in order to return a simulated callApi object.

For further clarity, see the following operational example:

app.js

import * as axios from 'axios';

const mockedUrl = 'http://mock-url';

export const callAxiosMethod = () => {
  const callApi = axios.create();
  callApi.defaults.timeout = 10000;
  return callApi.get(mockedUrl);  // <= ensuring Promise is returned for subsequent awaiting
}

app.test.js

import { callAxiosMethod } from './app';

jest.mock('axios', () => ({
  create: jest.fn().mockReturnValue({
    defaults: {},
    get: jest.fn().mockResolvedValue('mocked data')
  })
}));

test('callAxiosMethod', async () => {  // <= defining the asynchronous test function
  const response = await callAxiosMethod();  // <= await the Promise resolution
  expect(response).toBe('mocked data');  // Test Passed!
});

Answer 2

Your code utilizes axios.create, hence you will need to mock the function in order to return a simulated callApi object.

For further clarity, see the following operational example:

app.js

import * as axios from 'axios';

const mockedUrl = 'http://mock-url';

export const callAxiosMethod = () => {
  const callApi = axios.create();
  callApi.defaults.timeout = 10000;
  return callApi.get(mockedUrl);  // <= ensuring Promise is returned for subsequent awaiting
}

app.test.js

import { callAxiosMethod } from './app';

jest.mock('axios', () => ({
  create: jest.fn().mockReturnValue({
    defaults: {},
    get: jest.fn().mockResolvedValue('mocked data')
  })
}));

test('callAxiosMethod', async () => {  // <= defining the asynchronous test function
  const response = await callAxiosMethod();  // <= await the Promise resolution
  expect(response).toBe('mocked data');  // Test Passed!
});

An effective way to simulate an axios call within a method

Answer №1

Similar questions

What are some methods to manage the timing of sending socket connection requests from the client to the backend server?

Incorporating Vue Component According to URL Parameters Dynamically

Just initiate an API request when the data in the Vuex store is outdated or missing

Unsupported Media Type: 415 Error during MultipartFile Upload

Vue - Troubleshooting why components are not re-rendering after data updates with a method

Toggle button with v-bind in Nativescript Vue

Utilize Vue CLI 3 to enable popups in arcgis API JS

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

Guide on accessing a nested array within a JSON object using JavaScript

The performance problem of calling a method in a Vue 2 v-for loop

I'm having trouble launching the Vue UI after successfully installing the Vue CLI - any ideas why?

What is the best way to set the v-model property to an object that is constantly changing

In a Vue project, classes are not being applied by TailwindCSS

Add the scss file to the vuejs component npm package only if certain conditions specified in the project are met

What is the process for creating a unit test case for a button's onClick event with Jest?

How can you identify when a Vuetify radio button is re-selected?

Server experienced 405 error during production usage, not during local testing

Switching the Vue image on Routerlink's isExactActive feature

What is the reason for a JavaScript comment being inserted into the DOM instead of the Vue component?

Calling components may result in a race condition