I'm trying to create this unit test in Vue Js 3
Unit Test
render(Paragraph, {
props: {analise: analise, textosAutuacao: autuacao},
global: {
plugins: [Quasar]
}
})
await fireEvent.click(await screen.getByTestId("paragrafoPadrao"))
await fireEvent.click(await screen.getByLabelText("Choose default paragraph"))
})
Error
TypeError: Cannot read properties of undefined (reading 'value')
❯ setup node_modules/quasar/src/components/drawer/QDrawer.js:88:62
86| const belowBreakpoint = ref(
87| props.behavior === 'mobile'
88| || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
| ^
89| )
90|
Component
...
<div v-if="origemParagrafoPadrao === 'previo'">
<div>
<q-btn @click="drawerParagrafoPadrao = !drawerParagrafoPadrao" dense no-caps color="primary" label="Escolher parágrafo padrão" class="q-my-md" icon-right="arrow_right"/>
</div>
<div>
<q-card flat bordered v-for="texto in selecaoTextoAutuacao" :key="texto.id">
<q-card-section>
<div class="flex">
<h6 class="text-subtitle2 text-weight-bold">{{ texto.id }} - {{ texto.titulo }}</h6>
<a class="q-link text-primary cursor-pointer q-ml-xs" :id="'lnkExcluirTextoJurisprudencia' + texto.id"
@click="excluirTextoParagrafoPadrao(texto)">
( Excluir )
</a>
</div>
<div v-html="texto.texto" style="white-space: pre-wrap;"></div>
</q-card-section>
</q-card>
</div>
<q-drawer v-model="drawerParagrafoPadrao" side="right" :breakpoint="10" bordered class="shadow-2 rounded-borders" :width="900">
<div class="flex justify-between items-center q-ma-md">
...
The question is how can I do this unit test using vitest and when rendering the q-drawer the above error is displayed.