Блог

Я хочу использовать свежий магазин Vuex в каждом тесте, поэтому я хочу заменить магазин по умолчанию на магазин тестов. Причина в том, что мой маршрутизатор использует геттер магазина, чтобы проверить, разрешен ли пользователю доступ к определенному маршруту.

Проблема в том, что он всегда использует хранилище по умолчанию, которое не используется тестовым компонентом. Я пытался издеваться @store , но, похоже, я что-то упускаю.

@storeindex.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()
 

@routerindex.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' amp;amp; 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) amp;amp; !store.getters['auth/isAuthenticated']) {
            next({name: 'login'})
        } else {
            next()
        }
    })
    return router
}

export default createNewRouter()
 

Текущая реализация выглядит следующим образом:

@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')
    })
})
 

Оказывается, есть гораздо лучшее решение, о котором я не знал, которое не требует насмешливого использования 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')
    })
})