test(react): migrate to builder architecture (#26959)

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

@@ -1,5 +1,8 @@
 name: 'Test React E2E'
 description: 'Test React E2E'
+inputs:
+  app:
+    description: 'The specific test application'
 runs:
   using: 'composite'
   steps:
@@ -21,19 +24,24 @@ runs:
         name: ionic-react-router
         path: ./packages/react-router
         filename: ReactRouterBuild.zip
+    - name: Create Test App
+      run: ./build.sh ${{ inputs.app }}
+      shell: bash
+      working-directory: ./packages/react/test
     - name: Install Dependencies
       run: npm install
       shell: bash
-      working-directory: ./packages/react/test-app
-    - name: Sync
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
       run: npm run sync
       shell: bash
-      working-directory: ./packages/react/test-app
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
     - name: Build
       run: npm run build
       shell: bash
-      working-directory: ./packages/react/test-app
-    - name: Run E2E Tests
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+    - name: Run Tests
       run: npm run e2e
       shell: bash
-      working-directory: ./packages/react/test-app
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+

.github/workflows/build.yml

@@ -175,8 +175,23 @@ jobs:
     - uses: ./.github/workflows/actions/test-react-router-e2e
 
   test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1

.gitignore

@@ -78,4 +78,7 @@ angular/test/build/
 # vue
 packages/vue/test/build/
 
+# react
+packages/react/test/build/
+
 .npmrc

packages/react/.gitignore

@@ -1,2 +1 @@
-build.sh
 *.tgz

packages/react/package.json

@@ -87,7 +87,9 @@
       "node_modules",
       "dist-transpiled",
       "dist",
-      "test-app"
+      "test/base/*",
+      "test/apps/*",
+      "test/build/*"
     ],
     "modulePaths": [
       "<rootDir>"

packages/react/test/README.md

@@ -0,0 +1,55 @@
+# React E2E Test Apps
+
+Ionic Framework supports multiple versions of React. As a result, we need to verify that Ionic works correctly with each of these React versions.
+
+## Syncing Local Changes
+
+The React test app supports syncing your locally built changes for validation.
+
+1. Build the `@ionic/core`, `@ionic/react`, and `@ionic/react-router` projects using `npm run build`.
+2. [Build the React test app](#test-app-build-structure).
+3. Navigate to the built test app.
+4. Install dependencies using `npm install`.
+5. Sync your local changes using `npm run sync`.
+
+From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in `node_modules/.cache` and restart the dev server/re-build.
+
+## Test App Build Structure
+
+Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
+
+**apps** - This directory contains partial applications for each version of React we want to test. Typically these directories contain new `package.json` files, `cypress.config.ts` files, and more. If you have code that is specific to a particular version of React, put it in this directory.
+
+**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.
+
+**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git.
+
+**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory.
+
+Usage:
+
+```shell
+# Build a test app using apps/react17 as a reference
+./build.sh react17
+```
+
+## How to modify test apps
+
+To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
+
+If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react17`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`.
+
+### Version-specific tests
+
+If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
+
+## Adding New Test Apps
+
+As we add support for new versions of React, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
+
+1. Navigate to the built app for the most recent version of React that Ionic tests.
+2. Update the application to the latest version of React.
+3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc).
+4. Copy the changed files to a new directory in `apps`.
+5. Add a new entry to the matrix for `test-react-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
+6. Commit these changes and push.

packages/react/test/apps/react17/package.json

@@ -3,17 +3,17 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^6.0.12",
-    "@ionic/react-router": "^6.0.12",
-    "@types/react": "^16.14.3",
-    "@types/react-dom": "^16.9.10",
-    "@types/react-router": "^5.1.11",
-    "@types/react-router-dom": "^5.1.7",
+    "@ionic/react": "^6.6.1",
+    "@ionic/react-router": "^6.6.1",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.19",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "ionicons": "^6.0.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "^5.0.0",
     "typescript": "^4.1.3"
   },

packages/react/test/apps/react18/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "test-app",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "@ionic/react": "^6.6.1",
+    "@ionic/react-router": "^6.6.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "ionicons": "^6.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
+    "react-scripts": "^5.0.0",
+    "typescript": "^4.1.3"
+  },
+  "scripts": {
+    "start": "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",
+    "cypress.open": "cypress open",
+    "e2e": "concurrently \"serve -s build -l 3000\" \"wait-on http-get://localhost:3000 && npm run cypress\" --kill-others --success first"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "concurrently": "^6.3.0",
+    "cypress": "^10.9.0",
+    "serve": "^14.0.1",
+    "wait-on": "^6.0.0",
+    "webpack-cli": "^4.9.1"
+  },
+  "description": "An Ionic project",
+  "engines": {
+    "node": ">= 16"
+  }
+}

packages/react/test/apps/react18/src/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

packages/react/test/base/scripts/sync.sh

@@ -3,13 +3,13 @@
 set -e
 
 # Pack @ionic/core
-npm pack ../../../core
+npm pack ../../../../../core
 
 # Pack @ionic/react
-npm pack ../
+npm pack ../../../
 
 # Pack @ionic/react-router
-npm pack ../../react-router
+npm pack ../../../../react-router
 
 # Install Dependencies
 npm install *.tgz --no-save

packages/react/test/build.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# The directory where the source
+# for each specific application is.
+APPS_DIR="apps"
+
+# The directory where the
+# base application logic is
+BASE_DIR="base"
+BUILD_DIR="build"
+
+# The specific application
+# we are building
+APP_DIR="${1}"
+
+# The full path to the specific application.
+FULL_APP_DIR="${APPS_DIR}/${APP_DIR}/."
+
+# The full path to the base application.
+FULL_BASE_DIR="${BASE_DIR}/."
+
+# The full path to the built application.
+BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/"
+
+# Make the build directory if it does not already exist.
+mkdir -p $BUILD_DIR
+
+# First we need to copy the base application
+cp -R $FULL_BASE_DIR $BUILD_APP_DIR
+
+# Then we can copy the specific app which
+# will override any files in the base application.
+cp -R $FULL_APP_DIR $BUILD_APP_DIR