Merge branch 'dev' of https://github.com/vuejs/vue-test-utils into dev

vuejs · Jan 27, 2023 · 4fb9dec · 4fb9dec
2 parents be88c2b + 9bfe35d
commit 4fb9dec
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 161 deletions.
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
@@ -9,10 +9,7 @@
           </p>
           <p>
             To read docs for Vue Test Utils for Vue 3,
-            <a
-              href="https://test-utils.vuejs.org/"
-              v-text="'click here'"
-            />.
+            <a href="https://test-utils.vuejs.org/" v-text="'click here'" />.
           </p>
         </div>
       </div>

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/packages/shared/validators.js b/packages/shared/validators.js
@@ -33,7 +33,7 @@ export function isVueComponent(c: any): boolean {
     return true
   }
 
-  if (c === null || typeof c !== 'object') {
+  if (!isPlainObject(c)) {
     return false
   }
 
@@ -63,7 +63,7 @@ export function componentNeedsCompiling(component: Component): boolean {
 
 export function isRefSelector(refOptionsObject: any): boolean {
   if (
-    typeof refOptionsObject !== 'object' ||
+    !isPlainObject(refOptionsObject) ||
     Object.keys(refOptionsObject || {}).length !== 1
   ) {
     return false
@@ -73,7 +73,7 @@ export function isRefSelector(refOptionsObject: any): boolean {
 }
 
 export function isNameSelector(nameOptionsObject: any): boolean {
-  if (typeof nameOptionsObject !== 'object' || nameOptionsObject === null) {
+  if (!isPlainObject(nameOptionsObject)) {
     return false
   }
 
@@ -89,7 +89,7 @@ export function isDynamicComponent(c: any) {
 }
 
 export function isComponentOptions(c: any) {
-  return c !== null && typeof c === 'object' && (c.template || c.render)
+  return isPlainObject(c) && (c.template || c.render)
 }
 
 export function isFunctionalComponent(c: any) {

diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js
@@ -19,6 +19,7 @@ import {
   warnDeprecated,
   isVueWrapper
 } from 'shared/util'
+import { isPlainObject } from 'shared/validators'
 import { isElementVisible } from 'shared/is-visible'
 import find from './find'
 import createWrapper from './create-wrapper'
@@ -719,8 +720,7 @@ export default class Wrapper implements BaseWrapper {
     Object.keys(data).forEach(key => {
       // Don't let people set entire objects, because reactivity won't work
       if (
-        typeof data[key] === 'object' &&
-        data[key] !== null &&
+        isPlainObject(data[key]) &&
         // $FlowIgnore : Problem with possibly null this.vm
         data[key] === this.vm[key]
       ) {

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)
+  })
 })