Блог

Я пытаюсь имитировать вызов 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 внутри функции?

Ваш код вызывает, 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!
});