fix: stubs components inlined in render function (#2017)

* fix: stubs components inlined in render function

* chore: fix linting

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

Author: Djaler

packages/create-instance/create-component-stubs.js

@@ -43,10 +43,10 @@ function resolveComponent(obj: Object, component: string): Object {
   )
 }
 
-function getCoreProperties(componentOptions: Component): Object {
+function getCoreProperties(componentOptions: Component, name?: string): Object {
   return {
     attrs: componentOptions.attrs,
-    name: componentOptions.name,
+    name: componentOptions.name || name,
     model: componentOptions.model,
     props: componentOptions.props,
     on: componentOptions.on,
@@ -108,7 +108,7 @@ export function createStubFromComponent(
   }
 
   return {
-    ...getCoreProperties(componentOptions),
+    ...getCoreProperties(componentOptions, name),
     $_vueTestUtils_original: originalComponent,
     $_doNotStubChildren: true,
     render(h, context) {

packages/create-instance/patch-create-element.js

@@ -68,8 +68,16 @@ export function patchCreateElement(_Vue, stubs, stubAllComponents) {
       }
 
       if (isConstructor(el) || isComponentOptions(el)) {
+        const componentOptions = isConstructor(el) ? el.options : el
+        const elName = componentOptions.name
+
+        const stubbedComponent = resolveComponent(elName, stubs)
+        if (stubbedComponent) {
+          return originalCreateElement(stubbedComponent, ...args)
+        }
+
         if (stubAllComponents) {
-          const stub = createStubFromComponent(el, el.name || 'anonymous', _Vue)
+          const stub = createStubFromComponent(el, elName || 'anonymous', _Vue)
           return originalCreateElement(stub, ...args)
         }
         const Constructor = shouldExtend(el, _Vue) ? extend(el, _Vue) : el

test/specs/mounting-options/stubs.spec.js

@@ -704,4 +704,90 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
         `</div>`
     )
   })
+
+  it('stubs component inlined in render function with custom stub', () => {
+    let childComponentCreated = false
+    let childComponent2Created = false
+    const ChildComponent = Vue.extend({
+      name: 'child-component',
+      template: '<div />',
+      created() {
+        childComponentCreated = true
+      }
+    })
+    const ChildComponent2 = {
+      name: 'child-component-2',
+      template: '<div />',
+      created() {
+        childComponent2Created = true
+      }
+    }
+
+    const ParentComponent = {
+      name: 'parent-component',
+      render(h) {
+        return h('div', [h(ChildComponent), h(ChildComponent2)])
+      }
+    }
+
+    const wrapper = mountingMethod(ParentComponent, {
+      stubs: {
+        ChildComponent: {
+          name: 'child-component',
+          template: '<div class="stub" />'
+        },
+        ChildComponent2: {
+          name: 'child-component-2',
+          template: '<div class="stub-2" />'
+        }
+      }
+    })
+
+    expect(childComponentCreated).toBe(false)
+    expect(childComponent2Created).toBe(false)
+
+    expect(wrapper.find('.stub').exists()).toBe(true)
+    expect(wrapper.find('.stub-2').exists()).toBe(true)
+    expect(wrapper.find(ChildComponent).exists()).toBe(true)
+    expect(wrapper.find(ChildComponent2).exists()).toBe(true)
+  })
+
+  it('stubs component inlined in render function with default stub', () => {
+    let childComponentCreated = false
+    let childComponent2Created = false
+    const ChildComponent = Vue.extend({
+      name: 'child-component',
+      template: '<div />',
+      created() {
+        childComponentCreated = true
+      }
+    })
+    const ChildComponent2 = {
+      name: 'child-component-2',
+      template: '<div />',
+      created() {
+        childComponent2Created = true
+      }
+    }
+
+    const ParentComponent = {
+      name: 'parent-component',
+      render(h) {
+        return h('div', [h(ChildComponent), h(ChildComponent2)])
+      }
+    }
+
+    const wrapper = mountingMethod(ParentComponent, {
+      stubs: {
+        ChildComponent: true,
+        ChildComponent2: true
+      }
+    })
+
+    expect(childComponentCreated).toBe(false)
+    expect(childComponent2Created).toBe(false)
+
+    expect(wrapper.find(ChildComponent).exists()).toBe(true)
+    expect(wrapper.find(ChildComponent2).exists()).toBe(true)
+  })
 })