Vue-test-utils: Invalid behavior of `shallowMount` on testing a child component that uses custom `v-model`

[chenxeed]

Version

1.0.0-beta.25

Reproduction link

https://github.com/chenxeed/reproduce-bug-vue-test-utils

Steps to reproduce

(Best to clone and try this github repo to reproduce the bugs on running the unit test)
https://github.com/chenxeed/reproduce-bug-vue-test-utils

To reproduce:

• Create a child component that uses custom v-model
• Create a parent component that uses the child component and use the v-model to pass the props. Make the props as "required"
• Test the parent component with shallowMount to test if the data passed to the child component through v-model is working or not

What is expected?

The test should able to detect the passed data from the parent component to the child component with custom v-model. This is working in mount, but not shallowMount.

What is actually happening?

The value passed from parent component to child component is not detected, and it shows warning "[Vue warn]: Missing required prop" instead.

---

I need to be able to test this scenario with shallowMount, because I'm testing a Page component that has a lot of child components and I don't want to render all by using mount, since I just want to test the Page components logic and its interface with the child components.

[kfischer-okarin]

Yes, I can also confirm that passing properties via custom v-model to a stubbed component does not work.

[Trainmaster]

I think we have a similar issue using vuedraggable. When updating from 1.0.0-beta.24 to 1.0.0-beta.25 the test suddenly fails with:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
    found in
    ---> <Draggable>

[d-levin]

I just ran into this issue. My child component has defined a custom v-model using https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

In my test I stub the child. The HTML looks like this

<parent>
    <child-stub></child-stub>
</parent>

Despite being stubbed, the child still logs a warning

 console.error node_modules/vue/dist/vue.runtime.common.js:556
    [Vue warn]: Missing required prop: "myCustomProp" 
    (found in <Child>)