Data not defined on instance in unit test Vue 3

[Evertvdw]

Hi there!

I started with migrating our codebase from Vue 2 with class components to Vue 3. The project doesn't run yet with Vue 3 but I'm already looking at our unit tests to see if I can get a setup with jest and vue-test-utils working. I'm running in a strange issue however, not sure how to proceed.

I have the following minimal component:

<template>
    <div>
        {{ text }}
    </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator";

export default class DefaultComponent extends Vue {
    text = "Hello";
}
</script>

And I created a unit test for that (file DefaultComponent.spec.ts):

import DefaultComponent from "../DefaultComponent.vue";
import { createWrapper } from "utils/wrapper";

describe("DefaultComponent", () => {
    it("dummy test as there are no reasonable things to unit test", async () => {
        console.log(DefaultComponent);
        const wrapper = await createWrapper(DefaultComponent, {});
        expect(wrapper).toBeDefined();
                console.log(wrapper.html());
    });
});

The createWrapper is a custom function in which I do some general setup and eventually do a return mount(DefaultComponent, {...options}). I have the following packages installed:

• vue@3.0.11
• jest@26.6.3
• ts-jest@26.5.4
• vue-class-component@8.0.0-rc.1
• vue-jest@5.0.0-alpha.8
• @vue/test-utils@2.0.0-rc.4

When I run this test it gives the following output:

// first console.log
{ render: [Function: render] }

[Vue warn]: Property "text" was accessed during render but is not defined on instance. 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>

// html()
<div></div>

Anyone have any idea why this is happening? If anyone has unit tests with class components working I would very much love some examples, because my search so far is turning up empty.

Thanks!

[Evertvdw]

Ok, nobody does unit tests in combination with class components?

I also ran into another issue with Vue-class-components in another library. Maybe that is related? https://github.com/quasarframework/quasar/issues/8915#issuecomment-822000736

Before with class components the options were besides the render method on the class. But now they are under a subkey __c, maybe this trips up unit tests also. Anyone know why this is different going from Vue 2 -> Vue 3?

[Evertvdw]

Ok, it seems importing Vue from vue-class-component instead of vue-property-decorator fixes this issue. However when you have a component which extends from a mixin, you get this issue again. Even if that mixin also imports Vue from vue class components.

[tuchuants]

I got similar issue when I try to write unit tests for my class-style code using vue-test-utils. You would find that when you use Vue.with() instead of Vue as the parent class the problem appears again.

[Evertvdw]

Created an issue on vue-test-utils about this: https://github.com/vuejs/vue-test-utils-next/issues/544#issuecomment-831098165

Although the issue seems to be originating from vue-jest :)