Метод в базовом классе не существует во время модульного тестирования с мокко компонента Vue

Question

Когда у меня есть компонент в Vue, который выходит из базового класса, он работает во время выполнения в браузере, как и ожидалось.Но при модульном тестировании с мокко метод в базовом классе исчезает.В приведенном ниже простом примере это приводит к ошибке TypeError: this.methodInBaseClass is not a function.Но во время выполнения это работает, тогда сообщение Some other data отображается, как я и ожидал.

Что происходит не так?И что более важно, как это исправить?

Рассмотрим этот простой компонент Vue:

<template>
    <div>{{ myData }}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import BaseClass from '@/components/BaseClass.vue';

@Component
export default class HelloWorld extends BaseClass {
    @Prop() private msg!: string;

    private created(): void {
        this.methodInBaseClass();
    }
}
</script>

и базовый класс

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
export default class BaseClass extends Vue {
    protected myData: string = 'Some data';

    protected methodInBaseClass(): void {
        this.myData = 'Some other data';
    }
}
</script>

и модульный тест

import { expect } from 'chai';
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
    it('Data is mutated', () => {
        const wrapper = shallowMount(HelloWorld);
        expect(wrapper.html()).to.include('Some other data');
    });
});

Answer 1

Вам необходимо добавить декоратор Component в базовый класс, чтобы метод methodInBaseClass мог быть объявлен как метод vue-object:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class BaseClass extends Vue {
    protected myData: string = 'Some data';

    protected methodInBaseClass(): void {
        this.myData = 'Some other data';
    }
}
</script>