Mock $refs

It would be useful to be able to mock $refs.

Currently, as far as I understand there is no way to test a method that calls a childs methods via $refs.

methodToTest ( ) {
  this.a = 1
  this.$refs.childComponent.childsMethod()
}
---
undefined is not an object (evaluating 'this.$refs.childComponent.childsMethod')

Issue Analytics

State:
Created 6 years ago
Reactions:21
Comments:34 (9 by maintainers)

Top GitHub Comments

69reactions

eddyerburghcommented, Jan 5, 2018

Hi @ddykhoff, thanks for the fiddle.

The reason you can’t call the method on the ref is because shallow stubs all the child components. The $refs object is still populated, but the toast component doesn’t have any methods (because it’s been stubbed).

You can use mount instead of shallow if you want to interact with a child components methods. Alternatively, you could use shallow and pass a custom stub:

const VueToastStub = {
  render: () => {},
  methods: {
  	setOptions: () => {}
  }
}

const wrapper = shallow(Approvals, {
  stubs: {
    'vue-toast': VueToastStub
  }
})

33reactions

booomerangcommented, May 26, 2020

For me helped the way of changing shallowMount to mount, and mocking the ref method like this:

const mockedMethod = jest.fn()
wrapper.vm.$refs.childComponent.someMethod = mockedMethod

// link where parent method calls this.$refs.childComponent.someMethod
link.trigger('click')

await flushPromises()

expect(mockedMethod).toHaveBeenCalled()

Hope this may be useful for someone.