Vue & Jest。子组件发出事件时调用测试方法

Posted 2023-02-16

【中文标题】Vue & Jest。子组件发出事件时调用测试方法

【英文标题】：Vue & Jest. Test method was called when child component emits event

【发布时间】：2021-02-04 16:27:07

【问题描述】：

因此，在 Vue-test-utils 中不推荐使用 setMethods 之后，我将更改我的测试以使用 jest.spyOn。我只是想从子组件发出一个事件并检查父组件上是否调用了相应的方法，但不知何故我的方法永远不会被调用。

it('calls promptPasswordReset method when forgotten-password event is emitted from LoginForm', () => 
    const wrapper = shallowMount(login,  store, localVue )
    const promptPasswordResetSpy = jest.spyOn(wrapper.vm, 'promptPasswordReset')
    wrapper.findComponent(LoginForm).vm.$emit('forgotten-password')
    expect(promptPasswordResetSpy).toHaveBeenCalled()
)

对应的子模板：

<login-form
    @login="login"
    @sign-up="isSignUpModalActive = true"
    @forgotten-password="promptPasswordReset"
>
</login-form>

我不明白，因为当我检查 wrapper.emitted 和 spyOn 工作时，事件被正确发出，因为如果我手动触发该方法，它就会被调用！

【参考方案1】：

要监视组件的方法，请在组件的methods 定义上使用jest.spyOn()，然后挂载：

import MyComponent from '@/components/MyComponent.vue'

//...                                                   ?
const promptPasswordResetSpy = jest.spyOn(MyComponent.methods, 'promptPasswordReset')
const wrapper = shallowMount(MyComponent, /*...*/)
wrapper.findComponent(LoginForm).vm.$emit('forgotten-password')
expect(promptPasswordResetSpy).toHaveBeenCalled()

【讨论】：

哇，谢谢！是否有关于此的文档，我找不到任何说 jest.spyOn 必须在组件方法上并且在安装之前？