Mocking method on component (using Jest)

Hi,

I am trying out avoriaz with Jest. So far this library is great, thanks a lot.

I want to mock a method that makes an api request.

My code looks something like

SomeComponent.vue

<template>
  <form>
    <button type="button" id="my-button" @click="save">Btn</button>
  </form>
</template>

<script>
  export default {
    methods: {
      save () {
        // stuff
      }
    }
  }
</script>

Test

import { shallow } from 'avoriaz'
import Vue from 'vue'
import SomeComponent from './SomeComponent.vue

describe('mocks a method', () => {
  it('mocks it', () => {
    const wrapper = shallow(SomeComponent)
    // I want to mock the `save` method with `jest.fn()` - how do I do that?
    /* I have tried...    
    wrapper.methods().save == jest.fn()
    wrapper.vm.save = jest.fn()
    */
 
    // rest of the test
    wrapper.find('#my-button')[0].trigger('click')
    expect(/* mock to have been called */)
  }
}

I saw some examples around using sinon, but the same should work for jest. So I would like to know how I can mock a function - I was struggling to find an example. I did see one other example where a mocked function was passed using propsData? Is that what I should be doing?

[eddyerburgh]

You were nearly there:

it('mocks it', () => {
    const wrapper = shallow(SomeComponent)
    const saveMock = jest.fn()
    wrapper.vm.save = saveMock
    wrapper.update()

    wrapper.find('#my-button')[0].trigger('click')
    expect(saveMock.mock.calls.length).toBe(1)
})

I’m going to add a setMethod method at some point to make this easier to understand.

[eddyerburgh]

setMethods has been merged and is now live in v3.4.0 👏