test: add tests to ensure isolation between tests

Author: MikeBellika

examples/app-vitest-full/components/GenericStateComponent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { isPositive } = useCounter()
+const { data } = useLazyAsyncData(async () => {
+  return isPositive() ? 'positive' : 'zero-or-negative'
+})
+</script>
+
+<template>
+  <div v-if="data === 'positive'">
+    Positive count
+  </div>
+  <div v-else>
+    Zero or negative count
+  </div>
+</template>

examples/app-vitest-full/components/WatcherComponent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { title } = defineProps<{ title: string }>()
+
+const testState = useState('testState')
+
+watch(testState, (newTestState) => {
+  console.log(`Test state has changed in component ${title}: `, newTestState)
+})
+</script>
+
+<template>
+  <div>
+    {{ title }}
+  </div>
+</template>

examples/app-vitest-full/composables/useCounter.ts

@@ -0,0 +1,12 @@
+export const useCounter = () => {
+  const count = ref(0)
+
+  function isPositive() {
+    return count.value > 0
+  }
+
+  return {
+    count,
+    isPositive,
+  }
+}

examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
-import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
 import { satisfies } from 'semver'
 import { version as nuxtVersion } from 'nuxt/package.json'
 
@@ -25,11 +25,13 @@ import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
 import ComponentWithReservedProp from '~/components/ComponentWithReservedProp.vue'
 import ComponentWithReservedState from '~/components/ComponentWithReservedState.vue'
 import ComponentWithImports from '~/components/ComponentWithImports.vue'
+import GenericStateComponent from '~/components/GenericStateComponent.vue'
 
 import { BoundAttrs } from '#components'
 import DirectiveComponent from '~/components/DirectiveComponent.vue'
 import CustomComponent from '~/components/CustomComponent.vue'
 import WrapperElement from '~/components/WrapperElement.vue'
+import WatcherComponent from '~/components/WatcherComponent.vue'
 
 const formats = {
   ExportDefaultComponent,
@@ -454,3 +456,81 @@ it('element should be changed', async () => {
 
   expect(component.element.tagName).toBe('SPAN')
 })
+
+describe('composable state isolation', () => {
+  const { useCounterMock } = vi.hoisted(() => {
+    return {
+      useCounterMock: vi.fn(() => {
+        return {
+          isPositive: (): boolean => false,
+        }
+      }),
+    }
+  })
+
+  mockNuxtImport('useCounter', () => {
+    return useCounterMock
+  })
+
+  it('shows zero or negative state by default', async () => {
+    const component = await mountSuspended(GenericStateComponent)
+    expect(component.text()).toMatchInlineSnapshot('"Zero or negative count"')
+  })
+
+  it('shows positive state when counter is positive', async () => {
+    useCounterMock.mockRestore()
+    useCounterMock.mockImplementation(() => ({
+      isPositive: () => true,
+    }))
+    const component = await mountSuspended(GenericStateComponent)
+    expect(component.text()).toMatchInlineSnapshot('"Positive count"')
+  })
+})
+
+describe('watcher cleanup validation', () => {
+  let watcherCallCount = 0
+  beforeEach(() => {
+    watcherCallCount = 0
+    // Mock console.log to count watcher calls
+    vi.spyOn(console, 'log').mockImplementation((message) => {
+      if (typeof message === 'string' && message.includes('Test state has changed')) {
+        watcherCallCount++
+      }
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('mounts component in test 1', async () => {
+    await mountSuspended(WatcherComponent, {
+      props: {
+        title: 'Component 1',
+      },
+    })
+
+    expect(watcherCallCount).toBe(0) // No state changes yet
+  })
+
+  it('mounts component in test 2 and validates watcher cleanup', async () => {
+    await mountSuspended(WatcherComponent, {
+      props: {
+        title: 'Component 2',
+      },
+    })
+
+    // Reset counter after mounting
+    watcherCallCount = 0
+
+    // Change the state - this should only trigger Component 2's watcher
+    const state = useState('testState')
+    state.value = 'new state'
+
+    await nextTick()
+
+    // Before the fix: would see 2 watcher calls (Component 1 and Component 2)
+    // After the fix: should only see 1 watcher call (Component 2 only)
+    expect(watcherCallCount).toBe(1)
+  })
+})