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

Ionic Framework Ionic Vue
1

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?

2

if you look at the tests for ionViewWillEnter, you will see that these appear to be router events so by testing just the component, you will not see the router events triggered.

ionic-framework/lifecycle.spec.ts at main · ionic-team/ionic-framework (github.com)

1 Like
3

I modified my test to set up a router and navigate to my component and it’s now working. Thank you!

Working Test that calls onIonViewDidEnter()

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet } from '@ionic/vue';
import Dashboard from '@/dashboard/views/Dashboard.vue';

const App = {
  components: { IonApp, IonRouterOutlet },
  template: '<ion-app><ion-router-outlet /></ion-app>',
}

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    { path: '/', component: Dashboard }
  ]
});

describe('Dashboard', () => {
  it('renders the dashboard component', async() => {
    router.push('/');
    await router.isReady();
    const wrapper = mount(App, {
      global: {
        plugins: [router, IonicVue]
      }
    });
    console.log(wrapper.html());
  })
});
1 Like