it works except 1 test

components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
+import { useResendAccountConfirmation } from '~/composables/api'
+import { useCurrentUser, useI18n, useModalAlert } from '#imports'
 
 const currentUser = await useCurrentUser()
 const errorText = ref('')
@@ -69,3 +71,5 @@ async function resend() {
   @apply text-red-600;
 }
 </style>
+import { useCurrentUser, useModalAlert, useI18n } from '#imports'; import {
+useResendAccountConfirmation } from '~/composables/api';

components/blocks/SiteFooter/LanguageSelector/LanguageSelector.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from '#imports'
 import type { ComputedRef } from 'vue'
 // import { type LocaleObject } from '#imports'
 

components/blocks/cards/BasicAlert/BasicAlert.test.ts

@@ -1,6 +1,7 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { getByClass, getByTestId, getHTMLElement } from 'root/testUtils'
 import BasicAlert from './BasicAlert.vue'
+import { useModalAlert } from '#imports'
 
 beforeEach(() => {
   const { state: modalAlertState } = useModalAlert()

components/blocks/cards/BasicAlert/BasicAlert.vue

@@ -4,6 +4,7 @@ import CloseButton from 'elements/buttons/CloseButton/CloseButton.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import CardBody from 'elements/cards/CardBody/CardBody.vue'
+import { useModalAlert } from '#imports'
 
 const { closeAlert, state } = useModalAlert()
 </script>

components/blocks/cards/ForgotPasswordCard/ForgotPasswordCard.test.ts

@@ -2,18 +2,32 @@ import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
 import { getByTestId } from 'root/testUtils'
 import ForgotPasswordCard from './ForgotPasswordCard.vue'
 import type { RecoverAccountRequest } from 'lib/api/data-contracts'
+import type { optionalParameters } from '~/composables/useApi'
 
-mockNuxtImport('useRecoverAccount', () => {
-  return async (
-    _requestData: RecoverAccountRequest,
-    opts: optionalParameters<void> = {},
-  ) => {
-    const { onOkay } = opts
-    if (onOkay) {
-      await onOkay()
+vi.mock(
+  import('~/composables/api/useRecoverAccount'),
+  async (importOriginal) => {
+    const mod = await importOriginal()
+
+    return {
+      ...mod,
+      // replace some exports
+      onOkay: vi.fn(),
     }
-  }
-})
+  },
+)
+
+// mockNuxtImport('useRecoverAccount', () => {
+//   return async (
+//     _requestData: RecoverAccountRequest,
+//     opts: optionalParameters<void> = {},
+//   ) => {
+//     const { onOkay } = opts
+//     if (onOkay) {
+//       await onOkay()
+//     }
+//   }
+// })
 
 afterAll(() => {
   vi.restoreAllMocks()

components/blocks/cards/ForgotPasswordCard/ForgotPasswordCard.vue

@@ -7,6 +7,8 @@ import CardBody from 'elements/cards/CardBody/CardBody.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import BaseInput from 'elements/inputs/BaseInput/BaseInput.vue'
 import { isEmailValid, isUsernameValid } from 'lib/form_helpers'
+import { useModalAlert } from '#imports'
+import { useRecoverAccount } from '~/composables/api'
 
 interface ForgotPasswordCardPops {
   modal?: boolean
@@ -21,7 +23,7 @@ const emit = defineEmits<{
   (event: 'close' | 'cancelClick'): void
 }>()
 
-const props = withDefaults(defineProps<ForgotPasswordCardPops>(), {
+withDefaults(defineProps<ForgotPasswordCardPops>(), {
   modal: false,
 })
 
@@ -76,7 +78,7 @@ function resetPassword() {
     <CardHeader class="forgot-password-card__header">
       <div class="forgot-password-card__title">Forgot Password</div>
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/cards/LogInCard/LogInCard.vue

@@ -8,6 +8,7 @@ import CardBody from 'elements/cards/CardBody/CardBody.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import HideShowPassword from 'elements/buttons/HideShowPassword/HideShowPassword.vue'
+import { useLoginUser } from '~/composables/api'
 
 interface LogInCardProps {
   modal?: boolean
@@ -23,7 +24,7 @@ const emit = defineEmits<{
   (event: 'close' | 'forgotPasswordClick' | 'signUpClick'): void
 }>()
 
-const props = withDefaults(defineProps<LogInCardProps>(), {
+withDefaults(defineProps<LogInCardProps>(), {
   modal: false,
 })
 
@@ -72,7 +73,7 @@ async function login() {
       </BaseButton>
 
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/cards/SignUpCard/SignUpCard.test.ts

@@ -1,6 +1,7 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { getByTestId, getHTMLElement } from 'root/testUtils'
 import SignUpCard from './SignUpCard.vue'
+import { useRuntimeConfig } from '#imports'
 
 afterEach(() => {
   fetchMock.resetMocks()

components/blocks/cards/SignUpCard/SignUpCard.vue

@@ -15,6 +15,7 @@ import CloseButton from 'elements/buttons/CloseButton/CloseButton.vue'
 import Card from 'elements/cards/Card/Card.vue'
 import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
 import CardBody from 'elements/cards/CardBody/CardBody.vue'
+import { useLoginUser, useRegisterUser } from '~/composables/api'
 
 interface SignUpCardProps {
   modal?: boolean
@@ -31,7 +32,7 @@ const emit = defineEmits<{
   (event: 'close' | 'logInClick' | 'signUpClick'): void
 }>()
 
-const props = withDefaults(defineProps<SignUpCardProps>(), {
+withDefaults(defineProps<SignUpCardProps>(), {
   modal: false,
 })
 
@@ -124,7 +125,7 @@ function validatePasswordInputs() {
       <div class="signup-card__title">Sign Up</div>
 
       <CloseButton
-        v-show="props.modal"
+        v-show="modal"
         data-testid="close-button"
         @click.prevent="emit('close')"
       />

components/blocks/nav/SiteNavbar/SiteNavbar.test.ts

@@ -2,6 +2,7 @@ import { mountSuspended } from '@nuxt/test-utils/runtime'
 import * as apiComposables from 'composables/api'
 import { getByTestId } from 'root/testUtils'
 import SiteNavbar from './SiteNavbar.vue'
+import { useSessionToken } from '#imports'
 
 afterEach(() => {
   vi.restoreAllMocks()

components/blocks/nav/SiteNavbar/SiteNavbar.vue

@@ -9,6 +9,8 @@ import LogInCard from 'blocks/cards/LogInCard/LogInCard.vue'
 import SignUpCard from 'blocks/cards/SignUpCard/SignUpCard.vue'
 import BaseModal from 'elements/modals/BaseModal/BaseModal.vue'
 import SearchBar from 'blocks/SearchBar/SearchBar.vue'
+import { useSessionToken } from '#imports'
+import { useLogoutUser } from '~/composables/api'
 
 interface NavbarState {
   mobileNavIsActive: boolean

components/elements/buttons/Dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, type Ref } from 'vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
 
 export interface SharedState {

components/elements/buttons/Dropdown/DropdownItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import type { SharedState } from './Dropdown.vue'
 
 const emit = defineEmits<{

composables/api/useChangePassword/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useChangePassword/useChangePassword.test.ts

@@ -1,3 +1,5 @@
+import useChangePassword from '.'
+
 const mockSuccessRecoverCreate2 = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useChangePassword', () => {

composables/api/useConfirmAccount/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useConfirmAccount/useConfirmAccount.test.ts

@@ -1,3 +1,5 @@
+import useConfirmAccount from '.'
+
 const mockSuccessAccountConfirmation = vi.fn(() =>
   Promise.resolve({ ok: true }),
 )

composables/api/useGetLeaderboardDetail/index.ts

@@ -6,6 +6,7 @@ import {
 } from 'composables/useApi'
 import { Leaderboards } from 'lib/api/Leaderboards'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
+import { useRuntimeConfig } from '#imports'
 
 export async function useGetLeaderboardDetail(
   leaderboardSlug: string,

composables/api/useGetLeaderboardDetail/useGetLeaderboardDetail.test.ts

@@ -1,3 +1,5 @@
+import useGetLeaderboardDetail from '.'
+
 const mockSuccessLeaderboardsDetail = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useGetLeaderboardDetail', () => {

composables/api/useGetUserDetail/index.ts

@@ -1,4 +1,9 @@
-import type { ApiResponse, optionalParameters } from 'composables/useApi'
+import { useRuntimeConfig } from '#imports'
+import {
+  useApi,
+  type ApiResponse,
+  type optionalParameters,
+} from 'composables/useApi'
 import { Users } from 'lib/api/Users'
 import type { UserViewModel } from 'lib/api/data-contracts'
 

composables/api/useGetUserDetail/useGetUserDetail.test.ts

@@ -1,3 +1,5 @@
+import useGetUserDetail from '.'
+
 const mockSuccessUsersDetail = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useGetUserDetail', () => {

composables/api/useLoginUser/index.ts

@@ -1,3 +1,4 @@
+import { useSessionToken, useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useLoginUser/useLoginUser.test.ts

@@ -1,3 +1,6 @@
+import { useSessionToken } from '#imports'
+import useLoginUser from '.'
+
 // const mockFailureUsersLoginCreate = vi.fn(() => Promise.resolve({ ok: false }))
 const mockSuccessAccountLoginCreate = vi.fn(() =>
   Promise.resolve({ data: { token: 'token' }, ok: true }),

composables/api/useLogoutUser/index.ts

@@ -1,3 +1,5 @@
+import { useSessionToken } from '#imports'
+
 export default function useLogoutUser() {
   useSessionToken().value = ''
 }

composables/api/useLogoutUser/useLogoutUser.test.ts

@@ -1,4 +1,6 @@
+import { useCurrentUser, useSessionToken } from '#imports'
 import type { UserViewModel } from 'lib/api/data-contracts'
+import useLogoutUser from '.'
 
 const token = 'auth-token'
 const user: UserViewModel = {

composables/api/useRecoverAccount/index.ts

@@ -1,6 +1,11 @@
 import { Account } from 'lib/api/Account'
-import type { ApiResponse, optionalParameters } from 'composables/useApi'
+import {
+  useApi,
+  type ApiResponse,
+  type optionalParameters,
+} from 'composables/useApi'
 import type { RecoverAccountRequest } from 'lib/api/data-contracts'
+import { useRuntimeConfig } from '#imports'
 
 export async function useRecoverAccount(
   requestData: RecoverAccountRequest,

composables/api/useRecoverAccount/useRecoverAccount.test.ts

@@ -1,3 +1,5 @@
+import useRecoverAccount from '.'
+
 const mockSuccessRecoverCreate = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useRecoverAccount', () => {

composables/api/useRegisterUser/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from '#imports'
 import {
   type ApiResponse,
   type optionalParameters,

composables/api/useRegisterUser/useRegisterUser.test.ts

@@ -1,3 +1,5 @@
+import useRegisterUser from '.'
+
 const mockSuccessRegisterCreate = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useRegisterUser', () => {

composables/api/useResendAccountConfirmation/index.ts

@@ -1,3 +1,4 @@
+import { useRuntimeConfig, useSessionToken } from '#imports'
 import {
   useApi,
   type ApiResponse,

composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts

@@ -1,3 +1,6 @@
+import useResendAccountConfirmation from '.'
+import useLoginUser from '../useLoginUser'
+
 const mockSuccessLogin = vi.fn(() =>
   Promise.resolve({ data: { token: 'token' }, ok: true }),
 )

composables/api/useValidateRecoveryToken/index.ts

@@ -1,4 +1,9 @@
-import type { ApiResponse, optionalParameters } from 'composables/useApi'
+import { useRuntimeConfig } from '#app'
+import {
+  useApi,
+  type ApiResponse,
+  type optionalParameters,
+} from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 
 export async function useValidateRecoveryToken(

composables/api/useValidateRecoveryToken/useValidateRecoveryToken.test.ts

@@ -1,3 +1,5 @@
+import useValidateRecoveryToken from '.'
+
 const mockSuccessRecoverDetail = vi.fn(() => Promise.resolve({ ok: true }))
 
 describe('useValidateRecoveryToken', () => {

composables/useApi/useApi.test.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import type { ProblemDetails } from 'lib/api/data-contracts'
 import type { HttpResponse } from 'lib/api/http-client'
+import useApi from '.'
 
 interface Opts {
   data?: object

composables/useCurrentUser.ts

@@ -1,5 +1,7 @@
+import { useAsyncData, useRuntimeConfig, useSessionToken } from '#imports'
 import { Users } from 'lib/api/Users'
 import type { UserViewModel } from 'lib/api/data-contracts'
+import useApi from './useApi'
 
 export default function useCurrentUser() {
   return useAsyncData<Partial<UserViewModel>>(

composables/useModalAlert.ts

@@ -1,3 +1,5 @@
+import { useState } from '#imports'
+
 interface ModalAlertState {
   body: string
   show: boolean

composables/useSessionToken.ts

@@ -1,3 +1,5 @@
+import { useCookie } from '#imports'
+
 export default function useSessionToken() {
   return useCookie('session_token', {
     default: () => '',

i18n.config.ts

@@ -1,4 +1,5 @@
 // TODO: This should be uncommented after 8.0.0-beta.11
+import { defineI18nConfig } from '#imports'
 import { localeMessages, supportedLocales } from './configUtils'
 
 export default defineI18nConfig(() => ({

middleware/confirm-account.ts

@@ -1,3 +1,7 @@
+import { defineNuxtRouteMiddleware, useRoute, navigateTo } from '#app'
+import { useModalAlert } from '#imports'
+import { useConfirmAccount } from '~/composables/api'
+
 export default defineNuxtRouteMiddleware((_to, from) => {
   const route = useRoute()
   const confirmationCode = route.query?.code as string