How to grab a template ref ($ref) in tests

[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]

[Vasim3]

Any update on this?

[cexbrayat]

@Vasim3 I think we are waiting for your minimal reproduction so we can take a look. Try to build one with https://stackblitz.com/edit/vitest-dev-vitest-pheruf?file=package.json&initialPath=__vitest__ and we'll be able to check what's going on.

[freakzlike]

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

[haliphax]

This is still an issue, as far as I can tell.

component.vue

<script lang="ts">
import { defineComponent } from "vue";

const Component = defineComponent({
    mounted() {
        this.$refs.dialog.showModal();
    },
});

export default Component;
</script>

<template>
    <div>
        <dialog ref="dialog"></dialog>
    </div>
</template>

component.test.ts

import { mount, VueWrapper } from "@vue/test-utils";
import { afterEach, beforeEach, describe, it } from "vitest";
import Component from "component.vue";

describe("Component", () => {
    let component: VueWrapper;

    beforeEach(() => {
        component = mount(Component);
    });

    afterEach(() => {
        component.unmount();
    });

    it("has dialog", ({ expect }) => {
        expect((component.vm.$refs.dialog as HTMLDialogElement).open).not.toBe(null);
    });
});

https://stackblitz.com/edit/vitest-dev-vitest-dlc9kh?file=test%2Fdialog.test.ts

I have omitted afterEach from the stackblitz test, as it obscures the underlying error.

[cexbrayat]

Hi @haliphax
This is unrelated: your test fails because AFAIK jsdom does not yet support dialog: see jsdom/jsdom#3294

[haliphax]

I'm using happydom, but thank you for the tip