Vue.js 测试Vue组件时如何模拟端插件？

我使用VUE2、Vue测试utils和jest

插件是vue croppa，用于上传图片

import Croppa from 'vue-croppa'
Vue.use(Croppa, { componentName: 'image-croppa' })

它通过v型安装到我的组件上。然后我可以调用它的一些方法

模板

<image-croppa v-model="myCroppa" ...>

另外，我还有一些方法调用vue cropa方法

handlePicture(){
    const dataUri = this.myCroppa.generateDataUrl()
    this.$emit('got-image', dataUri)
  },

我想测试我的方法调用vue croppa方法

问题是：

在测试中初始化组件时，如何模拟此插件？

---

是否需要测试这种行为？

旁注：您的设置让我有点困惑。为什么

mycropa

声明为数据元素？vue croppa插件不负责注入

this.myCroppa

？我想，两者兼而有之可能会带来问题

无论如何，在测试中实例化组件时，可以通过

mocks

选项：

const mockCroppa = {
  get() => '/fake-url'
}

mount(MyComponent, {
  mocks: {
    myCroppa: mockCroppa
  }
}

资料来源：

对于第二个问题，在我看来，当组件上的

click

事件或类似事件触发

handlePicture

回调时，测试事件是否以正确的

dataUri

发出是值得的。在测试中通过

wrapper.Trigger（…）

触发它，并断言

wrapper.emissed（）['got-image']

应该是它

const mockCroppa = {
  get() => '/fake-url'
}

mount(MyComponent, {
  mocks: {
    myCroppa: mockCroppa
  }
}