Repository: vuejs/vue-next
File: packages/runtime-core/__tests__/components/Suspense.spec.ts (TypeScript)

Code before:
        },
      }

      const root = nodeOps.createElement('div')
      render(h(Comp), root)
      await nextTick()
      await Promise.all(deps)

      expect(serializeInner(root)).toBe(
        `<div>111</div><div>222</div><div>333</div>`,
      )

      items.value = [
        { id: 4, name: '444' },
        { id: 5, name: '555' },
        { id: 6, name: '666' },
      ]
      await nextTick()
      await Promise.all(deps)
      expect(serializeInner(root)).toBe(
        `<div>444</div><div>555</div><div>666</div>`,
      )
    })

    // #14173
    test('nested async components with v-for + only Suspense and async component wrappers', async () => {
      const CompAsyncSetup = defineAsyncComponent({
        props: ['item', 'id'],
        render(ctx: any) {
          return h('div', ctx.id + '--' + ctx.item.name)
        },
      })
      const items = ref([
        { id: 1, name: '111' },
        { id: 2, name: '222' },
        { id: 3, name: '333' },
      ])
      const Comp = {
        props: ['id'],
        setup(props: any) {
          return () =>
            h(Suspense, null, {
              default: () =>
                h(
                  Fragment,
                  null,
                  items.value.map(item =>
                    h(CompAsyncSetup, {
                      item,
                      key: item.id,
                      id: 'foo:' + props.id,

Review comment (suggestion):
If you want an even smaller reproduction:

```js
const items = ref([4, 5, 6]);
const App = {
  setup() {
    const loader = async () => defineComponent({
      props: {item: Number},
      setup(props) {
        return () => h('div', props.item)
      }
    });

    const LazyTest = defineAsyncComponent({
      loader: async () => defineComponent({
        setup(_, ctx) {
          const comp = defineAsyncComponent({
            loader: loader,
          })
          return () => h(comp, ctx.attrs)
        }
      }),
    })

    return () =>
      h(Suspense, null, {
        default: () =>
          h(
            Fragment,
            null,
            items.value.map(item =>
              h(LazyTest, {id: item, key: item}),
            ),
          ),
      })
  },
}

const root = nodeOps.createElement('div')
render(h(App), root)
await nextTick()
await Promise.all(deps)
await Promise.all(deps)

expect(serializeInner(root)).toBe(
  `<div>4</div><div>5</div><div>6</div>`,
)

items.value = [1,2,3]
await nextTick()
await Promise.all(deps)
await Promise.all(deps)
expect(serializeInner(root)).toBe(
  `<div>1</div><div>2</div><div>3</div>`,
)
````


Code after:
        },
      }

      const root = nodeOps.createElement('div')
      render(h(Comp), root)
      await nextTick()
      await Promise.all(deps)

      expect(serializeInner(root)).toBe(
        `<div>111</div><div>222</div><div>333</div>`,
      )

      items.value = [
        { id: 4, name: '444' },
        { id: 5, name: '555' },
        { id: 6, name: '666' },
      ]
      await nextTick()
      await Promise.all(deps)
      expect(serializeInner(root)).toBe(
        `<div>444</div><div>555</div><div>666</div>`,
      )
    })

    // #14173
    test('nested async components with v-for + only Suspense and async component wrappers', async () => {
      const CompAsyncSetup = defineAsyncComponent({
        props: ['item', 'id'],
        render(ctx: any) {
          return h('div', ctx.id + '-' + ctx.item.name)
        },
      })
      const items = ref([
        { id: 1, name: 'a' },
        { id: 2, name: 'b' },
        { id: 3, name: 'c' },
      ])
      const Comp = {
        props: ['id'],
        setup(props: any) {
          return () =>
            h(Suspense, null, {
              default: () =>
                h(
                  Fragment,
                  null,
                  items.value.map(item =>
                    h(CompAsyncSetup, {
                      item,
                      key: item.id,
                      id: props.id,