CODEWITHSUNDEEP
vue.jsjestjs
arn-arn
arn-arn

Reputation: 1377

How to mock axios call within a method?

I am trying to mock an axios call within a vuejs method. Is this possible?

Here 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 => {});
        }
    }

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 I looked at the coverage, the system says the callApi is not covered. Any idea on how I can mock the axios call within the function?

Upvotes: 1

Views: 831

Answers (1)

Brian Adams
Brian Adams

Reputation: 45850

Your code calls axios.create so you need to mock that function to return a mock callApi object.

Here is a simplified working example:

code.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);  // <= return the Promise so it can be awaited
}

code.test.js

import { callAxiosMethod } from './code';

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

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

Upvotes: 1

Related Questions