Analogue for setData() in unit tests when using typescript instance properties instead of data()

Hi,

I’m new to vue.js and evaluate the use of typescript. Now I’m facing an issue with my unit tests.

I have a component class with an instance property like this:

<template>
  <div>
    <button id="upload-button" :disabled="!isFileSelected" v-on:click="emitUploadEvent">upload</button>
  </div>
</template>

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

@Component
export default class RatingRequest extends Vue {
  public $refs!: {
    file: HTMLInputElement;
  };

  private isFileSelected = false;

  @Emit("fileSelectionChanged")
  private onFileSelectionChanged(): void {
    const fileInput = this.$refs.file;
    this.isFileSelected = !!fileInput && !!fileInput.files && !!fileInput.files[0];
  }
  
  ...
}
</script>

In my javascript version of the component, I used

data: function() {
    return {
      isFileSelected: false
    };
  },

and was able to manipulate the value in my unit test like this:

wrapper = shallowMount(RatingRequest, {});
wrapper.setData({ isFileSelected: true });

The component was rendered correctly in the unit test, i.e. the button got enabled and was clickable and calling button.trigger(‘clicked’) triggered an event.

I naively thought I could use following in my typescript version of the test:

wrapper = shallowMount(RatingRequest, {});
(wrapper.vm as any).isFileSelected = true;

But this does not have an effect on the rendering of the component, i.e. the button stays disabled and calling button.trigger(‘clicked’) does not fire the event.

I worked around this issue by using a data() function in my typescript class in combination with setData(), but frankly, this is not what I expected and not what I would really like to do.

Any help concerning this issue is appreciated.

Thanks in advance,
Marc