A quick dive into this learn that with class components the vm.$data which is accessed in the setData method is empty. The data properties are just present on the vm object itself with a getter and setter.

Just doing this in the code works instead of using setData

(wrapper.vm as any).hovered = true;
await (wrapper.vm as any).$nextTick();

It's not very nice and clean but for class components it seems that everything is just placed on the vm object and not in the vm.$data object.

What you could do is check in setData for each property passed if vm.hasOwnProperty() is true, and if so update it. This might be needed for Composition api components also, see #539

Thanks for the issue report.

There are a number of known problems with class component. Another one is mocks not working correctly, see here. The main problem is setData assumes you are using an object component with a data property. As you pointed out, the way class components store data is a bit different (makes sense, classes have a built in way to store data).

If we can get class component to work correctly using setData, that would be great.

@Component
export default class App extends Vue {
  someData = this.$t("message");
}

Should this.$ properties be configurable with setData, too?

Could we just have a check in setData? Kind of like you suggested? Maybe not the cleanest but class component is already a bit of a dirty hack anyway.

if (this.isClassComp) {
  this.vm[key] = value
  await this.vm.$nextTick()
} else {
  // usual stuff
}

More or less dup: #1058

Going to merge all class component issues.