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

Question

因此，在 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 工作时，事件被正确发出，因为如果我手动触发该方法，它就会被调用！

Answer 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()