Question

我有这个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>>'

有人可以告诉我如何访问组件的方法吗？

Answer 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

然后，您也可以通过测试与他们联系。

如何用笑话对这个vue组件进行单元测试

1 个答案: