JEST 不会触发模拟函数 Vue js

Posted 2023-02-22

【中文标题】JEST 不会触发模拟函数 Vue js

【英文标题】：JEST does not trigger mock functions 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?

【参考方案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();