Not able to mock Template ref($ref) in vue3

[Vasim3]

I have used the below code in the respective file.
action.html
<modal ref="deleteModal" ></modal>
action.js
this.$refs.deleteModal.closeModal()
action.spec.js
wrapper.vm.$refs['deleteModal'].openModal = jest.fn()
It is working in vue 2 but in migration with vue 3 and throwing below error
TypeError: Cannot set property 'openModal' of undefined

[cexbrayat]

Hi @Vasim3

I don't think $refs is available on wrapper.vm in VTU v2. But you can maybe grab the ref with wrapper.findComponent({ ref: 'deleteModal' })?

If that does not work, can you share a minimal repro so we can take a look?
You can use https://stackblitz.com/edit/vitest-dev-vitest-pheruf?file=package.json&initialPath=__vitest__ to build a repro online in a few minutes.

[Vasim3]

Hi @cexbrayat
I have tried wrapper.findComponent({ ref: 'deleteModal' })
action.spec.js

it('should test handlerDelete for email action', async () => {

let wrapper = await shallowMount(formaction, {
  stubs: arrStub,
  global: {
    plugins: [store]
  },
  computed: {
    formData: () => mockFormData
  },
  attachToDocument: true
})
const modal = wrapper.findComponent({ ref: 'deleteModal' })
modal.closeModal = jest.fn()
wrapper.vm.actionOptions = []
wrapper.vm.rowId = 0
wrapper.vm.rowData = [{
  formAction: 'Email'
}]
wrapper.vm.handlerDelete()
expect(wrapper.vm.actionOptions.length).toEqual(1)
expect(wrapper.vm.actionOptions[0].value).toEqual(['Email', 'Receive user submitted data through email.'])
expect(modal.closeModal).toHaveBeenCalled()
})

action.js

  handlerDelete () {
  const formAction = this.rowData[this.rowId].formAction
  if (formAction === CONSTANTS.FORM_ACTION_EMAIL_LABEL) {
    this.actionOptions.push({ value: [formAction, CONSTANTS.FORM_ACTION_EMAIL_DESCRIPTION] })
  } else Eif (formAction === CONSTANTS.FORM_ACTION_PARDOT_LABEL) {
    this.actionOptions.push({ value: [formAction, CONSTANTS.FORM_ACTION_PARDOT_DESCRIPTION] })
  } else {
    this.actionOptions.unshift({ value: [formAction, CONSTANTS.FORM_ACTION_DATABASE_DESCRIPTION] })
  }
  const ref = this.actionOptions.slice()
  this.actionOptions = ref
  this.$store.dispatch('removeAction', this.rowId)
  this.rowData.splice(this.rowId, 1)
  this.$refs.deleteModal.closeModal()
  },

action.html

    <modal ref="deleteModal" 
    aria-label="Delete action" modal-title="Delete action" role="form"
    modal-description="Are you sure to delete this action? Click 'Yes' to confirm." 
    close-modal-button-accessibility-text="cancel form deletion" cancel-button-text="No">
    </modal>

But still, it is throwing an error as follows:

 Form Action component › should test handlerDelete for email action

TypeError: Cannot read property 'closeModal' of undefined

   96 |       this.$store.dispatch('removeAction', this.rowId)
   97 |       this.rowData.splice(this.rowId, 1)
>  98 |       this.$refs.deleteModal.closeModal()
      |                              ^
   99 |     },
  100 |     handlerControl (event) {
  101 |       this.actionValue = event.detail.optionSelected.value[0]

[freakzlike]

It's complaining because it cannot find the ref and not an issue of the function mock