fix(react): fire lifecycle events on initial render, fixes #20071

packages/react-router/src/ReactRouter/Router.tsx

@@ -396,6 +396,8 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     } else {
       enteringEl.classList.remove('ion-page-invisible');
       enteringEl.style.zIndex = '101';
+      enteringEl.dispatchEvent(new Event('ionViewWillEnter'));
+      enteringEl.dispatchEvent(new Event('ionViewDidEnter'));
       this.firstRender = false;
     }
   }

packages/react-router/src/ReactRouter/__tests__/Router.spec.tsx

@@ -0,0 +1,75 @@
+import React, { useRef, useEffect } from 'react';
+import { IonApp, IonRouterOutlet, IonPage } from '@ionic/react';
+import { IonReactRouter } from '../IonReactRouter';
+import { render } from '@testing-library/react';
+import { Route } from 'react-router';
+// import {Router} from '../Router';
+
+describe('Router', () => {
+
+
+  describe('on first page render', () => {
+
+    let IonTestApp: React.ComponentType<any>;
+
+    beforeEach(() => {
+      IonTestApp = ({ Page }) => {
+        return (
+          <IonApp>
+            <IonReactRouter>
+              <IonRouterOutlet>
+                <Route path="/" component={Page}></Route>
+              </IonRouterOutlet>
+            </IonReactRouter>
+          </IonApp>
+        );
+      };
+    });
+
+    it('should be visible', () => {
+
+      const MyPage = () => {
+        return (
+          <IonPage className="ion-page-invisible">
+            <div>hello</div>
+          </IonPage>
+        );
+      };
+
+      const { container } = render(<IonTestApp Page={MyPage} />);
+      const page = container.getElementsByClassName('ion-page')[0];
+      expect(page).not.toHaveClass('ion-page-invisible');
+      expect(page).toHaveStyle('z-index: 101')
+
+    });
+
+    it('should fire initial lifecycle events', () => {
+      const ionViewWillEnterListener = jest.fn();
+      const ionViewDidEnterListener = jest.fn();
+
+      const MyPage = () => {
+        const ref = useRef<HTMLDivElement>();
+
+        useEffect(() => {
+          ref.current.addEventListener('ionViewWillEnter', ionViewWillEnterListener);
+          ref.current.addEventListener('ionViewDidEnter', ionViewDidEnterListener);
+        }, []);
+
+        return (
+          <IonPage ref={ref}>
+            <div>hello</div>
+          </IonPage>
+        );
+      };
+
+
+      render(<IonTestApp Page={MyPage} />);
+      expect(ionViewWillEnterListener).toHaveBeenCalledTimes(1);
+      expect(ionViewDidEnterListener).toHaveBeenCalledTimes(1);
+
+    });
+
+  });
+
+
+});;