Vue-test-utils: vue-class-component use causes html() to return empty html comment

[ghost]

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

[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.

[ghost]

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!

[ghost]

Fixed it for me too, thanks all!

[ghost]

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

[ghost]

@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

[eddyerburgh]

@conkur I can't reproduce this using your example. Are you able to provide a full minimal reproduction that replicates the bug?

[ghost]

Sure @eddyerburgh

The 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>

The spec:

import Test from '~/components/Test.vue';
import { shallow } from '@vue/test-utils';

describe('Test', function() {
  it('should print wrapper.html()', function() {
    // Also see this error if using mount(Test)
    this.wrapper = shallow(Test);

    // Prints `undefined`
    console.log('html: ', this.wrapper.html());
  });
});

I am using the latest version of vue-class-component (6.1.2). I tried this on beta9 and beta10 and am seeing undefined on both versions. However, beta8 printed the expected html data.

If I remove @Component({}) from the component, beta10 prints the expected html data.

[eddyerburgh]

Sorry, I still can't reproduce with your example.

Can you create a repository with a failing example so that I can debug it?

[tbsvttr]

Same problem here with vue-class-component & vue-property-decoratorafter updating to TS 2.7.1 from 2.6.2. Wired thing is that it works sometimes and sometimes it does not. For example if I remove a @Mutation (even if not used) or change its typing (to a more correct one!) toe .html() of the wrapper becomes empty?!

[eddyerburgh]

Are you able to provide a minimal reproduction @tbsvttr ? I've tried to reproduce with TypeScript and in plain JavaScript and have been unsuccessful. Once I have a reproduction (a GitHub repository that shows the bug) I can add a fix for it 😀.

[Skwai]

Also occurring for me :(

Getting undefined on my component

[eddyerburgh]

Can someone please provide a GitHub repository with a reproduction.

I've tried to reproduce this issue three times but been unable, I'd like to get this fixed but can't fix until I have an example where it's not working!

[Skwai]

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]

It looks like vue-cli 3.x scaffolding seems to fix this issue. I might rebase my project off that

[tbsvttr]

@Skwai Do you know _how_ vue-cli is fixing this issue?

[eddyerburgh]

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.

[Skwai]

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

[tbsvttr]

@Skwai Thank you very much for the hint. I even found out what the "magic" is. _vue-cli-service_ uses vue-jest, but I used _jest-vue-preprocessor_ before. After I replaced the first with the latter one everything is working for me.