mount fails when propsData contains a 'child' property

[astlouisf]

mount fails when propsData contains a 'child' property

mount fails when trying to mount a component with the following mounting options

const options = {
    propsData: { child: 'aBc' }
};

Steps to reproduce

I forked the project and added a failing test.

astlouisf/vue-test-utils@47fd65e (branch bug-propsData-child-attribute)

Simply clone the repo and execute yarn test:unit

Expected behaviour

A component should be able to receive props containing a 'child' property.

Actual behaviour

Mounting the component fails with error

    TypeError: Cannot read property 'elm' of undefined

      44 |   ) {
      45 |     const vnode = node instanceof Element ? null : node
    > 46 |     const element = node instanceof Element ? node : node.elm
         |                                                           ^
      47 |     // Prevent redefine by VueWrapper
      48 |     if (!isVueWrapper) {
      49 |       // $FlowIgnore : issue with defineProperty

      at new Wrapper (packages/test-utils/src/wrapper.js:46:59)
      at new VueWrapper (packages/test-utils/src/vue-wrapper.js:8:5)
      at createWrapper (packages/test-utils/src/create-wrapper.js:14:21)
      at mount (packages/test-utils/src/mount.js:52:10)
      at shallowMount (packages/test-utils/src/shallow-mount.js:10:10)
      at Object.<anonymous> (test/specs/mounting-options/propsData.spec.js:52:15)

Part of the error happens in createWrapper where componentInstance gets assigned dataProps.child instead of the actual node child.

[astlouisf]

After investigating further, what happens is that createWrapper

  const componentInstance = node.child
  if (componentInstance) {
    ...
  }
  ...

tries to distinguish between a VNode and a Component by relying on the presence of a child property on VNode. However the way that Vue merges props inside a component allows node.child to be defined for Components.

Suggestions

1. Use a property that is definitely on Component and not on VNode to distinguish between the two.
2. Pass additional information to createWrapper to easily distinguish Component from VNode
3. (If 1 and 2 are not feasible) Use node.componentInstance instead of child (which was deprecated 4 years ago) and add a warning against the use of componentInstance in props.