vue.js - 测试 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 方法。

问题是：

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

score 3 · Accepted Answer

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

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

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

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

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

1 回答 1