PrimeVue Dialog component throws an odd Vue Test Utils error (Vitest test runner)

[jimattakeda]

Here's my component, "New Device Modal", which wraps a PV Dialog component, and exposes the latter's "visible" property as the property "isDialogVisible" on my component:

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
	props: {
		isDialogVisible: {
			type: Boolean,
			required: true,
		},
...
})
</script>
<template>
	<Dialog 
		modal
		:visible="isDialogVisible"
		>
...

And here's how I'm trying to test it:

import { describe, it, expect, beforeEach } from 'vitest'
import { VueWrapper, flushPromises, mount, shallowMount } from '@vue/test-utils';
import AutoComplete from 'primevue/autocomplete';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import { ErrorMessage, Field, Form } from 'vee-validate';
import InputText from 'primevue/inputtext';
import MultiSelect from 'primevue/multiselect';
import Textarea from 'primevue/textarea';
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
import NewDeviceModal from '@/views/NewDeviceModal.vue';`

describe('NewDeviceModal', () => {
	it('does NOT display, when mounted', () => {
		const wrapper = mount(NewDeviceModal, {
			global: {
				components: {
					'AutoComplete': AutoComplete,
					'Button': Button,
					'Dialog': Dialog,
					'Field': Field,
					'Form': Form,
					'InputText': InputText,
					'MultiSelect': MultiSelect,
					'Textarea': Textarea,
					'Toast': Toast,
					'ToastService': ToastService,
				}
			},
			props: { 
				isDialogVisible: false,
			}
		});

		expect(wrapper.isVisible()).toBe(false);
	});

	it('DOES display, when toggled', async () => {
		const wrapper = mount(NewDeviceModal, {
			global: {
				components: {
					'AutoComplete': AutoComplete,
					'Button': Button,
					'Dialog': Dialog,
					'Field': Field,
					'Form': Form,
					'InputText': InputText,
					'MultiSelect': MultiSelect,
					'Textarea': Textarea,
					'Toast': Toast,
					'ToastService': ToastService,
				}
			},
			props: { 
				isDialogVisible: false,
			}
		});

		// console.log({wrapper})
		await wrapper.setProps({ isDialogVisible: true });
		expect(wrapper.isVisible()).toBe(true);
	});

})

Using this command line:
vitest --environment jsdom

The FIRST test: it('does NOT display, when mounted', ...), works as expected.

But the SECOND test: it('DOES display, when toggled', ...), shows the following error information:

stderr | src/views/__tests__/NewDeviceModal.spec.ts > NewDeviceModal > DOES display, when toggled
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
  at <Transition>
  at <Portal appendTo="body" >
  at <Dialog modal="" visible=true header="ADD NEW DEVICE"  ... >
  at <NewDeviceModal isDialogVisible=true  ... >   
  at <VTUROOT>
[Vue warn]: Unhandled error during execution of render function
  at <Transition>
  at <Portal appendTo="body" >
  at <Dialog modal="" visible=true header="ADD NEW DEVICE"  ... >
  at <NewDeviceModal isDialogVisible=true  ... >   
  at <VTUROOT>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
  at <Transition>
  at <Portal appendTo="body" >
  at <Dialog modal="" visible=true header="ADD NEW DEVICE"  ... >
  at <NewDeviceModal isDialogVisible=true  ... >   
  at <VTUROOT>

and, later on in the test output:

FAIL  src/views/__tests__/NewDeviceModal.spec.ts > NewDeviceModal > DOES display, when toggled
TypeError: Cannot read properties of undefined (reading 'config')
 ❯ Proxy.dialogClass node_modules/primevue/dialog/dialog.cjs.js:368:50
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25
 ❯ ComputedRefImpl.get value [as value] node_modules/@vue/reactivity/dist/reactivity.cjs.js:1136:39        
 ❯ Object.get [as dialogClass] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3409:30
 ❯ node_modules/primevue/dialog/dialog.cjs.js:439:39
 ❯ renderFnWithContext node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:847:21
 ❯ normalizeChildren node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6847:42
 ❯ createBaseVNode node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6600:9
 ❯ _createVNode node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6702:12
 ❯ createVNodeWithArgsTransform node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6558:12

I've tried the following work-arounds:

• making the function non-async, and removing the await
• trying to dive down into the wrapper.vm data structure, and hack-ily setting the isDialogVisible property
• same as above, except on the visible property of the PV Dialog component
• I'm now suspecting a mounting problem on the PV Dialog component itself, but I haven't been able to find a work-around

I'm really stumped on this one. Any suggestions are welcome!

(Edited: to remove some extraneous, potentially redactable info.)

[tugcekucukoglu]

PrimeVue should be added as plugin. For example: https://github.com/primefaces/primevue/blob/master/components/lib/autocomplete/AutoComplete.spec.js#L11

[jimattakeda]

The test(s) are now working. THANK YOU for your assistance!