JEST 不会触发模拟函数 Vue js答案

【问题标题】：JEST does not trigger mock functions Vue jsJEST 不会触发模拟函数 Vue js
【发布时间】：2019-12-10 01:59:54
【问题描述】：

我有一个带有单元测试的简单组件，如下所示。我试图在锚点上触发点击事件，但我认为它不会因为错误而发生：

预期的模拟函数已被调用，但未调用。

组件：

<template>
<a @click="fetchAll" class="icon">
            <Icon class="icon"  scale="2" />
        </a>
</template>
<script>
export default {
   methods: {
       fetchAll() {}
   }
}
</script>

测试：

it('should fetch all', () => {
        const wrapper = shallowMount(Component, {
            stubs: [ 'Icon'],
            localVue
        })

        const fetchAll = jest.fn()
        wrapper.setMethods({ fetchAll })
        wrapper.find('.icon').trigger('click')
        expect(fetchAll).toBeCalled()
    })


What is wrong?

【问题讨论】：

标签： unit-testing vue.js testing jestjs

【解决方案1】：

您的组件安装正确吗？试试这样：

const fetchAllMock = jest.fn() wrapper.setMethods({ fetchAll: fetchAllMock })

【讨论】：

有什么区别？
没有区别，对不起我的愚蠢假设......我很着急。这实际上是您的整个组件代码吗？我看到您有多个带有 class="icon" 的元素。 find() 返回第一个创建元素的包装器。如果您有多个具有相同类名的元素，则应使用 findAll() 返回包装器数组。

【解决方案2】：

我遇到了同样的问题，在我的情况下，解决方法是使用括号调用模板中的方法，如下所示：

<a @click="fetchAll()" class="icon">

这听起来很奇怪，因为在我看到的所有文档和教程中，首选语法是不带括号的（如果你没有参数的话），但这是唯一有效的解决方案。

【讨论】：

否则你可以在挂载前窥探方法，这样即使没有括号你也应该能够测试函数调用：const fetchAllSpy = jest.spyOn(Component.methods, 'fetchAll'); const wrapper = shallowMount(Component, { stubs: [ 'Icon'], localVue }); wrapper.find('.icon').trigger('click'); expect(fetchAllSpy). toBeCalled();