Calling .props() on a child component returns props for the parent

[bkuzma]

Subject of the issue

Let's say you have a Vue component Foo which simply renders another component Bar. If you shallow mount Foo, then find() Bar via a data attribute and call props() on the resulting wrapper, you'll get the props of Foo rather than Bar.

Steps to reproduce

I'm not sure how to set up a code sandbox with a test runner but here's a simplified example:

# Foo.vue

<template>
    <Bar data-testid="bar" :bar-thing="fooThing"></Bar>
</template>

<script>
import Bar from '@/components/Bar'

export default {
    components: {
        Bar,
    },
    props: {
        fooThing: {
            type: Number,
            default: 0,
        },
    },
}
</script>

// Foo.spec.js

it('sets props correctly on Bar', () => {
    const wrapper = shallowMount(Foo, {
        propsData: {
            fooThing: 100,
        },
    })

    console.log(wrapper.find('[data-testid="bar"]').props())
})

Expected behaviour

You would expect to see Bar's props logged to the console:

{ barThing: 100 }

Actual behaviour

Instead you see Foo's props logged to the console:

{ fooThing: 100 }

Possible Solution

I noticed that if Foo is changed so that it wraps the Bar instance in a div, we get the results we expect:

<template>
    <div>
        <Bar data-testid="bar" :bar-thing="4"></Bar>
    </div>
</template>

Alternatively, if we find Bar by importing it and using findComponent(Bar), we get the results we expect.

Neither of these solutions is great in my view because the first requires extra markup and the second will give us issues if we have more than one instance of Bar and we want to use a data attribute selector. In my case, my Bar is actually a Vuetify v-dialog component, and when I try to import it and use findComponent, I get babel issues in Jest.