Vue 和笑话。当子组件发出事件时调用测试方法

Question

因此，setMethods在 Vue-test-utils 中弃用之后，我将测试更改为使用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>

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

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