Nuxt•2w ago

Change URL in unit-test with useRoute

import {describe, it, expect,} from 'vitest';
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime';
import LayoutLogo from '../LayoutLogo.vue';
import {useLayoutStore} from "~/store/layout";
import {NuxtLink} from "#components";

// Mock useRoute and useLayoutStore
mockNuxtImport('useRoute', () => {
    return () => ({
        fullPath: '/' // default mock path
    });
});

const initialLogo = {
    width: 100,
    height: 50,
    alt: '',
    src:"https://example.com/test-image.jpg",
}
describe('LayoutLogo.vue', () => {
    const createWrapper = async () => {
        const layoutStore = useLayoutStore();
        layoutStore.logo = initialLogo
        return await mountSuspended(LayoutLogo);
    };

    it('Рендер корректного компонента в зависимости от страницы', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('> div').exists()).toBe(true);
        
        // HOW CHANGE URL ?
        const wrapper2 = await createWrapper();
        expect(wrapper2.findComponent(NuxtLink).exists()).toBe(true);
        expect(wrapper2.find('div').exists()).toBe(false);
    });
});

import {describe, it, expect,} from 'vitest';
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime';
import LayoutLogo from '../LayoutLogo.vue';
import {useLayoutStore} from "~/store/layout";
import {NuxtLink} from "#components";

// Mock useRoute and useLayoutStore
mockNuxtImport('useRoute', () => {
    return () => ({
        fullPath: '/' // default mock path
    });
});

const initialLogo = {
    width: 100,
    height: 50,
    alt: '',
    src:"https://example.com/test-image.jpg",
}
describe('LayoutLogo.vue', () => {
    const createWrapper = async () => {
        const layoutStore = useLayoutStore();
        layoutStore.logo = initialLogo
        return await mountSuspended(LayoutLogo);
    };

    it('Рендер корректного компонента в зависимости от страницы', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('> div').exists()).toBe(true);
        
        // HOW CHANGE URL ?
        const wrapper2 = await createWrapper();
        expect(wrapper2.findComponent(NuxtLink).exists()).toBe(true);
        expect(wrapper2.find('div').exists()).toBe(false);
    });
});

I need to change the URL to another, for example '/catalog/', before rending wrapper2. How can I do it?

2 Replies

kapa.ai•2w ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the URL in your unit test before rendering wrapper2, you can modify the mocked useRoute function to return a different path. Here's how you can achieve this:

import { describe, it, expect, vi } from 'vitest';
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime';
import LayoutLogo from '../LayoutLogo.vue';
import { useLayoutStore } from "~/store/layout";
import { NuxtLink } from "#components";

// Create a mocked useRoute function
const useRouteMock = vi.fn(() => ({
  fullPath: '/' // default mock path
}));

// Mock useRoute with the mocked function
mockNuxtImport('useRoute', () => useRouteMock);

const initialLogo = {
    width: 100,
    height: 50,
    alt: '',
    src: "<https://example.com/test-image.jpg",>
}

describe('LayoutLogo.vue', () => {
    const createWrapper = async () => {
        const layoutStore = useLayoutStore();
        layoutStore.logo = initialLogo
        return await mountSuspended(LayoutLogo);
    };

    it('Рендер корректного компонента в зависимости от страницы', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('> div').exists()).toBe(true);
        
        // Change the mocked route before creating wrapper2
        useRouteMock.mockReturnValue({ fullPath: '/catalog/' });
        
        const wrapper2 = await createWrapper();
        expect(wrapper2.findComponent(NuxtLink).exists()).toBe(true);
        expect(wrapper2.find('div').exists()).toBe(false);
    });
});

import { describe, it, expect, vi } from 'vitest';
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime';
import LayoutLogo from '../LayoutLogo.vue';
import { useLayoutStore } from "~/store/layout";
import { NuxtLink } from "#components";

// Create a mocked useRoute function
const useRouteMock = vi.fn(() => ({
  fullPath: '/' // default mock path
}));

// Mock useRoute with the mocked function
mockNuxtImport('useRoute', () => useRouteMock);

const initialLogo = {
    width: 100,
    height: 50,
    alt: '',
    src: "<https://example.com/test-image.jpg",>
}

describe('LayoutLogo.vue', () => {
    const createWrapper = async () => {
        const layoutStore = useLayoutStore();
        layoutStore.logo = initialLogo
        return await mountSuspended(LayoutLogo);
    };

    it('Рендер корректного компонента в зависимости от страницы', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('> div').exists()).toBe(true);
        
        // Change the mocked route before creating wrapper2
        useRouteMock.mockReturnValue({ fullPath: '/catalog/' });
        
        const wrapper2 = await createWrapper();
        expect(wrapper2.findComponent(NuxtLink).exists()).toBe(true);
        expect(wrapper2.find('div').exists()).toBe(false);
    });
});

In this modified version, we've made the following changes: 1. We import vi from Vitest to use its mocking capabilities Stack Overflow Post > How to change computed image src property to another one based on the current page loaded, using Vue 3 and Nuxt? Part 2 (https://stackoverflow.com/questions/77848758). 2. We create a mocked useRoute function using vi.fn(). 3. We use this mocked function in our mockNuxtImport call for useRoute. 4. Before creating wrapper2, we use useRouteMock.mockReturnValue() to change the returned path to '/catalog/'. This approach allows you to dynamically change the mocked route for different parts of your test. The useRoute composable will now return the new path when wrapper2 is created, simulating a different URL. Remember that this method of mocking and changing routes is specific to unit testing in Nuxt 3 using @nuxt/test-utils. For end-to-end testing or other scenarios, different approaches might be necessary Docs > Getting-started > Testing > Unit Testing > 🛠️ Helpers (https://nuxt.com/docs/getting-started/testing#%EF%B8%8F-helpers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Change URL in unit-test with useRoute