fix(runtime-utils): support defineModel in mountSuspended

nuxt · Nov 9, 2024 · 9623bf0 · 9623bf0
1 parent 89c2e07
commit 9623bf0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts
@@ -99,15 +99,13 @@ describe('mountSuspended', () => {
     `)
   })
 
-  // This test works (you can delete it later)
   it('can receive emitted events from components using defineModel', () => {
     const component = mount(WrapperTests)
     component.find('button#changeModelValue').trigger('click')
     expect(component.emitted()).toHaveProperty('update:modelValue')
   })
 
-  // FIXME: fix this failing test
-  it.todo('can receive emitted events from components mounted within nuxt suspense using defineModel', async () => {
+  it('can receive emitted events from components mounted within nuxt suspense using defineModel', async () => {
     const component = await mountSuspended(WrapperTests)
     component.find('button#changeModelValue').trigger('click')
     expect(component.emitted()).toHaveProperty('update:modelValue')

diff --git a/src/runtime-utils/mount.ts b/src/runtime-utils/mount.ts
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
 import type { ComponentMountingOptions } from '@vue/test-utils'
-import { Suspense, h, isReadonly, nextTick, reactive, unref } from 'vue'
+import { Suspense, h, isReadonly, nextTick, reactive, unref, getCurrentInstance } from 'vue'
 import type { DefineComponent, SetupContext } from 'vue'
 import { defu, createDefu } from 'defu'
 import type { RouteLocationRaw } from 'vue-router'
@@ -116,6 +116,11 @@ export async function mountSuspended<T>(
                         ...component,
                         render: render
                           ? function (this: unknown, _ctx: Record<string, unknown>, ...args: unknown[]) {
+                            // When using defineModel, getCurrentInstance().emit is executed internally. it needs to override.
+                            const currentInstance = getCurrentInstance()
+                            if (currentInstance) {
+                              currentInstance.emit = setupContext.emit
+                            }
                             // Set before setupState set to allow asyncData to overwrite data
                             if (data && typeof data === 'function') {
                               // @ts-expect-error error TS2554: Expected 1 arguments, but got 0