I am currently working on a project that involves using PrimeVue components, and the time has come to conduct some tests.
Below is the code for the test:
import { beforeEach, describe, expect, it } from 'vitest'
import type { VueWrapper } from '@vue/test-utils'
import { shallowMount } from '@vue/test-utils'
import Dialog from 'primevue/dialog'
import MyDialog from '@/components/modal/MyDialog.vue'
// Other imports...
describe('MyDialog', () => {
let myDialogWrapper: VueWrapper
beforeEach(() => {
myDialogWrapper= shallowMount(MyDialog , {
props: {
visible: false
},
global: {
stubs: {
// Some elements
},
}
})
})
it('mount', () => {
expect(myDialogWrapper).toBeTruthy()
expect(myDialogWrapper.html()).toMatchSnapshot()
**console.log(myDialogWrapper.html())**
})
})
However, the console log does not display the component. Instead, it shows the following:
<portal-stub data-v-eb267b8d="" appendto="body" disabled="false"></portal-stub>For instance, if I want to test the functionality of the "Close button" and check if it is displayed, I should write code like this:
it('displays close button', async () => {
myDialogWrapper.setProps({ visible: true })
await myDialogWrapper.vm.$nextTick()
const button = myDialogWrapper.find('.p-button-secondary')
expect(button.exists()).toBe(true)
})
Unfortunately, the MyDialog.find method cannot find the button, making it impossible to handle the .trigger('click') event.
While I have attempted to use Mount instead of ShallowMount and also tried using .findComponent(Button) instead of .find('.p-button-secondary'), the issue persists.
This problem seems to be specific to Dialog tests, and despite others facing similar challenges, I have not found a viable solution yet.
Thank you.