Vue3 Test error after the integration of vue-i18n

Viewed 15

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?

0 Answers
Related