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:

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• @vue/[email protected]

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? quasarframework/quasar#8915 (comment)

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: vuejs/test-utils#544 (comment)

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