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

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>

我不明白，因为当我检查 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()

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

Vue & Jest. Test method was called when child component emits event

javascript

vue.js

jestjs

vue-test-utils