测试Vue组件时如何模拟侧插件？

Question

我使用 Vue 2、vue-test-utils、jest

上传图片的插件是vue-croppa。

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

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

模板

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

脚本

data() {
  return {
    myCroppa: {},
  }
},

我还有一些调用 vue-croppa 方法的方法。

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

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

问题是：

在测试中初始化我的组件时，如何模拟这个插件？并且是否需要测试这种行为？

Answer 1

旁注：你的设置让我有点困惑。为什么myCroppa声明为数据元素？vue-croppa插件不是负责注入吗this.myCroppa？我想两者兼而有之可能会引起问题。

无论如何，您可以mocks在测试中实例化组件时传递一个选项：

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

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

来源： https: //vue-test-utils.vuejs.org/guides/#mocking-injections

对于第二个问题，IMO 值得测试dataUri当组件上的事件或类似事件handlePicture触发回调时是否正确发出事件。在您的测试中click触发该 via并断言它应该是这样的。wrapper.trigger(...)wrapper.emitted()['got-image']