How to test Store state in tests?

[zhao-li]

Hi 👋

I'm trying to get my basic component test working. I am following this guide: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-a-store

In their example code:

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

const wrapper = mount(Counter, {
  global: {
    plugins: [createTestingPinia()],
  },
})

const store = useSomeStore() // uses the testing pinia!

// state can be directly manipulated
store.name = 'my new name'
// can also be done through patch
store.$patch({ name: 'new name' })
expect(store.name).toBe('new name')

// actions are stubbed by default, meaning they don't execute their code by default.
// See below to customize this behavior.
store.someAction()

expect(store.someAction).toHaveBeenCalledTimes(1)
expect(store.someAction).toHaveBeenLastCalledWith()

I get an error on this line when trying to use my own store:

const store = useGreetingStore()

Error:

ReferenceError: useGreetingStore is not defined
 ❯ src/components/greeting/__tests__/Create.spec.js:20:19
     18|       },
     19|     })
     20|     const store = useGreetingStore()

If I then try to import my actual store with:

import useGreetingStore from '@/stores/greeting.js'

The error becomes:

TypeError: default is not a function
 ❯ src/components/greeting/__tests__/Create.spec.js:20:35
     18|       },
     19|     })
     20|     const store = useGreetingStore()

Any tips or suggestions on what I might try to get a basic test working similar to the example code in the guide?

Thank you for your time 🙏

[zhao-li]

hmmm...nevermind, I needed to import the store this way instead:

import { useGreetingStore } from '@/stores/greeting.js'

Though I am curious, what's the point of having this:

      global: {
        plugins: [
          createTestingPinia(),
        ],
      },

If I still have to import my actual store.

Sorry, I must be missing something super trivial...