I integrated vue18n into my vue3 application. Everythings works fine but when I try to execute my unit tests (I'm using Jest) I have an error:
TypeError: Cannot read properties of undefined (reading 'deep')
As I wrote, I have errors only during the testing phase.
During my analysis I discovered that, probably, the issue it's related to a nested component.
I start the test from a component 'list', I trigger the click on a list item in order to show this 'popup' component.
In my test I initialize the component 'list' using mount instead of the shallowMount.
In this nested component "popup" I have this template:
<template>
<full-screen-popup ref="popup">
<div class="confirm-dialogue-container">
<div class="dialog-header">
<h1 id="confirm-title-lbl" v-t="titleKey"></h1>
<i18n-t :keypath="messageKey" tag="h2" id="confirm-message-lbl" scope="global">
<template v-slot:name>
<b id="confirm-name-lbl">{{name}}</b>
</template>
<template v-slot:surname>
<b id="confirm-surname-lbl">{{surname}}</b>
</template>
</i18n-t>
</div>
<div class="actions-container">
<button id="bt-confirm-delete" class="btn-action primary" v-t="confirmLblButton" @click="_confirm"></button>
<button id="bt-cancel-delete" class="btn-action " v-t="cancelLblButton" @click="_cancel"></button>
</div>
</div>
</full-screen-popup>
</template>
If I try to remove this content I don't have the error (obviously, I have other errors because the html dom will be empty).. but probably the issue it's related to this code. I'm not able to understand the reason.
Any suggestions?