Nuxt•13mo ago

useRoute and mountSuspended - test is freezing

My test:

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

// 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('renders the correct component based on the route', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('div').exists()).toBe(true);
    });
});

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

// 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('renders the correct component based on the route', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('div').exists()).toBe(true);
    });
});

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

// 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('renders the correct component based on the route', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('div').exists()).toBe(true);
    });
});

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

// 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('renders the correct component based on the route', async () => {
        const wrapper = await createWrapper();
        expect(wrapper.find('div').exists()).toBe(true);
    });
});

My component:

import { useRoute } from 'nuxt/app'
import { NuxtLink } from '#components'
import { useLayoutStore } from '~/store/layout'

const layoutStore = useLayoutStore()
const route = useRoute()

const componentName = computed(() => {
  if (route.fullPath === '/') {
    return 'div'
  }
  return NuxtLink
})

const url = computed(() => {
  if (route.fullPath === '/') {
    return null
  }
  return '/'
})

import { useRoute } from 'nuxt/app'
import { NuxtLink } from '#components'
import { useLayoutStore } from '~/store/layout'

const layoutStore = useLayoutStore()
const route = useRoute()

const componentName = computed(() => {
  if (route.fullPath === '/') {
    return 'div'
  }
  return NuxtLink
})

const url = computed(() => {
  if (route.fullPath === '/') {
    return null
  }
  return '/'
})

import { useRoute } from 'nuxt/app'
import { NuxtLink } from '#components'
import { useLayoutStore } from '~/store/layout'

const layoutStore = useLayoutStore()
const route = useRoute()

const componentName = computed(() => {
  if (route.fullPath === '/') {
    return 'div'
  }
  return NuxtLink
})

const url = computed(() => {
  if (route.fullPath === '/') {
    return null
  }
  return '/'
})

import { useRoute } from 'nuxt/app'
import { NuxtLink } from '#components'
import { useLayoutStore } from '~/store/layout'

const layoutStore = useLayoutStore()
const route = useRoute()

const componentName = computed(() => {
  if (route.fullPath === '/') {
    return 'div'
  }
  return NuxtLink
})

const url = computed(() => {
  if (route.fullPath === '/') {
    return null
  }
  return '/'
})

When I start test, I get error:

TypeError: 'set' on proxy: trap returned falsish for property 'url'
 ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:44
    140|                           renderContext[key] = methods[key].bind(renderContext);
    141|                         }
    142|                       }
       |                  ^
    143|                       if (computed && typeof computed === "object") {
    144|                         for (const key in computed) {

TypeError: 'set' on proxy: trap returned falsish for property 'url'
 ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:44
    140|                           renderContext[key] = methods[key].bind(renderContext);
    141|                         }
    142|                       }
       |                  ^
    143|                       if (computed && typeof computed === "object") {
    144|                         for (const key in computed) {

TypeError: 'set' on proxy: trap returned falsish for property 'url'
 ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:44
    140|                           renderContext[key] = methods[key].bind(renderContext);
    141|                         }
    142|                       }
       |                  ^
    143|                       if (computed && typeof computed === "object") {
    144|                         for (const key in computed) {

TypeError: 'set' on proxy: trap returned falsish for property 'url'
 ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:141:44
    140|                           renderContext[key] = methods[key].bind(renderContext);
    141|                         }
    142|                       }
       |                  ^
    143|                       if (computed && typeof computed === "object") {
    144|                         for (const key in computed) {

Why?

kapa.ai•12/13/24, 9:28 AM

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•12/13/24, 9:29 AM

----------------------
Based on the information provided in the knowledge sources and your question, it appears that you're encountering an issue with testing a Nuxt component using @nuxt/test-utils@nuxt/test-utils. Let's analyze the problem and provide some suggestions:

The error you're seeing suggests that there's an issue with a computed property named 'url' in your component. This is likely because the useRouteuseRoute composable is not being properly mocked in your test environment.
You're using
```
mockNuxtImport
```
```
mockNuxtImport
```
to mock the useRouteuseRoute composable, which is the correct approach. However, the mock implementation might not be complete. Nuxt Testing Docs (https://nuxt.com/docs/getting-started/testing#mocknuxtimport) show that
```
mockNuxtImport
```
```
mockNuxtImport
```
should be used to mock Nuxt's auto-import functionality.
The mountSuspendedmountSuspended function you're using is designed to mount Vue components within the Nuxt environment, allowing async setup and access to injections from Nuxt plugins. Nuxt Testing Docs (https://nuxt.com/docs/getting-started/testing#mountsuspended)

To resolve this issue, try the following:

Enhance your useRouteuseRoute mock to include all properties that your component expects:

mockNuxtImport('useRoute', () => {
    return () => ({
        fullPath: '/',
        // Add any other properties that useRoute normally provides and your component uses
    });
});

mockNuxtImport('useRoute', () => {
    return () => ({
        fullPath: '/',
        // Add any other properties that useRoute normally provides and your component uses
    });
});

Make sure you're running your tests in a Nuxt environment. You can do this by adding .nuxt..nuxt. to your test file name (e.g., LayoutLogo.nuxt.spec.tsLayoutLogo.nuxt.spec.ts) or by adding // @vitest-environment nuxt// @vitest-environment nuxt at the top of your test file. Nuxt Testing Docs (https://nuxt.com/docs/getting-started/testing#using-a-nuxt-runtime-environment)
If you're still encountering issues, you might need to mock the NuxtLinkNuxtLink component as well, since it's being used in a computed property:

kapa.ai•12/13/24, 9:29 AM

import { mockComponent } from '@nuxt/test-utils/runtime'

mockComponent('NuxtLink', {
  props: ['to'],
  template: '<a :href="to"><slot></slot></a>'
})

import { mockComponent } from '@nuxt/test-utils/runtime'

mockComponent('NuxtLink', {
  props: ['to'],
  template: '<a :href="to"><slot></slot></a>'
})

Ensure that your useLayoutStoreuseLayoutStore is properly mocked or initialized in the test environment.

If these steps don't resolve the issue, it's possible that there's a conflict between the component's setup and the test environment. In such cases, you might need to adjust your component code to be more testable, or consider using a different testing strategy.

Remember, when testing Nuxt applications, it's important to properly set up the Nuxt environment and mock all necessary composables and components. If you continue to face issues, you might want to consult the Nuxt Testing Documentation (https://nuxt.com/docs/getting-started/testing) for more detailed information on testing Nuxt applications.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•12/13/24, 9:29 AM

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

YuriOP•12/13/24, 9:36 AM

Hm, when I renamed the computed property url to link , everything started work.

useRoute and mountSuspended - test is freezing

Similar Threads

Similar Threads

Similar Threads