How to initialize store before component mount in tests

[Djaler]

In cookbook I see this example:

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!

But what if I need to set store values before component mount? For example, if component uses store values in created or setup.

[posva]

you can create the testing pinia before:

const pinia = createTestingPinia()
pinia.state.value[storeId] = {
  // initial state for the store
}

mount(Counter, { global: { plugins: [pinia] }})

[zhao-li]

@Djaler sorry, for jumping on to your post. I was hoping you might have gotten this bit of code to work in your tests:

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

I'm trying to get it working in my test, but am stuck on how to modify it from the guide/tutorial so that it works for my test.

In case you want further context: #1540

Thank you for your time 🙏

[zhao-li]

I think I figured it out. Sorry for the churn.

[pawelmiklas]

Alternative way is to pass values directly to createTestingPinia

const pinia = createTestingPinia({
  initialState: {
   [storeId]: {
      firstName: "John",
      lastName: "Snow",
    },
  },
})

mount(Counter, { global: { plugins: [pinia] }})

[llatinov]

I found a solution which is good enough for me. You can change the values after the component is mounted and then re-render it

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!

store.someGetterValue = true // change getter from the testing store to value that you are interested in, in my example it is boolean, but could be anything, this is like instrumenting the getter to return what you need

await wrapper.vm.$nextTick; // re-render the component, which will force the component to pick the new getter value from the testing store and render accordingly, then you can assert that component has some properties only if someGetterValue == true