Vue组件Mocha单元测试时基类方法丢失问题排查与修复

嘿，这个问题我之前在Vue+TypeScript的项目里也踩过坑！你遇到的TypeError: this.methodInBaseClass is not a function错误，核心原因是你的基类BaseClass没有用@Component装饰器标记。

为什么运行正常但测试失败？ #

在浏览器运行时，Vue的运行时引擎会通过JavaScript的原型链机制，自动继承基类的属性和方法，所以代码能正常工作。但在Mocha测试环境中，vue-test-utils的shallowMount是基于Vue的组件选项系统来创建实例的——而vue-property-decorator的@Component装饰器的作用，就是把类中的属性、方法、生命周期钩子等，转化为Vue组件能识别的选项（比如data、methods对象）。

你的基类没加@Component，意味着它的方法和属性没有被转化为Vue组件选项，所以shallowMount创建的测试实例根本找不到methodInBaseClass这个方法。

修复方案 #

只需要给基类加上@Component装饰器就搞定了：

修改基类BaseClass.vue的代码：

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

// 关键：添加这个@Component装饰器
@Component
export default class BaseClass extends Vue {
  protected myData: string = 'Some data';

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

额外优化建议 #

如果你的基类不需要模板，其实可以把它改成单独的.ts文件（比如BaseClass.ts），这样结构更清晰，也避免了.vue文件只有script的冗余：

// src/components/BaseClass.ts
import { Component, 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';
  }
}

然后在HelloWorld.vue中导入：

import BaseClass from '@/components/BaseClass';

这样修改后，重新运行单元测试，shallowMount就能正确识别基类的方法，created钩子执行后myData会被修改为Some other data，测试就能顺利通过啦！

内容的提问来源于stack exchange，提问作者Mike de Klerk