diff --git a/packages/runtime-core/__tests__/helpers/useId.spec.ts b/packages/runtime-core/__tests__/helpers/useId.spec.ts index 8277be12d..17fdd24d0 100644 --- a/packages/runtime-core/__tests__/helpers/useId.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useId.spec.ts @@ -95,8 +95,8 @@ describe('useId', () => { 'v:0-0 v:0-1 ' + // inside first async subtree 'v:1-0 v:1-1' // inside second async subtree // assert different async resolution order does not affect id stable-ness - expect(await getOutput(() => factory(10, 20))).toBe(expected) - expect(await getOutput(() => factory(20, 10))).toBe(expected) + expect(await getOutput(() => factory(0, 16))).toBe(expected) + expect(await getOutput(() => factory(16, 0))).toBe(expected) }) test('serverPrefetch', async () => { @@ -140,8 +140,8 @@ describe('useId', () => { 'v:0-0 v:0-1 ' + // inside first async subtree 'v:1-0 v:1-1' // inside second async subtree // assert different async resolution order does not affect id stable-ness - expect(await getOutput(() => factory(10, 20))).toBe(expected) - expect(await getOutput(() => factory(20, 10))).toBe(expected) + expect(await getOutput(() => factory(0, 16))).toBe(expected) + expect(await getOutput(() => factory(16, 0))).toBe(expected) }) test('async setup()', async () => { @@ -192,8 +192,8 @@ describe('useId', () => { 'v:1-0 v:1-1' + // inside second async subtree '' // assert different async resolution order does not affect id stable-ness - expect(await getOutput(() => factory(10, 20))).toBe(expected) - expect(await getOutput(() => factory(20, 10))).toBe(expected) + expect(await getOutput(() => factory(0, 16))).toBe(expected) + expect(await getOutput(() => factory(16, 0))).toBe(expected) }) test('deep nested', async () => { @@ -239,4 +239,46 @@ describe('useId', () => { expect(await getOutput(() => factory())).toBe(expected) expect(await getOutput(() => factory())).toBe(expected) }) + + test('async component inside async setup', async () => { + const factory = ( + delay1: number, + delay2: number, + ): ReturnType => { + const p1 = promiseWithDelay(null, delay1) + const p2 = promiseWithDelay(BasicComponentWithUseId, delay2) + const AsyncInner = defineAsyncComponent(() => p2) + + const AsyncSetup = defineComponent({ + async setup() { + await p1 + return {} + }, + render() { + return h(AsyncInner) + }, + }) + + const app = createApp({ + setup() { + const id1 = useId() + const id2 = useId() + return () => + h(Suspense, null, { + default: h('div', [id1, ' ', id2, ' ', h(AsyncSetup)]), + }) + }, + }) + return [app, [p1, p2]] + } + + const expected = + '
' + + 'v:0 v:1 ' + // root + 'v:0-0-0 v:0-0-1' + // async component inside async setup + '
' + // assert different async resolution order does not affect id stable-ness + expect(await getOutput(() => factory(0, 16))).toBe(expected) + expect(await getOutput(() => factory(16, 0))).toBe(expected) + }) })