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

packages/react-router/empty-module.js

@@ -0,0 +1 @@
+module.exports = ''

packages/react-router/jest.setup.js

@@ -1,7 +0,0 @@
-window.matchMedia = window.matchMedia || function() {
-  return {
-      matches : false,
-      addListener : function() {},
-      removeListener: function() {}
-  };
-};

packages/react-router/package.json

@@ -49,20 +49,22 @@
   "devDependencies": {
     "@ionic/core": "5.0.0-beta.2",
     "@ionic/react": "5.0.0-beta.2",
-    "@types/jest": "^23.3.9",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.23",
     "@types/node": "^12.12.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.0.3",
     "@types/react-router-dom": "^4.3.1",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
-    "jest-dom": "^3.4.0",
+    "jest-dom": "^4.0.0",
     "np": "^5.0.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-testing-library": "^7.0.0",
     "rollup": "^1.18.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
@@ -75,15 +77,23 @@
   "jest": {
     "preset": "ts-jest",
     "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
+      "<rootDir>/setupTests.ts"
     ],
     "testPathIgnorePatterns": [
       "node_modules",
       "dist-transpiled",
       "dist"
     ],
+    "globals": {
+      "ts-jest": {
+        "diagnostics": false
+      }
+    },
     "modulePaths": [
       "<rootDir>"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|jpg|png|svg)$": "<rootDir>/empty-module.js"
+    }
   }
 }

packages/react-router/setupTests.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom/extend-expect';
+
+window.matchMedia = window.matchMedia || function() {
+  return {
+    matches: false,
+    addListener() { },
+    removeListener() { }
+  };
+} as any;

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);
+
+    });
+
+  });
+
+
+});;