[Vuejs]-Replace default export object with jest

by

0👍

✅

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

Leave a comment