findAll with Vue extended component causing errors

[sygrinberg]

When I use the "findAll" function on a component that extends another component using "extends" attribute I get this error:
undefined is not a constructor (evaluating 'Object.entries(refOptionsObject)') isRefSelector@webpack:///node_modules/vue-test-utils/dist/vue-test-utils.js:232:0 <- index.js:751:31 getSelectorType@webpack:///node_modules/vue-test-utils/dist/vue-test-utils.js:265:0 <- index.js:784:20 getSelectorTypeOrThrow@webpack:///node_modules/vue-test-utils/dist/vue-test-utils.js:271:0 <- index.js:790:37 findAll@webpack:///node_modules/vue-test-utils/dist/vue-test-utils.js:895:0 <- index.js:1414:44

Here is an example code of the components I am using:
file CompA.vue

<template>
 some HTML...
</template>

<script>
  export default {
     .... some JS code
  }
</script>

file CompB.vue

<script>
  import CompA from './CompA'
  export default {
    extends: CompA,
     .... some JS code
  }
</script>

After debugging what happens, I found that "findAll" on CompB doesn't refer to is as a Vue component because in the "isVueComponent" CompB doesn't have "render" method.

[wtho]

I am not sure how the component should extend another component's template. The API is not very clear about this:

Allows declaratively extending another component [...] without having to use Vue.extend.

The Vue.js Extend Test does not test potentially inherited templates.

On the other hand it claims to be a shortcut for Vue.extend, which clearly should inherit templates.

---

Other findings:

This gives me the error TypeError: Cannot read property 'html' of undefined:

const TestComponent = {
  template: '<div><a>123</a></div>'
}

mount(Vue.extend(TestComponent)).html()

On the other hand the error TypeError: Cannot convert undefined or null to object with this:

mount({
  extend: {
    template: '<div><a>123</a></div>'
  }
}).html()

[38elements]

These test is success.

component.vue

<template>
  <p>
    {{ foo }}
  </p>
</template>

<script>
  export default {
    name: 'component',
    data () {
      return {
        foo: 'foo',
      }
    },
    methods: {
      baz() {
        return 'baz'
      }
    }
  }
</script>

component1.vue

<template>
  <div><div>{{ foo }}</div><div>{{ bar }}</div><div>{{ baz() }}</div></div>
</template>

<script>
  export default {
    name: 'component',
    data () {
      return {
        foo: 'foo',
        bar: 'bar'
      }
    }
  }
</script>

import Vue from 'vue'
import { mount } from '~vue-test-utils'
import Component from '~resources/components/component.vue'
import Component1 from '~resources/components/component1.vue'


describe('mount', () => {
  // This case is success.
  it('extends property', () => {
    const wrapper = mount({
      extends: Component,
      template: '<div><div>{{ foo }}</div><div>{{ bar }}</div><div>{{ baz() }}</div></div>',
      data () {
        return {
          foo: 'foo',
          bar: 'bar'
        }
      }
    })
    const wrappers = wrapper.findAll('div')
    expect(wrappers.at(0).html()).to.equal('<div><div>foo</div><div>bar</div><div>baz</div></div>')
    expect(wrappers.at(1).html()).to.equal('<div>foo</div>')
    expect(wrappers.at(2).html()).to.equal('<div>bar</div>')
    expect(wrappers.at(3).html()).to.equal('<div>baz</div>')
  })

  // This case is success.
  it('Vue.extend', () => {
    const C = Vue.extend(Component)
    Component1.clone = false
    const wrapper = mount(C, Component1)
    const wrappers = wrapper.findAll('div')

    expect(wrappers.at(0).html()).to.equal('<div><div>foo</div><div>bar</div><div>baz</div></div>')
    expect(wrappers.at(1).html()).to.equal('<div>foo</div>')
    expect(wrappers.at(2).html()).to.equal('<div>bar</div>')
    expect(wrappers.at(3).html()).to.equal('<div>baz</div>')
  })
})

[eddyerburgh]

I identified and fixed 2 problems:

1. Extended uncompiled components weren't compiled
2. Extended components couldn't be used as selectors in find/findAll

I fixed both these issues, but have been unable to reproduce the original error message.

@sygrinberg Can you provide minimal reproduction?

[eddyerburgh]

Hi @sygrinberg . This has been released in beta.9.

Is your original problem fixed with this release?

[eddyerburgh]

I believe this has been fixed. If anyone has any future issues with extended, please create an issue with a reproduction