test(): run e2e tests in production mode (#24812)

.github/workflows/actions/test-react-e2e/action.yml

@@ -29,9 +29,19 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
-    - uses: cypress-io/github-action@v2
-      with:
-        browser: chrome
-        headless: true
-        start: npm run start.ci
-        working-directory: ./packages/react/test-app
+    - name: Install Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./packages/react/test-app
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/react/test-app
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/react/test-app
+    - name: Run E2E Tests
+      run: npm run e2e
+      shell: bash
+      working-directory: ./packages/react/test-app

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -29,9 +29,19 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
-    - uses: cypress-io/github-action@v2
-      with:
-        browser: chrome
-        headless: true
-        start: npm run start.ci
-        working-directory: ./packages/react-router/test-app
+    - name: Install Dependencies
+      run: npm install
+      shell: bash
+      working-directory: ./packages/react-router/test-app
+    - name: Sync
+      run: npm run sync
+      shell: bash
+      working-directory: ./packages/react-router/test-app
+    - name: Build
+      run: npm run build
+      shell: bash
+      working-directory: ./packages/react-router/test-app
+    - name: Run E2E Tests
+      run: npm run e2e
+      shell: bash
+      working-directory: ./packages/react-router/test-app

angular/test/test-app/package.json

@@ -16,7 +16,7 @@
     "prerender": "ng run test-app:prerender",
     "cy.open": "cypress open",
     "cy.run": "cypress run",
-    "test": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
     "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
   },
   "dependencies": {

packages/react-router/test-app/package.json

@@ -36,11 +36,10 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start.ci": "npm run sync && BROWSER=none react-scripts start",
-    "build": "node scripts/build.js",
+    "build": "react-scripts build",
     "test": "cypress open",
     "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
-    "e2e": "npm run sync && concurrently \"SKIP_PREFLIGHT_CHECK=true react-scripts start\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
+    "e2e": "concurrently \"serve -s build -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first",
     "sync": "sh ./scripts/sync.sh"
   },
   "eslintConfig": {
@@ -66,6 +65,7 @@
     "concurrently": "^6.3.0",
     "cpy-cli": "^3.1.1",
     "cypress": "^8.5.0",
+    "serve": "^13.0.2",
     "wait-on": "^6.0.0",
     "webpack-cli": "^4.9.1"
   },

packages/react/test-app/package.json

@@ -43,13 +43,12 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start.ci": "npm run sync && BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "sync": "sh ./scripts/sync.sh",
     "cypress": "cypress run --headless --browser chrome",
-    "e2e": "concurrently \"SKIP_PREFLIGHT_CHECK=true npm run start -b\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first"
+    "e2e": "concurrently \"serve -s build -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first"
   },
   "eslintConfig": {
     "extends": [
@@ -72,6 +71,7 @@
   "devDependencies": {
     "@capacitor/cli": "3.2.4",
     "concurrently": "^6.3.0",
+    "serve": "^13.0.2",
     "wait-on": "^6.0.0",
     "webpack-cli": "^4.9.1"
   },

packages/react/test-app/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { IonApp, IonButton, IonContent, IonHeader, IonPage, IonRouterOutlet, IonTitle, IonToolbar, setupIonicReact } from '@ionic/react';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 
 /* Core CSS required for Ionic components to work properly */

packages/vue/test-app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "concurrently \"npm run start\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
+    "test:e2e": "concurrently \"npm run start -- --mode production\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
     "lint": "vue-cli-service lint",
     "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
     "start": "vue-cli-service serve",