Nuxt•2w ago

[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the

Hello. My test:

import { describe, it, expect, vi } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { useLocationStore } from '~/store/location'
import LayoutHeaderLocation from '../LayoutHeaderLocation.vue'
import { mockNuxtImport, mountSuspended } from "@nuxt/test-utils/runtime";
import { ref } from 'vue'

mockNuxtImport('useAsyncData', () => {
    return () => {
        return Promise.resolve({
            data: ref(true),
        })
    }
})

describe('LayoutHeaderLocation.vue', () => {
    let locationStore:ReturnType<typeof useLocationStore>
    const testingPinia = createTestingPinia({ createSpy: vi.fn })

    const createWrapper = async (initialState = { id: 1, canChange: true }) => {
        locationStore = useLocationStore()
        locationStore.id = initialState.id
        locationStore.canChange = initialState.canChange

        return await mountSuspended(LayoutHeaderLocation, {
            global: { plugins: [testingPinia] },
        })
    }

    it('Рендерится <a> когда canChange=true', async () => {
        const wrapper = await createWrapper({ id: 1, canChange: true })
        const cityLink = wrapper.find('a')
        expect(cityLink.exists()).toBe(true)
        expect(cityLink.element.tagName.toLowerCase()).toBe('a')
    })
})

import { describe, it, expect, vi } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { useLocationStore } from '~/store/location'
import LayoutHeaderLocation from '../LayoutHeaderLocation.vue'
import { mockNuxtImport, mountSuspended } from "@nuxt/test-utils/runtime";
import { ref } from 'vue'

mockNuxtImport('useAsyncData', () => {
    return () => {
        return Promise.resolve({
            data: ref(true),
        })
    }
})

describe('LayoutHeaderLocation.vue', () => {
    let locationStore:ReturnType<typeof useLocationStore>
    const testingPinia = createTestingPinia({ createSpy: vi.fn })

    const createWrapper = async (initialState = { id: 1, canChange: true }) => {
        locationStore = useLocationStore()
        locationStore.id = initialState.id
        locationStore.canChange = initialState.canChange

        return await mountSuspended(LayoutHeaderLocation, {
            global: { plugins: [testingPinia] },
        })
    }

    it('Рендерится <a> когда canChange=true', async () => {
        const wrapper = await createWrapper({ id: 1, canChange: true })
        const cityLink = wrapper.find('a')
        expect(cityLink.exists()).toBe(true)
        expect(cityLink.element.tagName.toLowerCase()).toBe('a')
    })
})

And I get warning:

[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the new value.

[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the new value.

How can I resolve this?

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: ---------------------- The warning you're encountering is related to Pinia being initialized multiple times in your test environment. This is a common issue when testing Nuxt applications with Pinia. Let's address this based on the information from our knowledge sources. To resolve this warning, you can try the following approach: 1. Instead of using createTestingPinia directly in your test, you can leverage Nuxt's built-in support for Pinia in testing. 2. Remove the createTestingPinia call and the global plugins setup from your test. 3. Use the @nuxt/test-utils to set up your test environment, which should automatically handle Pinia initialization. Here's how you can modify your test:

import { describe, it, expect } from 'vitest'
import { useLocationStore } from '~/store/location'
import LayoutHeaderLocation from '../LayoutHeaderLocation.vue'
import { mockNuxtImport, mountSuspended } from "@nuxt/test-utils/runtime";
import { ref } from 'vue'

mockNuxtImport('useAsyncData', () => {
    return () => {
        return Promise.resolve({
            data: ref(true),
        })
    }
})

describe('LayoutHeaderLocation.vue', () => {
    const createWrapper = async (initialState = { id: 1, canChange: true }) => {
        const wrapper = await mountSuspended(LayoutHeaderLocation)
        const locationStore = useLocationStore()
        locationStore.id = initialState.id
        locationStore.canChange = initialState.canChange
        return wrapper
    }

    it('Рендерится <a> когда canChange=true', async () => {
        const wrapper = await createWrapper({ id: 1, canChange: true })
        const cityLink = wrapper.find('a')
        expect(cityLink.exists()).toBe(true)
        expect(cityLink.element.tagName.toLowerCase()).toBe('a')
    })
})

import { describe, it, expect } from 'vitest'
import { useLocationStore } from '~/store/location'
import LayoutHeaderLocation from '../LayoutHeaderLocation.vue'
import { mockNuxtImport, mountSuspended } from "@nuxt/test-utils/runtime";
import { ref } from 'vue'

mockNuxtImport('useAsyncData', () => {
    return () => {
        return Promise.resolve({
            data: ref(true),
        })
    }
})

describe('LayoutHeaderLocation.vue', () => {
    const createWrapper = async (initialState = { id: 1, canChange: true }) => {
        const wrapper = await mountSuspended(LayoutHeaderLocation)
        const locationStore = useLocationStore()
        locationStore.id = initialState.id
        locationStore.canChange = initialState.canChange
        return wrapper
    }

    it('Рендерится <a> когда canChange=true', async () => {
        const wrapper = await createWrapper({ id: 1, canChange: true })
        const cityLink = wrapper.find('a')
        expect(cityLink.exists()).toBe(true)
        expect(cityLink.element.tagName.toLowerCase()).toBe('a')
    })
})

This approach leverages Nuxt's built-in testing utilities, which should properly handle Pinia initialization. The mountSuspended function from @nuxt/test-utils/runtime should set up the component with the correct Nuxt environment, including Pinia Docs > Getting-started > Testing (https://nuxt.com/docs/getting-started/testing#unit-testing). If you still encounter issues, you might need to ensure that your Nuxt configuration is properly set up for testing. You can refer to the Nuxt documentation on testing for more detailed setup instructions Docs > Getting-started > Testing (https://nuxt.com/docs/getting-started/testing#unit-testing). Remember that when using Pinia with Nuxt, it's generally recommended to let Nuxt handle the Pinia initialization, as shown in the Docs > Getting-started > State Management (https://nuxt.com/docs/getting-started/state-management#usage-with-pinia) section of the Nuxt documentation. If this approach doesn't resolve the warning, you might need to investigate further into your project's setup and dependencies to ensure there are no conflicts in how Pinia is being initialized across your application and test environment. ---------------------- 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

[Vue warn]: App already provides property with key "Symbol(pinia)". It will be overwritten with the