tinobino / vue3-class-sfc-test Goto Github PK

Hi there! I saw your comment in the vue-property-decorator issue, I'm currently struggling with unit tests for class components as well.

I also found that importing 'Vue' from 'vue-class-component' works, but only if you extend from it directly, so for instance this also fails:

<template>
  <h1>ClassMain</h1>
  <ClassChild />
  {{ message }}
  {{ greeting }}
</template>

<script lang="ts">
import ClassChild from "@/components/ClassChild.vue";
import TestMixin from "@/mixins/TestMixin.vue";
import { Options as Component, Vue, mixins } from "vue-class-component";

@Component({
  components: {
    ClassChild,
  },
})
export default class ClassMain extends mixins(TestMixin) {
  greeting = "Howdy!";
}
</script>

The mixin looks like this:

<script lang="ts">
import { Vue } from "vue-class-component";

export default class TestMixin extends Vue {
  message = "Hello world!";
}
</script>

This results in 3 warnings:

[Vue warn]: Failed to resolve component: ClassChild 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Property "message" was accessed during render but is not defined on instance. 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Property "greeting" was accessed during render but is not defined on instance. 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>

I have no idea why this happens but I can't find many people that are having this issue so I thought it would atleast be good if you knew that it is not only happening with sub components. Basically anything you define in your class will not be available in a unit test if you dont extend Vue (which is imported from class-component) directly.