Async Jest test in vueJS lifecycle hook with Interval - unit-testing

Question

I would to understand how can i test my "auth/refresh" action in the "beforeCreate" hook with jest like below :
// main.vue
async beforeCreate() {
let authTokenRefreshIntervalId;
await this.$store.dispatch('auth/initialize');
authTokenRefreshIntervalId = setInterval(() => {
this.$store.dispatch('auth/refresh').catch(() => {
this.$store.dispatch('auth/logout');
clearInterval(authTokenRefreshIntervalId);
});
}, 30 * 1000);
}
// main.spec.js
import Vue from 'vue';
import Vuex from 'vuex';
import { shallow, createLocalVue, mount } from '#vue/test-utils';
import Main from '#/main';
const localVue = createLocalVue();
jest.useFakeTimers();
describe('store-auth', () => {
let store;
let actions;
let getters;
beforeEach(() => {
actions = {
initialize: jest.fn(),
refresh: jest.fn(),
logout: jest.fn(),
};
getters = {
isAuthenticated: jest.fn(),
};
store = new Vuex.Store({
modules: {
auth: {
namespaced: true,
actions,
getters,
},
},
});
});
it('dispatch initialize on beforeCreate hook', () => {
const wrapper = shallow(Main, { store, localVue });
expect(actions.initialize).toHaveBeenCalled();
});
it('dispatch refresh on beforeCreate hook every 30s', () => {
const wrapper = shallow(Main, { store, localVue });
jest.runTimersToTime(30 * 1000);
expect(actions.refresh).toHaveBeenCalled();
});
});
Jest say that the mocked function is not called.
I tried with expect(setInterval).toHaveBeenCalled() and it pass the test.
Where i'm wrong plz ?

Answer 1

Try using async/await in your test also.
it('dispatch refresh on beforeCreate hook every 30s', async () => {
const wrapper = shallow(Main, { store, localVue });
jest.runTimersToTime(30 * 1000);
await expect(actions.refresh).toHaveBeenCalled();
});