Component test with with Vitest throws [Vue warn]: injection "Symbol(pinia)" not found.

[madebyfabian]

Reproduction

packages used:

pinia: 2.0.11
@pinia/testing: 0.0.9
@vue/test-utils: @vue/test-utils
vitest: 0.5.0
vue: 3.2.31

tests/MyComponent.spec.ts

import { describe, it, expect, fn } from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import { mount } from '@vue/test-utils'
import MyComponent from '../MyComponent.vue'

describe('MyComponent', () => {
	// Create store
	const pinia = { global: { plugins: [ createTestingPinia({ createSpy: fn }) ] }}

	it('rendery properly', () => {
		const wrapper = mount(MyComponent, { pinia, props: {} })
		expect(wrapper.text()).toBe('Hello World')
	})
})

Steps to reproduce the behavior

1. Install all packages
2. run vitest --environment jsdom cli command

Expected behavior

I expect no errors thrown.

Actual behavior

Issue is similar to #629, but is not solved since I am using vue 3. The test runs, and it passes. But it keeps showing those error messages:

stderr | src/components/__tests__/MyComponent.spec.ts > MyComponent > rendery properly
[Vue warn]: injection "Symbol(pinia)" not found. 
  at <MyComponent ref="VTU_COMPONENT" > 
  at <VTUROOT>

[posva]

It's

const wrapper = mount(MyComponent, { global: { plugins: [ createTestingPinia({ createSpy: fn }) ] }, props: {} })

If you don't create a pinia for each test, each test will share the same state object, ending up in unexpected problems. My recommendation is to wrap the whole mount() call within a function:

describe('my test', () => {
  function factory(propsOrOptions) {
    return mount(MyComponent, { global: { plugins: [ createTestingPinia({ createSpy: fn }) ] }, props: {} })
  }
})

Adapt the argument to pass options to the component

[miquelromero]

I'm also getting this message with Vue 2 and cypress. Actions are stubbed properly, I just get the "[Vue warn]: injection "Symbol(pinia)" not found." message.

Relevant code:

import { mount } from '@cypress/vue';

...

mount(MyComponent, {
  extensions: {
    plugins: [createTestingPinia({ createSpy: cy.spy })],
  },
});

Am I missing anything?

[madebyfabian]

@posva Thanks for your answer, that was the solution. Now it works. I was writing it exactly like it should be, but I thought I could initialize the store inside describe, but you must have to do it inside every it, which is a bit boilerplatey, but it works!

[mayacoda]

I'm having the same problem, but with Vue 3 and Jest.

pinia: 2.0.12
@pinia/testing: 0.0.10
Jest: 27.0.6
Vue: 3.2.25

Component code

<script setup lang="ts">
import { onMounted } from 'vue'
import { useStore } from '@/services/store'

const store = useStore()

onMounted(async () => {
  await store.fetchAsyncData()
})
</script>

Test code

const pinia = createTestingPinia()
// if this isn't called, I get the error `Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?`
// I'm assuming because I create the store in the setup script root?
setActivePinia(pinia)

describe('Component', () => {
  beforeAll(() => {
    render(Component, {
      global: {
        plugins: [ pinia ]
      }
    })
  })
})

[posva]

You need to create a separate pinia for each test or they will share the same state object

[MrShnaider]

The following code worked for me:

import { createPinia } from 'pinia';
import MyComponent from './MyComponent.vue';

appWrapper = mount(MyComponent, { global: { plugins: [ createPinia() ] } } );

[mraichelson]

Spent all day trying to get stuff working before I stumbled onto this comment that got stuff working for me. Thank you!

[pawelmiklas]

If you use pinia in multiple places, that worked form me:

const pinia = createPinia()
setActivePinia(pinia)

mount(Component, {
  global: {
    plugins: [ pinia ],
  },
}