feat(stubs): render function props deterministically (#1834)

Author: MitchLillie

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

@@ -18,6 +18,8 @@ import {
 } from '../shared/validators'
 import { compileTemplate } from '../shared/compile-template'
 
+const FUNCTION_PLACEHOLDER = '[Function]'
+
 function isVueComponentStub(comp): boolean {
   return (comp && comp.template) || isVueComponent(comp)
 }
@@ -116,13 +118,13 @@ export function createStubFromComponent(
           ? {
               ...context.data,
               attrs: {
-                ...context.props,
+                ...shapeStubProps(context.props),
                 ...context.data.attrs
               }
             }
           : {
               attrs: {
-                ...this.$props
+                ...shapeStubProps(this.$props)
               }
             },
         context
@@ -136,6 +138,27 @@ export function createStubFromComponent(
   }
 }
 
+function shapeStubProps(props) {
+  const shapedProps: Object = {}
+  for (const propName in props) {
+    if (typeof props[propName] === 'function') {
+      shapedProps[propName] = FUNCTION_PLACEHOLDER
+      continue
+    }
+
+    if (Array.isArray(props[propName])) {
+      shapedProps[propName] = props[propName].map(value => {
+        return typeof value === 'function' ? FUNCTION_PLACEHOLDER : value
+      })
+      continue
+    }
+
+    shapedProps[propName] = props[propName]
+  }
+
+  return shapedProps
+}
+
 // DEPRECATED: converts string stub to template stub.
 function createStubFromString(templateString: string, name: string): Component {
   warnDeprecated('Using a string for stubs')

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

@@ -639,4 +639,69 @@ describeWithShallowAndMount('options.stub', mountingMethod => {
     )
     config.showDeprecationWarnings = false
   })
+
+  it('should render functions in props as a deterministic string', () => {
+    const ChildComponent = {
+      name: 'child-component',
+      props: {
+        foo: {
+          type: Function,
+          required: true
+        },
+        bar: {
+          type: Array,
+          required: true
+        },
+        qux: {
+          type: String,
+          required: true
+        }
+      },
+      template: '<div />'
+    }
+
+    const FunctionalChildComponent = {
+      ...ChildComponent,
+      name: 'functional-child-component',
+      functional: true
+    }
+
+    const ParentComponent = {
+      components: {
+        ChildComponent,
+        FunctionalChildComponent
+      },
+      name: 'parent-component',
+      template: `
+        <div>
+          <child-component
+            :foo="foo"
+            :bar="bar"
+            :qux="qux" />
+          <functional-child-component
+            :foo="foo"
+            :bar="bar"
+            :qux="qux" />
+        </div>
+      `,
+      data() {
+        return {
+          foo: () => 42,
+          bar: [1, 'string', () => true],
+          qux: 'qux'
+        }
+      }
+    }
+
+    const wrapper = mountingMethod(ParentComponent, {
+      stubs: ['child-component', 'functional-child-component']
+    })
+
+    expect(wrapper.html()).toEqual(
+      `<div>\n` +
+        `  <child-component-stub foo="[Function]" bar="1,string,[Function]" qux="qux"></child-component-stub>\n` +
+        `  <functional-child-component-stub foo="[Function]" bar="1,string,[Function]" qux="qux"></functional-child-component-stub>\n` +
+        `</div>`
+    )
+  })
 })