如何用 jest 对这个 vue 组件进行单元测试答案

【问题标题】：How to unit test this vue component with jest如何用 jest 对这个 vue 组件进行单元测试
【发布时间】：2020-09-16 14:36:54
【问题描述】：

我有这个 vue 组件，我想通过我的单元测试文件访问它的方法：

@Component
export default class Breadcrumb extends Vue {

  breadcrumbList: BreadcrumbData[] = [];

  mounted(): void {
    this.breadcrumbList = (this.$route.meta
      .breadcrumb as BreadcrumbData[]).concat({
      name: this.$route.name as string | undefined
    });
  }

  goTo(breadcrumb: BreadcrumbData) {
    if (breadcrumb.link) {
      this.$router.push(breadcrumb.link as RawLocation);
    }
  }
}

我在网上找到的所有教程都使用不同的语法来构建组件

export default {
    props: { ... },
    data: { ... },
    methods: {
        doSomeWork: function() {
            ...
        }
    }
}

然后通过

访问方法

const wrap = mount(DummyComp);
wrap.vm.doSomeWork();

但是当我尝试使用我的语法时，我得到： Property 'goTo' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'

谁能告诉我如何访问我的组件的方法？

【问题讨论】：

标签： unit-testing vue.js jestjs

【解决方案1】：

首先你应该在methods 属性中定义你的函数。还有data 函数内的组件范围变量。像这样：

export default class Breadcrumb extends Vue {
  data() {
     return {
       breadcrumbList: []
     }
  },
  mounted(): void {
     ...
  },
  methods: {
    goTo(breadcrumb: BreadcrumbData) {
      if (breadcrumb.link) {
        this.$router.push(breadcrumb.link as RawLocation);
      }
    }
  }
}

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

那么你也可以通过测试找到他们。

【讨论】：