how to use with Composition API out of component?

[Fallsleep]

I defined a store like this:

// user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    id: 0,
  }),
  actions: {
    logout(to?: RouteLocationRaw|null) {
      return new Promise((resolve, reject) => {
        logout().then(response => {
          this.$reset()
          const router = useRouter()
          router.push(to || { path: domainOption.loginRoutePath })
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
  }
})

when testing pinia，it won't mount a componet:

// user.test.ts
describe('userStore', () => {
    beforeEach(() => {
      setActivePinia(createPinia())
    })
    it('logout called router.push ', async () => {
        const userStore = useUserStore()
        const router = getRouter()
        await userStore.logout()
        expect(router.push).toHaveBeenCalledWith({ path: domainOption.loginRoutePath })
    })
})

then I got:

[Vue warn]: inject() can only be used inside setup() or functional components.

 ❯ src/store/__test__/user.test.ts  (13 tests | 6 failed) 102ms
   ❯ src/store/__test__/user.test.ts > userStore  > logout 
     → Cannot read properties of undefined (reading 'addRoute')
   ❯ src/store/__test__/user.test.ts > userStore  > logout call routerStore.resetRoute
     → Cannot read properties of undefined (reading 'push')

how to solve it? mount a blank component? that seems no work

[posva]

See https://pinia.vuejs.org/core-concepts/plugins.html#plugins

You cannot call useRouter() within the action like you do, that's where the inject() can only be used inside setup error comes from

[Fallsleep]

thank! Following https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties , inject() is solved.

I create a function to return plugin:

// store/plugin.ts
export function pinaRouterPlugin(router: Router): PiniaPlugin {
  return ({ store }) => {
    store.router = markRaw(router)
  }
}

and declare properties:

// types/pinia.d.ts
import type { Router } from 'vue-router'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    router: Router
  }
}

change store to:

// user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    id: 0,
  }),
  actions: {
    logout(to?: RouteLocationRaw|null) {
      return new Promise((resolve, reject) => {
        logout().then(response => {
          this.$reset()
          this.router.push(to || { path: domainOption.loginRoutePath })
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
  }
})

use the plugin in main.ts

// main.ts
const app = createApp(App)
app.use(pinia.use(pinaRouterPlugin(router)))
app.use(router)
app.mount('#app')

use the plugin in store test:

// user.test.ts
describe('userStore', () => {
  const app = createApp({})
  beforeEach(() => {
    const pinia = createPinia().use(pinaRouterPlugin(getRouter()))
    app.use(pinia)
    setActivePinia(pinia)
  })
  it('logout called router.push ', async () => {
    const userStore = useUserStore()
    const router = getRouter()
    await userStore.logout()
    expect(router.push).toHaveBeenCalledWith({ path: domainOption.loginRoutePath })
  })
})

use the plugin in component test:

// component.test.ts
describe('component', () => {
  beforeEach(() => {
    render(Component, {
      global:{
        plugins: [
          createTestingPinia({
            stubActions: false,
            plugins:[pinaRouterPlugin(getRouter())]
          })
        ]
      }
    })
  })

  it('pass', async () => {
    screen.getByText('foo bar')
    // ...
  })
})