Enhance Vitest configuration and improve Vue integration

- Added Vue plugin to vitest.config.ts for better component testing.
- Introduced vitest.setup.ts to expose Vue reactivity and lifecycle methods globally, ensuring compatibility with .vue components.
- Updated mock implementations in nuxt-imports.ts to include readonly for improved reactivity handling.
- Refactored useMapBookmarks and useToast composables to utilize readonly from Vue for better state management.

frontend-nuxt/__mocks__/nuxt-imports.ts

@@ -1,6 +1,26 @@
-import { ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  readonly,
+} from 'vue'
 
-export { ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick }
+export {
+  ref,
+  reactive,
+  computed,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  readonly,
+}
 
 export function useRuntimeConfig() {
   return {

frontend-nuxt/composables/useMapBookmarks.ts

@@ -1,3 +1,5 @@
+import { readonly } from 'vue'
+
 export interface MapBookmark {
   id: string
   name: string

frontend-nuxt/composables/useToast.ts

@@ -1,3 +1,5 @@
+import { readonly } from 'vue'
+
 export type ToastType = 'success' | 'error' | 'info'
 
 export interface Toast {

frontend-nuxt/lib/__tests__/Character.test.ts

@@ -4,29 +4,36 @@ import type L from 'leaflet'
 import type { Map, LayerGroup } from 'leaflet'
 import { createCharacter, type CharacterData, type CharacterMapViewRef } from '../Character'
 
-vi.mock('leaflet', () => {
+const { leafletMock } = vi.hoisted(() => {
   const markerMock = {
     on: vi.fn().mockReturnThis(),
     addTo: vi.fn().mockReturnThis(),
     setLatLng: vi.fn().mockReturnThis(),
     setIcon: vi.fn().mockReturnThis(),
   }
-  return {
+  const Icon = vi.fn().mockImplementation(function (this: unknown) {
-    default: {
+    return {}
-      marker: vi.fn(() => markerMock),
-      Icon: vi.fn().mockImplementation(() => ({})),
-    },
-    marker: vi.fn(() => markerMock),
-    Icon: vi.fn().mockImplementation(() => ({})),
-  }
   })
+  const L = {
+    marker: vi.fn(() => markerMock),
+    Icon,
+  }
+  return { leafletMock: L }
+})
+
+vi.mock('leaflet', () => ({
+  __esModule: true,
+  default: leafletMock,
+  marker: leafletMock.marker,
+  Icon: leafletMock.Icon,
+}))
 
 vi.mock('~/lib/LeafletCustomTypes', () => ({
   HnHMaxZoom: 6,
 }))
 
 function getL(): L {
-  return require('leaflet').default
+  return leafletMock as unknown as L
 }
 
 function makeCharData(overrides: Partial<CharacterData> = {}): CharacterData {

frontend-nuxt/lib/__tests__/Marker.test.ts

@@ -15,14 +15,13 @@ vi.mock('leaflet', () => {
     openPopup: vi.fn().mockReturnThis(),
     closePopup: vi.fn().mockReturnThis(),
   }
-  return {
+  const point = (x: number, y: number) => ({ x, y })
-    default: {
+  const L = {
-      marker: vi.fn(() => markerMock),
-      Icon: vi.fn(),
-    },
     marker: vi.fn(() => markerMock),
     Icon: vi.fn(),
+    point,
   }
+  return { __esModule: true, default: L, ...L }
 })
 
 vi.mock('~/lib/LeafletCustomTypes', () => ({

frontend-nuxt/vitest.config.ts

@@ -1,11 +1,14 @@
 import { defineConfig } from 'vitest/config'
+import Vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 
 export default defineConfig({
+  plugins: [Vue()],
   test: {
     environment: 'happy-dom',
     include: ['**/__tests__/**/*.test.ts', '**/*.test.ts'],
     globals: true,
+    setupFiles: ['./vitest.setup.ts'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'html'],

frontend-nuxt/vitest.setup.ts

@@ -0,0 +1,27 @@
+/**
+ * Expose Vue reactivity and lifecycle on globalThis so that .vue components
+ * that rely on Nuxt auto-imports (ref, computed, etc.) work in Vitest.
+ */
+import {
+  ref,
+  computed,
+  reactive,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  readonly,
+} from 'vue'
+
+Object.assign(globalThis, {
+  ref,
+  computed,
+  reactive,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  readonly,
+})