Я тестирую компонент Vue, у которого есть method(), который вызывает модуль с Axios, который вызывает другой.
Метод внутри компонента выглядит так:
// Component.vue
methods: {
myMethod(){
return MyAPI.orders
.exportData(requestData)
.then(() =>{
this.showExportModal();
});
}
...
MyAPI.js выглядит так:
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)
Хотя это прекрасно работает, я не нашел способа правильно протестировать компонент, не создавая для него специальный макет.
Я пытаюсь использовать Jest.createMockFromModule, но не получается использовать его следующим образом:
// 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()
});
Но несмотря на вызов метода, тест его не видит:
Expected number of calls: >= 1
Received number of calls: 0





jest.createMockFromModule() не переопределяет автоматически импорт, но jest.mock() делает.
Смоделируйте целевой модуль (т. е. MyApi.js) с фабрикой, которая возвращает фиктивный объект, а затем require его в тесте, чтобы получить доступ к фиктивному объекту:
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()
})
})