How to mock side plugin when testing Vue component?

Question

I use Vue 2, vue-test-utils, jest

Plugin is vue-croppa for uploading pictures.

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

It's mounted to my component through v-model. Then i can call some methods on it.

template

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

script

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

Also i have some method that calls vue-croppa method.

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

I want to test my method calls vue-croppa method.

the question is:

How can i mock this plugin, when initializing my component in a test? AND is there a need to test this behavior?

acobster acobster · Accepted Answer · 2018-08-04T05:49:27

Side note: Your setup is a little confusing to me. Why is myCroppa declared as a data element? Isn't the vue-croppa plugin responsible for injecting this.myCroppa? I would imagine that having both might cause problems.

Anyway, you can pass a mocks option when instantiating your component in a test:

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

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

Source: https://vue-test-utils.vuejs.org/guides/#mocking-injections

To your second question, it's worth it IMO to test that an event is emitted with the correct dataUri when the handlePicture callback is triggered by a click event on your component, or something similar. Trigger that via wrapper.trigger(...) in your test and assert that wrapper.emitted()['got-image'] is what it should be.

How to mock side plugin when testing Vue component?

1 Answers