测试Vue组件时如何mock side plugin？

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

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

测试Vue组件时如何mock side plugin？

How to mock side plugin when testing Vue component?

vue.js

vuejs2

jestjs

vue-test-utils