How to Unit Test onIonViewWillEnter (or any ionic specific hooks)

Trying to get ionic hooks to fire in Ionic 6 with Vue.
Minimal example showing that the onIonViewWillEnter hook is never fired in the test. onMounted is called though.

Basic Component:

<template>
  <ion-page>
    <ion-content :fullscreen="true" color="light">
    </ion-content>
  </ion-page>
</template>

<script lang="ts" setup>
import { 
  IonPage, 
  IonContent,
  onIonViewDidEnter
} from '@ionic/vue';
import { onMounted } from 'vue';

onMounted(() => {
  console.log('onMounted called');
});

onIonViewDidEnter(() => {
  console.log('onIonViewDidEnter called');
})
</script>

The test:

import { mount } from '@vue/test-utils'
import { IonicVue } from '@ionic/vue';
import Dashboard from '@/dashboard/views/Dashboard.vue';

describe('Dashboard', () => {
  describe('should call onIonViewDidEnter', () => {
    it('renders the login component', () => {
      const wrapper = mount(Dashboard, {
        global: {
          plugins: [IonicVue]
        }
      });
    })
  })
});

Basically how do I unit test when using the ionic lifecycle hooks?

1 post - 1 participant

Read full topic