fix: render props in stubs

Author: lmiller1990

src/stubs.ts

@@ -18,22 +18,31 @@ import { ComponentInternalInstance } from '@vue/runtime-core'
 
 interface StubOptions {
   name?: string
-  props: any
+  props?: any
+  propsDeclaration: any
 }
 
 function getSlots(ctx: ComponentPublicInstance): Slots | undefined {
   return !config.renderStubDefaultSlot ? undefined : ctx.$slots
 }
 
-export const createStub = ({ name, props }: StubOptions): ComponentOptions => {
+export const createStub = ({
+  name,
+  props,
+  propsDeclaration
+}: StubOptions): ComponentOptions => {
   const anonName = 'anonymous-stub'
   const tag = name ? `${hyphenate(name)}-stub` : anonName
 
   const render = (ctx: ComponentPublicInstance) => {
-    return h(tag, {}, getSlots(ctx))
+    return h(tag, props, getSlots(ctx))
   }
 
-  return defineComponent({ name: name || anonName, render, props })
+  return defineComponent({
+    name: name || anonName,
+    render,
+    props: propsDeclaration
+  })
 }
 
 const createTransitionStub = ({
@@ -95,7 +104,10 @@ export function stubComponents(
     // stub transition by default via config.global.stubs
     if (type === Transition && stubs['transition']) {
       return [
-        createTransitionStub({ name: 'transition-stub', props: undefined }),
+        createTransitionStub({
+          name: 'transition-stub',
+          propsDeclaration: undefined
+        }),
         undefined,
         children
       ]
@@ -106,7 +118,7 @@ export function stubComponents(
       return [
         createTransitionStub({
           name: 'transition-group-stub',
-          props: undefined
+          propsDeclaration: undefined
         }),
         undefined,
         children
@@ -158,7 +170,7 @@ export function stubComponents(
       if (stub === true || shallow) {
         const propsDeclaration = type?.props || {}
         return [
-          createStub({ name, props: propsDeclaration }),
+          createStub({ name, propsDeclaration, props }),
           props,
           children,
           patchFlag,

tests/__snapshots__/shallowMount.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`shallowMount renders props for stubbed component in a snapshot 1`] = `<my-label-stub val="username"></my-label-stub>`;

tests/mountingOptions/stubs.global.spec.ts

@@ -116,7 +116,7 @@ describe('mounting options: stubs', () => {
     })
 
     expect(wrapper.html()).toEqual(
-      '<div><foo-stub class="bar" test-id="foo"></foo-stub></div>'
+      '<div><foo-stub class="bar" test-id="foo" dynamic="[object Object]"></foo-stub></div>'
     )
   })
 

tests/shallowMount.spec.ts

@@ -1,7 +1,41 @@
-import { mount, shallowMount } from '../src'
+import { defineComponent } from 'vue'
+import { mount, shallowMount, VueWrapper } from '../src'
 import ComponentWithChildren from './components/ComponentWithChildren.vue'
 
 describe('shallowMount', () => {
+  it('renders props for stubbed component in a snapshot', () => {
+    expect.addSnapshotSerializer({
+      test(wrapper: VueWrapper<any>) {
+        return '__app' in wrapper
+      },
+      serialize(wrapper: VueWrapper<any>) {
+        return wrapper.html()
+      }
+    })
+
+    const MyLabel = defineComponent({
+      props: ['val'],
+      template: '<label :for="val">{{ val }}</label>'
+    })
+
+    const Component = defineComponent({
+      components: { MyLabel },
+      template: '<MyLabel val="username" />',
+      data() {
+        return {
+          foo: 'bar'
+        }
+      }
+    })
+
+    const wrapper = shallowMount(Component)
+
+    expect(wrapper.html()).toBe(
+      '<my-label-stub val="username"></my-label-stub>'
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
   it('stubs all components automatically using { shallow: true }', () => {
     const wrapper = mount(ComponentWithChildren, { shallow: true })
     expect(wrapper.html()).toEqual(