vue-test-utils: 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 https://github.com/vuejs/vue-class-component/issues/75

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

Thanks in advance, Kevin

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 5
Comments: 24 (9 by maintainers)

Most upvoted comments

@tbsvttr It looks like it abstracts it away to a vue-cli-service which must do some “magic”

Skwai on Feb 15, 2018

I still aren’t able to reproduce this issue. There have been some updates that mean VueClassComponents are stubbed correctly by shallow in beta-11. This might be why your tests that were previously rendering text aren’t any more.

I’m going to close this issue, as I’ve added tests for shallow and mount using vue-class-component. If anyone can provide a minimal reproduction of the original issue, I’ll reopen and look into it.

eddyerburgh on Feb 10, 2018

I’m getting undefined on Vue components in this branch of mine (if you run yarn unit). By no means minimal. Could also be that I’ve screwed up the jest/vue/typescript configuration… although the typescript unit tests (not .vue) work fine…

https://github.com/Skwai/bitext/tree/typescript-vue

If there was a definitive guide to using the following together that’d be great, as I was trying to piece it together based on a bunch of other examples I found:

Vue
Vue class component
Vue property decorator
Jest
Typescript

The unit test: https://github.com/Skwai/bitext/blob/a98951a08c22644c47690243153792f2ed424d69/test/AppButton.spec.ts

Skwai on Feb 5, 2018

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

74sharlock on Jan 5, 2018

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

eddyerburgh on Oct 22, 2017

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.

ktsn on Oct 6, 2017