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

【问题标题】：How to mock side plugin when testing Vue component?测试 Vue 组件时如何模拟侧插件？
【发布时间】：2018-08-09 20:43:32
【问题描述】：

我使用 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 方法。

问题是：

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

【问题讨论】：

标签： vue.js vuejs2 jestjs vue-test-utils

【解决方案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

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

【讨论】：