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

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

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