在 Jest (Vue) 中测试子组件时如何模拟发射答案

【问题标题】：how to mock an emit when testing a child component in Jest (Vue)在 Jest (Vue) 中测试子组件时如何模拟发射
【发布时间】：2021-05-27 15:17:47
【问题描述】：

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

例如：

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
}

【问题讨论】：

标签： javascript unit-testing vue.js testing jestjs

【解决方案1】：

您可以使用 mocks 安装选项在已安装的组件上模拟 $emit：

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

【讨论】：