Replace default export object with jest - vue.js

Question

I want to use fresh Vuex store in every test, so I'm looking to replace default store with test store. Reason is that my Router is using store getter to check if user is allowed to access specific route.
The problem is that it always uses default store, which is not used by test component. I've tried to mock #\store, but looks like I'm missing something.
#\store\index.ts
import {createStore, Store} from 'vuex'
import {State} from '#vue/runtime-core'
import auth from "#/store/modules/auth";
export const createNewStore = (): Store<State> => (createStore({
modules: {
auth,
},
}))
export default createNewStore()
#\router\index.ts
import {createMemoryHistory, createRouter, createWebHistory, Router, RouteRecordRaw} from 'vue-router'
import store from '#/store';
const routes: Array<RouteRecordRaw> = [ ... ]
export const createNewRouter = (): Router => {
const isServer = Boolean(typeof module !== 'undefined' && module.exports)
const router = createRouter({
history: isServer ? createMemoryHistory() : createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => !record.meta.doesntRequiresAuth) && !store.getters['auth/isAuthenticated']) {
next({name: 'login'})
} else {
next()
}
})
return router
}
export default createNewRouter()
Current implementation looks like this:
#\views\__tests__\Login.spec.ts
import {render, screen} from '#testing-library/vue';
import AppComponent from '../../App.vue';
import userEvent from "#testing-library/user-event";
import {createNewRouter} from "#/router";
const {createNewStore} = jest.requireActual('#/store');
import {Router} from "vue-router";
describe('Login.vue', () => {
let router : Router
const renderComponentWithDependencies = async () => {
const mockStore = createNewStore();
jest.doMock('#/store', () => ({
__esModule: true,
default: mockStore,
}));
router = createNewRouter();
await router.push('/')
render(AppComponent, {
global: {
plugins: [router, mockStore],
}
})
}
beforeEach(async () => {
await renderComponentWithDependencies()
fetchMock.resetMocks();
});
it('User logs with correct username and pin', async () => {
const username = 'Pavel'
const pin = 'test'
fetchMock.mockResponseOnce(JSON.stringify({}));
fetchMock.mockResponseOnce(JSON.stringify({token: "123"}));
await screen.findByLabelText("Имя пользователя")
userEvent.type(screen.getByLabelText("Имя пользователя"), username)
await userEvent.click(screen.getByText('Запросить пин'))
userEvent.type(await screen.findByLabelText('Пин код'), pin)
await userEvent.click(screen.getByText('Войти'))
await router.isReady()
await screen.findByText('You are on home page')
})
})

Answer 1

Turns out there is way better solution I wasn't aware of, which doesn't require mocking - use jest.resetModules():
import {render, screen} from '#testing-library/vue';
import AppComponent from '../../App.vue';
import userEvent from "#testing-library/user-event";
import router from "#/router";
import store from '#/store';
describe('Login.vue', () => {
const renderComponentWithDependencies = async () => {
await router.push('/')
// We use App component instead of Login to test routing to homepage at the end of the login
render(AppComponent, {
global: {
plugins: [router, store],
}
})
}
beforeEach(async () => {
await renderComponentWithDependencies()
fetchMock.resetMocks();
jest.resetModules();
});
it('User logs with correct username and pin', async () => {
const username = 'Pavel'
const pin = 'test'
fetchMock.mockResponseOnce(JSON.stringify({}));
fetchMock.mockResponseOnce(JSON.stringify({token: "123"}));
await screen.findByLabelText("Имя пользователя")
userEvent.type(screen.getByLabelText("Имя пользователя"), username)
await userEvent.click(screen.getByText('Запросить пин'))
userEvent.type(await screen.findByLabelText('Пин код'), pin)
await userEvent.click(screen.getByText('Войти'))
await router.isReady()
await screen.findByText('You are on home page')
})
})