fix(runtime-utils): avoid missing render warn on reject render + suspend helpers (#1520)

Author: yamachi4416

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

@@ -1,11 +1,15 @@
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { Suspense } from 'vue'
 import { mount } from '@vue/test-utils'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { NuxtErrorBoundary } from '#components'
 
 describe('mountSuspended handle error', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   describe('vue/test-utils compatibility', () => {
     it('throws on mounted', async () => {
       const TestComponent = defineComponent({
@@ -288,5 +292,33 @@ describe('mountSuspended handle error', () => {
 
       expect((await mountSuspended(TestComponent)).text()).toBe('error')
     })
+
+    it('throws on router', async () => {
+      const setupFn = vi.fn()
+      const consoleWarn = vi.spyOn(console, 'warn')
+
+      useRouter().addRoute({
+        path: '/throws-on-router',
+        component: h('div', 'hello'),
+        meta: {
+          middleware: [
+            () => abortNavigation({ message: 'throws on router' }),
+          ],
+        },
+      })
+
+      const TestComponent = defineComponent({
+        template: '<div></div>',
+        setup: setupFn,
+      })
+
+      await expect(() => mountSuspended(TestComponent, { route: 'throws-on-router' })).rejects.toThrow('throws on router')
+      await nextTick()
+
+      expect(setupFn).not.toBeCalled()
+      expect(
+        consoleWarn.mock.calls.flat().map(String).join('\n'),
+      ).not.toContain('[Vue warn]: Component is missing template or render function')
+    })
   })
 })

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

@@ -16,6 +16,7 @@ function testWrapHtml(html: string) {
 describe('renderSuspended handle error', () => {
   afterEach(() => {
     cleanup()
+    vi.restoreAllMocks()
   })
 
   describe('@testing-library/vue compatibility', () => {
@@ -302,5 +303,33 @@ describe('renderSuspended handle error', () => {
 
       expect((await renderSuspended(TestComponent)).container.textContent).toBe('error')
     })
+
+    it('throws on router', async () => {
+      const setupFn = vi.fn()
+      const consoleWarn = vi.spyOn(console, 'warn')
+
+      useRouter().addRoute({
+        path: '/throws-on-router',
+        component: h('div', 'hello'),
+        meta: {
+          middleware: [
+            () => abortNavigation({ message: 'throws on router' }),
+          ],
+        },
+      })
+
+      const TestComponent = defineComponent({
+        template: '<div></div>',
+        setup: setupFn,
+      })
+
+      await expect(() => renderSuspended(TestComponent, { route: 'throws-on-router' })).rejects.toThrow('throws on router')
+      await nextTick()
+
+      expect(setupFn).not.toBeCalled()
+      expect(
+        consoleWarn.mock.calls.flat().map(String).join('\n'),
+      ).not.toContain('[Vue warn]: Component is missing template or render function')
+    })
   })
 })

src/runtime-utils/mount.ts

@@ -180,6 +180,7 @@ export async function mountSuspended<T>(
               {
                 onResolve: () =>
                   nextTick().then(() => {
+                    if (isMountSettled) return
                     isMountSettled = true;
                     (vm as unknown as AugmentedVueInstance).setupState = setupState;
                     (vm as unknown as AugmentedVueInstance).__setProps = (props: Record<string, unknown>) => {
@@ -192,6 +193,7 @@ export async function mountSuspended<T>(
                 default: () =>
                   h({
                     name: 'MountSuspendedHelper',
+                    render: () => '',
                     async setup() {
                       const router = useRouter()
                       await router.replace(route)

src/runtime-utils/render.ts

@@ -168,6 +168,7 @@ export async function renderSuspended<T>(component: T, options?: RenderSuspendeO
                 {
                   onResolve: () =>
                     nextTick().then(() => {
+                      if (isMountSettled) return
                       isMountSettled = true;
                       (utils as unknown as AugmentedVueInstance).setupState = setupState
                       utils.rerender = async (props) => {
@@ -181,6 +182,7 @@ export async function renderSuspended<T>(component: T, options?: RenderSuspendeO
                   default: () =>
                     h({
                       name: 'RenderHelper',
+                      render: () => '',
                       async setup() {
                         const router = useRouter()
                         await router.replace(route)