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

时间:2019-07-05 11:25:04

标签: javascript unit-testing vuejs2

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

要测试的组件:

<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>

1 个答案:

答案 0 :(得分:2)

假设您使用Jest并通过shallowMountmount安装组件以进行测试,则返回的包装器使您可以访问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")
}