vue.jsvuejs3integration-testingvue-test-utilspinia

[Vue warn]: Property "$pinia" was accessed during render but is not defined on instance


Context

Issue

How do I make this warning go away? Is it a problem?

What I've looked into


This is an example of how I am mounting my components when I try to test them:

import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'

wrapper = mount(FilterDrawer, {
  plugins: [
    createTestingPinia({
       stubActions: false,
       initialState: {
         search: StateFactory.build()  // because store is named 'search'
        }
     })
  ]
})

FilterDrawer component uses mapStores to use the search store. It also has child components that use mapStores to use the search store.


Solution

  • As shown in the documentation, mount accepts Vue plugins in global property, it should be:

    wrapper = mount(FilterDrawer, {
      global: {
        plugins: [
          createTestingPinia({...})
        ]
      }
    })