feat: stubs mounting option

src/mount.ts

@@ -5,6 +5,7 @@ import {
   defineComponent,
   VNodeNormalizedChildren,
   ComponentOptions,
+  transformVNodeArgs,
   Plugin,
   Directive,
   Component,
@@ -15,6 +16,7 @@ import { createWrapper } from './vue-wrapper'
 import { createEmitMixin } from './emitMixin'
 import { createDataMixin } from './dataMixin'
 import { MOUNT_ELEMENT_ID } from './constants'
+import { createStub } from './stub'
 
 type Slot = VNode | string | { render: Function }
 
@@ -29,6 +31,7 @@ interface MountingOptions {
     plugins?: Plugin[]
     mixins?: ComponentOptions[]
     mocks?: Record<string, any>
+    stubs?: Record<any, any>
     provide?: Record<any, any>
     // TODO how to type `defineComponent`? Using `any` for now.
     components?: Record<string, Component | object>
@@ -72,6 +75,7 @@ export function mount(originalComponent: any, options?: MountingOptions) {
 
   // create the wrapper component
   const Parent = defineComponent({
+    name: 'VTU_COMPONENT',
     render() {
       return h(component, props, slots)
     }
@@ -133,6 +137,46 @@ export function mount(originalComponent: any, options?: MountingOptions) {
   const { emitMixin, events } = createEmitMixin()
   vm.mixin(emitMixin)
 
+  // stubs
+  if (options?.global?.stubs) {
+    transformVNodeArgs((args) => {
+      // regular HTML Element. Do not stubs these
+      if (Array.isArray(args) && typeof args[0] === 'string') {
+        return args
+      }
+
+      // don't care about comments/fragments
+      if (typeof args[0] === 'symbol') {
+        return args
+      }
+
+      // do not stub the VTU Parent component
+      if (typeof args[0] === 'object' && args[0]['name'] === 'VTU_COMPONENT') {
+        return args
+      }
+
+      if (
+        typeof args[0] === 'object' &&
+        args[0]['name'] in options?.global?.stubs
+      ) {
+        const name = args[0]['name']
+        // default stub
+        if (options?.global?.stubs[name] === true) {
+          return [createStub({ name: args[0]['name'] })]
+        }
+
+        // custom stub implementation
+        if (typeof options?.global?.stubs[name] === 'object') {
+          return [options?.global?.stubs[name]]
+        }
+      }
+
+      return args
+    })
+  } else {
+    transformVNodeArgs()
+  }
+
   // mount the app!
   const app = vm.mount(el)
 

src/stub.ts

@@ -0,0 +1,12 @@
+import { h } from 'vue'
+
+interface IStubOptions {
+  name?: string
+}
+
+export const createStub = (options: IStubOptions) => {
+  const tag = options.name ? `${options.name}-stub` : 'anonymous-stub'
+  const render = () => h(tag)
+
+  return { name: tag, render }
+}

tests/mountingOptions/stubs.global.spec.ts

@@ -0,0 +1,163 @@
+import { h, ComponentOptions } from 'vue'
+
+import { mount } from '../../src'
+import Hello from '../components/Hello.vue'
+
+describe('mounting options: stubs', () => {
+  it('stubs in a fragment', () => {
+    const Foo = {
+      name: 'Foo',
+      render() {
+        return h('p')
+      }
+    }
+    const Component: ComponentOptions = {
+      render() {
+        return h(() => [h('div'), h(Foo)])
+      }
+    }
+
+    const wrapper = mount(Component, {
+      global: {
+        stubs: {
+          Foo: true
+        }
+      }
+    })
+
+    expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
+  })
+
+  it('prevents lifecycle hooks triggering in a stub', () => {
+    const onBeforeMount = jest.fn()
+    const beforeCreate = jest.fn()
+    const Foo = {
+      name: 'Foo',
+      setup() {
+        onBeforeMount(onBeforeMount)
+        return () => h('div')
+      },
+      beforeCreate
+    }
+    const Comp = {
+      render() {
+        return h(Foo)
+      }
+    }
+
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          Foo: true
+        }
+      }
+    })
+
+    expect(wrapper.html()).toBe('<foo-stub></foo-stub>')
+    expect(onBeforeMount).not.toHaveBeenCalled()
+    expect(beforeCreate).not.toHaveBeenCalled()
+  })
+
+  it('uses a custom stub implementation', () => {
+    const onBeforeMount = jest.fn()
+    const FooStub = {
+      name: 'FooStub',
+      setup() {
+        onBeforeMount(onBeforeMount)
+        return () => h('div', 'foo stub')
+      }
+    }
+    const Foo = {
+      name: 'Foo',
+      render() {
+        return h('div', 'real foo')
+      }
+    }
+
+    const Comp = {
+      render() {
+        return h(Foo)
+      }
+    }
+
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          Foo: FooStub
+        }
+      }
+    })
+
+    expect(onBeforeMount).toHaveBeenCalled()
+    expect(wrapper.html()).toBe('<div>foo stub</div>')
+  })
+
+  it('uses an sfc as a custom stub', () => {
+    const created = jest.fn()
+    const HelloComp = {
+      name: 'Hello',
+      created() {
+        created()
+      },
+      render() {
+        return h('span', 'real implementation')
+      }
+    }
+
+    const Comp = {
+      render() {
+        return h(HelloComp)
+      }
+    }
+
+    const wrapper = mount(Comp, {
+      global: {
+        stubs: {
+          Hello: Hello
+        }
+      }
+    })
+
+    expect(created).not.toHaveBeenCalled()
+    expect(wrapper.html()).toBe(
+      '<div id="root"><div id="msg">Hello world</div></div>'
+    )
+  })
+
+  it('stubs using inline components', () => {
+    const Foo = {
+      name: 'Foo',
+      render() {
+        return h('p')
+      }
+    }
+    const Bar = {
+      name: 'Bar',
+      render() {
+        return h('p')
+      }
+    }
+    const Component: ComponentOptions = {
+      render() {
+        return h(() => [h(Foo), h(Bar)])
+      }
+    }
+
+    const wrapper = mount(Component, {
+      global: {
+        stubs: {
+          Foo: {
+            template: '<span />'
+          },
+          Bar: {
+            render() {
+              return h('div')
+            }
+          }
+        }
+      }
+    })
+
+    expect(wrapper.html()).toBe('<span></span><div></div>')
+  })
+})