feat: add ability to stub teleport (#1087)

* feat: ✨ Add stubbing support for teleport

* refactor: ♻️ Disable teleport stub by default

* docs: 📝 Add note about stubbing teleport

* fix: 🐛 Fix children warning for stubbed teleport

* chore: lint

Co-authored-by: Lachlan Miller <[email protected]>

Author: TheDutchCoder

docs/guide/advanced/teleport.md

@@ -4,6 +4,10 @@ Vue 3 comes with a new built-in component: `<Teleport>`, which allows components
 
 Here are some strategies and techniques for testing components using `<Teleport>`.
 
+::: tip
+If you want to test the rest of your component, ignoring teleport, you can stub `teleport` by passing `teleport: true` in the [global stubs option](../../api/#global-stubs).
+:::
+
 ## Example
 
 In this example we are testing a `<Navbar>` component. It renders a `<Signup>` component inside of a `<Teleport>`. The `target` prop of `<Teleport>` is an element located outside of the `<Navbar>` component.

src/stubs.ts

@@ -2,6 +2,7 @@ import {
   transformVNodeArgs,
   Transition,
   TransitionGroup,
+  Teleport,
   h,
   ComponentPublicInstance,
   defineComponent,
@@ -74,6 +75,18 @@ const createTransitionStub = ({ name }: StubOptions) => {
   })
 }
 
+const createTeleportStub = ({ name }: StubOptions) => {
+  const render = (ctx: ComponentPublicInstance) => {
+    return h(name, {}, ctx.$slots)
+  }
+
+  return defineComponent({
+    name,
+    compatConfig: { MODE: 3, RENDER_FUNCTION: false },
+    render
+  })
+}
+
 const resolveComponentStubByName = (componentName: string, stubs: Stubs) => {
   if (Array.isArray(stubs) && stubs.length) {
     // ['Foo', 'Bar'] => { Foo: true, Bar: true }
@@ -158,7 +171,7 @@ export function stubComponents(
 
   transformVNodeArgs((args, instance: ComponentInternalInstance | null) => {
     const [nodeType, props, children, patchFlag, dynamicProps] = args
-    const type = nodeType as VNodeTypes
+    const type = nodeType as VNodeTypes | typeof Teleport
 
     // stub transition by default via config.global.stubs
     if (type === Transition && 'transition' in stubs && stubs['transition']) {
@@ -186,6 +199,17 @@ export function stubComponents(
       ]
     }
 
+    // stub teleport by default via config.global.stubs
+    if (type === Teleport && 'teleport' in stubs && stubs['teleport']) {
+      return [
+        createTeleportStub({
+          name: 'teleport-stub'
+        }),
+        undefined,
+        () => children
+      ]
+    }
+
     if (isComponent(type) || isFunctionalComponent(type)) {
       if (shouldNotStub(type)) {
         return args

tests/mountingOptions/global.stubs.spec.ts

@@ -419,6 +419,34 @@ describe('mounting options: stubs', () => {
     expect(wrapper.find('#content').exists()).toBe(true)
   })
 
+  it('does not stub teleport by default', () => {
+    const Comp = {
+      template: `<teleport to="body"><div id="content" /></teleport>`
+    }
+    const wrapper = mount(Comp)
+
+    expect(wrapper.html()).toBe(
+      '<!--teleport start-->\n' + '<!--teleport end-->'
+    )
+  })
+
+  it('opts in to stubbing teleport ', () => {
+    const Comp = {
+      template: `<teleport to="body"><div id="content" /></teleport>`
+    }
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    })
+
+    expect(wrapper.html()).toBe(
+      '<teleport-stub>\n' + '  <div id="content"></div>\n' + '</teleport-stub>'
+    )
+  })
+
   it('stubs component by key prior before name', () => {
     const MyComponent = defineComponent({
       name: 'MyComponent',