typescript - Vue组件mocha单元测试时基类方法不存在

Question

当我在 Vue 中有一个从基类扩展的组件时，它会按预期在浏览器中的运行时运行。但是当使用mocha进行单元测试时，基类上的方法消失了。在下面的简单示例中，这会导致错误 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>