vue-class-component use causes html() to return empty html comment

Hello,

I noticed that my single file component which uses Component from vue-class-component is returning an empty html comment ('<!---->') when I print wrapper.html().

Component:

<template>
  <div id="test">
    Test
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})

export default class Test extends Vue {
}
</script>

Mounting in test file:
const wrapper = mount(Test);

When not using vue-test-utils, I see the same problem of the empty html comment being returned in vm.$el when I mount the component like so: vm = new Vue(Test).$mount() However I get the expected vm.$el content when I mount the component like this instead:

const vm = new Test();
vm.$mount()

Which I saw in this issue vuejs/vue-class-component#75

Not sure if this issue should be filed to vue-class-component instead.

Thanks in advance,
Kevin

[ktsn]

This looks because mount does not support extended Vue constructor that generated with Vue.extend yet? vue-class-component convert the decorated class to the returned value of Vue.extend.

I just confirmed this happens if I use Vue.extend directly.

[eddyerburgh]

Try mounting the component with clone set to false:

const wrapper = mount(Test, {
  clone: false
})

vue-test-utils clones components by default so that it can stub them without affecting the base component object.

Hey @eddyerburgh, thanks for the suggestion. Unfortunately wrapper.html() is still undefined even with setting clone to false. And just to clarify, I'm running the latest version, v1.0.0-beta.2

[eddyerburgh]

1.0.0-beta.3 has support for extended components. Can you try with the new version and see if it fixes your issue

[berniezajac]

Fixed it for me, @eddyerburgh - many thanks!

Fixed it for me too, thanks all!

Hey again,

I noticed this same problem happening in the latest release, beta.9. I didn't notice this in beta.8.

Could anyone take a look?
Thanks

[74sharlock]

same problem in beta.9:

let wrapper = mount({
  template: `<div>1<tester></tester></div>`,
  components: {
    tester: {
      template: `<div class="tester">test</div>`
    }
  }
});

console.log(wrapper.html());
// will return:
// <div>1<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></div>

[eddyerburgh]

@conkur can you post a minimal reproduction?

@74sharlock Thanks for the bug report. I believe this is a different bug. Can you create a new issue?

[74sharlock]

@eddyerburgh Thanks for reply. I've created a new issue about that in #329

@eddyerburgh Sure, the first comment on this issue contains a reproduction (the Test component). When printing wrapper.html() in beta.3 - beta.8 it prints the expected output, but in beta.9 it's undefined