Nuxt 3 + Vitest: how to test a component that uses a store? --> defineStore is not defined

[Jeroen-Cox]

Hi all,

Working with Nuxt3, composition api and I'm trying to create a component test for my login page with Vitest.
I followed the docs: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-components but I keep running into problem after problem.

I think for this test I should not care about the implementation of the component, all I need to test is:

1. If user uses right credentials, is user forward to page X
2. If user uses wrong credentials, error is shown.

This is my test code:

import { describe, it, expect } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import Login from '@/pages/login/index.vue'
import { createTestingPinia } from '@pinia/testing'
import { useUserStore } from '@/stores/index'

describe('Login', () => {
  const vuetify = createVuetify({ components, directives })
  const store = useUserStore()

  render(Login, {
    global: {
      plugins: [vuetify, createTestingPinia()],
      stubs: {
        SystemVersions: true
      },
      mocks: {
        $t: (msg: string) => msg
      }
    }
  })
  it('render button correctly', async () => {
    // assertions
  })
})

The error I get is "defineStore is not defined" inside of my store file. This is the relevant part of my store file:

export const useUserStore = defineStore('user', () => {
  const { signIn, signOut, data, token } = useAuth()
  const config = useRuntimeConfig()

  //
  //  User login/logout logic & user Permissions
  //
  const user = ref<any>()
  const loading = ref<boolean>(false)
  async function logInUser(credentials: { emailAddress: string; password: string }) {
    loading.value = true
    try {
      await signIn(
        { email_address: credentials.emailAddress, password: credentials.password },
        { callbackUrl: '/shows' }
      )
      user.value = data.value
      loading.value = false
      return 200
    } catch (e: any) {
      loading.value = false
      return e.status
    }
  }

What do I have to do so that my component test can use the testing store?

[aSchaffe]

youn need mount instead of render