javascript - Vue.js 单元测试 - 如何检查组件是否有方法？

Question

我有一个简单的组件，其中有一个方法。我想检查其中的方法是否存在。我知道我可以检查组件是否包含某个类或字符串，但不知道如何检查方法的名称。找不到任何简单的解释。

要测试的组件:

<template>
    <div>
      <a id="returnButton" href="#" @click="toMainList" class="d-flex align-items-center back-to-button">
          <font-awesome-icon :icon="['fas', 'arrow-left']" class="fontBasicIcon back-to-button-icon" />
          <div>Back</div>
      </a>
    </div>
</template>

<script>
    import router from '@/router'

    export default {
        name: 'back-to-button',
        data () {
            return {
            }
        },
        methods:{
            toMainList(){
                $router.push('/mainlist');
            }
        }
    }
</script>

Answer 1

假设您使用 Jest 并通过 shallowMount 或 mount 挂载您的组件进行测试，返回的包装器允许您访问 Vue 实例(包括它的所有方法)

const wrapper = shallowMount(Foo)
let instance = wrapper.vm // <- the Vue instance
let myMethod = instance.myMethod // <- a method callend 'myMethod' on the Vue instance

if(myMethod != undefined) {
  console.log("method 'myMethod' exists")
}