使用Vue组件的mocha进行单元测试时基类中的方法不存在

Posted 2023-02-22

【中文标题】使用Vue组件的mocha进行单元测试时基类中的方法不存在

【英文标题】：Method in base class does not exist during unit testing with mocha of Vue component

【发布时间】：2019-08-21 02:18:50

【问题描述】：

当我在 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');
    );
);

【参考方案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>

【讨论】：

是的，这行得通。伟大的。谢谢。但是当我使基类抽象时，我不能再将@Component 放在类上。但是，我将使用throw new Error('Not implemented'); 或其他方法作为解决方法，而不是抽象类。我仍然不明白为什么它在运行时有效，但在单元测试中无效。

【参考方案2】：

如果您想在抽象类上使用 Component 装饰器，您可以使用以下技巧。

创建一个新的AbstractComponent装饰器：

import  Component  from 'vue-property-decorator';
export default function AbstractComponent(v: any) 
    return Component(v);

您将能够在抽象类上使用 AbstractComponent 装饰器并获得与 Component 装饰器相同的功能。