在Jest (Vue)中测试子组件时如何模拟一个emit

Question

我正在测试一大堆子组件，我遇到了一些我认为非常糟糕的做法。每当我在子组件中点击emit时，它都希望我导入父组件，然后父组件希望我导入并设置父组件调用的所有其他子组件。我希望能够模拟子组件中的emit，这样我就可以测试它是否被调用，而不需要测试正在被调用的实际父函数，因为那是在父组件中测试的。

例如:

myMethod() {
//do something
this.$emit('some-emit',someArgument);
//do something else
},

我希望能够测试myMethod，当它击中this.$emit时，它会返回某种模拟结果，就像这样:

it('should mock the emit', () => {
const someEmitSpy = jest.spyOn($emit, someArg);
myComponent.myMethod; // run this using someEmitSpy instead of this.$emit
//expect blah blah
}

Answer 1

您可以使用mocks挂载选项在挂载的组件上模拟$emit:

const $emit = jest.fn()
shallowMount(MyComponent, {
mocks: {
$emit
}
})
expect($emit).toHaveBeenCalledWith('some-emit', { foo: 1 })