Vue, Jest, Axios.create(), and Modularized API Methods. How to Spy? - vue.js

Question

I'm testing a Vue component, that has a method() that calls a Module with Axios, that calls another.
The method inside the component looks like:
// Component.vue
methods: {
myMethod(){
return MyAPI.orders
.exportData(requestData)
.then(() =>{
this.showExportModal();
});
}
...
The MyAPI.js looks like:
export const apiClient = axios.create({
baseURL: `${baseUrl}/api/v2/`,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
const methods = {
orders: {
exportData(payload) {
return apiClient
.post('export',payload)
While this works perfectly fine, I do not find a way to test the component properly without creating an ad hoc mock for it.
I'm trying to use Jest.createMockFromModule but no luck using it this way:
// test.spec.js
const myAPI = jest.createMockFromModule('../services/myAPI');
const wrapper = shallowMount(ExportOrdersButton, {
store,
i18n,
});
[...]
it('should trigger a network request when clicked', async () => {
const button = wrapper.find('button').element;
button.click();
await Vue.nextTick()
expect(myAPI.default.orders.exportData).toHaveBeenCalled()
});
But despite the method is called, the test does not see it:
Expected number of calls: >= 1
Received number of calls: 0

Answer 1

jest.createMockFromModule() doesn't automatically override imports, but jest.mock() does.
Mock the target module (i.e., MyApi.js) with a factory that returns the mock object, and then require it in the test to access the mock:
jest.mock('../services/MyApi', () => ({
orders: {
exportData: jest.fn(() => Promise.resolve())
}
}))
describe('Testing component', () => {
it('click directive', async () => {
const wrapper = shallowMount(ExportOrdersButton)
await wrapper.find('button').trigger('click')
expect(require('../services/MyApi').orders.exportData).toHaveBeenCalled()
})
})