diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index a1fb8cde33f..797fd2c8e57 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -1284,6 +1284,84 @@ describe('SSR hydration', () => { resolve({}) }) + //#12362 + test('nested async wrapper', async () => { + const Toggle = defineAsyncComponent( + () => + new Promise(r => { + r( + defineComponent({ + setup(_, { slots }) { + const show = ref(false) + onMounted(() => { + nextTick(() => { + show.value = true + }) + }) + return () => + withDirectives( + h('div', null, [renderSlot(slots, 'default')]), + [[vShow, show.value]], + ) + }, + }) as any, + ) + }), + ) + + const Wrapper = defineAsyncComponent(() => { + return new Promise(r => { + r( + defineComponent({ + render(this: any) { + return renderSlot(this.$slots, 'default') + }, + }) as any, + ) + }) + }) + + const count = ref(0) + const fn = vi.fn() + const Child = { + setup() { + onMounted(() => { + fn() + count.value++ + }) + return () => h('div', count.value) + }, + } + + const App = { + render() { + return h(Toggle, null, { + default: () => + h(Wrapper, null, { + default: () => + h(Wrapper, null, { + default: () => h(Child), + }), + }), + }) + }, + } + + const root = document.createElement('div') + root.innerHTML = await renderToString(h(App)) + expect(root.innerHTML).toMatchInlineSnapshot( + `"
"`, + ) + + createSSRApp(App).mount(root) + await nextTick() + await nextTick() + expect(root.innerHTML).toMatchInlineSnapshot( + `"