Как смоделировать вызов axios внутри метода?

Question

Я пытаюсь смоделировать вызов axios в методе vuejs.Возможно ли это?

Вот мой компонент vue (SomeObj):

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

Вот мой 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();
    })

Когда я посмотрел на покрытие,система говорит, что callApi не покрывается.Любая идея о том, как я могу издеваться над вызовом axios внутри функции?

Answer 1

Ваш код вызывает axios.create, поэтому вам нужно смоделировать эту функцию, чтобы вернуть фиктивный callApi объект.

Вот упрощенный рабочий пример:

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!
});