Ver código fonte

test(teleport): test for accessing template ref inside teleport in mounted

Evan You 1 ano atrás
pai
commit
4c03ab2224

+ 23 - 1
packages/runtime-core/__tests__/components/Teleport.spec.ts

@@ -59,7 +59,7 @@ describe('renderer: teleport', () => {
           <div>
           <div>
             <async />
             <async />
             <teleport defer to="#target-suspense">
             <teleport defer to="#target-suspense">
-              <div ref="tel">teleported</div>
+              <div>teleported</div>
             </teleport>
             </teleport>
             <div id="target-suspense" />
             <div id="target-suspense" />
           </div>
           </div>
@@ -705,5 +705,27 @@ describe('renderer: teleport', () => {
       await nextTick()
       await nextTick()
       expect(root.innerHTML).toMatchInlineSnapshot('"<!--v-if-->"')
       expect(root.innerHTML).toMatchInlineSnapshot('"<!--v-if-->"')
     })
     })
+
+    test('accessing template refs inside teleport', async () => {
+      const target = nodeOps.createElement('div')
+      const tRef = ref()
+      let tRefInMounted
+
+      render(
+        h({
+          render: () => [
+            h(Teleport, { to: target }, h('div', { ref: tRef }, 'teleported')),
+            h('div', 'root'),
+          ],
+          mounted() {
+            tRefInMounted = tRef.value
+          },
+        }),
+        nodeOps.createElement('div'),
+      )
+
+      // children[0] is the start anchor
+      expect(tRefInMounted).toBe(target.children[1])
+    })
   }
   }
 })
 })