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

Djaler · lmiller1990 · web-flow · commit 9bfe35d31466 · 2023-01-27T12:01:31.000+10:00
* fix: stubs components inlined in render function

* chore: fix linting

Co-authored-by: Lachlan Miller &lt;lachlan.miller.1990@outlook.com&gt;
diff --git a/packages/create-instance/create-component-stubs.js b/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) {
diff --git a/packages/create-instance/patch-create-element.js b/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
diff --git a/test/specs/mounting-options/stubs.spec.js b/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)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -43,10 +43,10 @@ function resolveComponent(obj: Object, component: string): Object {`
`43`	`43`	`)`
`44`	`44`	`}`
`45`	`45`
`46`		`-function getCoreProperties(componentOptions: Component): Object {`
	`46`	`+function getCoreProperties(componentOptions: Component, name?: string): Object {`
`47`	`47`	`return {`
`48`	`48`	`attrs: componentOptions.attrs,`
`49`		`- name: componentOptions.name,`
	`49`	`+ name: componentOptions.name \|\| name,`
`50`	`50`	`model: componentOptions.model,`
`51`	`51`	`props: componentOptions.props,`
`52`	`52`	`on: componentOptions.on,`
`@@ -108,7 +108,7 @@ export function createStubFromComponent(`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`return {`
`111`		`- ...getCoreProperties(componentOptions),`
	`111`	`+ ...getCoreProperties(componentOptions, name),`
`112`	`112`	`$_vueTestUtils_original: originalComponent,`
`113`	`113`	`$_doNotStubChildren: true,`
`114`	`114`	`render(h, context) {`