vuejs/test-utilsPublic

NotificationsYou must be signed in to change notification settings
Fork278
Star1.1k

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

Unanswered

Vasim3 asked this question inQ&A

Vasim3

Sep 12, 2022

· 4 comments· 4 replies

Return to top

Discussion options

Vasim3
Sep 12, 2022

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

You must be logged in to vote

Replies: 4 comments 4 replies

Comment options

cexbrayat
Sep 12, 2022
Maintainer

Hi@Vasim3

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

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

You must be logged in to vote

0 replies

Comment options

Vasim3
Sep 12, 2022
Author

Hi@cexbrayat
I have triedwrapper.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 = 0wrapper.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 actionTypeError: 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]

You must be logged in to vote

2 replies

Comment options

Vasim3 Sep 19, 2022
Author

Any update on this?

Comment options

cexbrayat Sep 19, 2022
Maintainer

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

Comment options

freakzlike
Sep 12, 2022
Collaborator

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

You must be logged in to vote

0 replies

Comment options

haliphax
Nov 19, 2024

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 omittedafterEach from the stackblitz test, as it obscures the underlying error.

You must be logged in to vote

2 replies

Comment options