Replace Jest runner with Wdio runner E2E

.circleci/configurations/jobs.yml

@@ -123,18 +123,6 @@ jobs:
       - checkout_code_with_cache
       - run_yarn
       - setup_hermes_version
-      - run:
-          name: Install appium
-          command: npm install appium@2.0.0 -g
-      - run:
-          name: Install appium drivers
-          command: |
-            appium driver install uiautomator2
-            appium driver install xcuitest
-      - run:
-          name: Start Appium server
-          command: appium --base-path /wd/hub
-          background: true
       - run:
           name: Start Metro
           command: |
@@ -145,6 +133,12 @@ jobs:
           package: cmake
       - setup_ruby:
           ruby_version: << parameters.ruby_version >>
+      - run:
+          name: Copy packages
+          command: |
+            cd packages/rn-tester-e2e/scripts
+            chmod +x copy-packages.sh
+            ./copy-packages.sh
       - run:
           name: Boot iOS Simulator
           command: source scripts/.tests.env && xcrun simctl boot "$IOS_DEVICE" || true
@@ -169,25 +163,26 @@ jobs:
             - run:
                 name: Move app to correct directory
                 command: mv /tmp/e2e/Build/Products/Debug-iphonesimulator/RNTester.app packages/rn-tester-e2e/apps/rn-tester.app
-            - run:
-                name: Check Appium server status
-                command: scripts/circleci/check_appium_server_status.sh
             - run:
                 name: Run E2E tests
-                no_output_timeout: 30m
+                no_output_timeout: 5m
                 command: |
                   cd packages/rn-tester-e2e
-                  (yarn test-e2e ios 2>&1 | tee /tmp/test_log) || true
+                  (yarn test-e2e-ios 2>&1 | tee /tmp/test_log) || true
             - store_artifacts:
                 path: /tmp/test_log
+            - store_artifacts:
+                path: ~/react-native/packages/rn-tester-e2e/reports
+            - store_artifacts:
+                path: ~/react-native/packages/rn-tester-e2e/reports/errorShots
 
   # -------------------------
   #     JOBS: Android E2E Tests
   # -------------------------
   test_e2e_android:
     executor:
       name: android/android-machine
-      tag: 2023.07.1
+      tag: default
     steps:
       - checkout_code_with_cache
       - run_yarn
@@ -201,17 +196,11 @@ jobs:
           restore-gradle-cache-prefix: v1a
           post-emulator-launch-assemble-command: ""
       - run:
-          name: Install appium
-          command: npm install appium@2.0.0 -g
-      - run:
-          name: Install appium drivers
+          name: Copy packages
           command: |
-            appium driver install uiautomator2@2.29.1
-            appium driver install xcuitest@4.32.10
-      - run:
-          name: Start Appium server
-          command: appium --base-path /wd/hub
-          background: true
+            cd packages/rn-tester-e2e/scripts
+            chmod +x copy-packages.sh
+            ./copy-packages.sh
       - run:
           name: Start Metro
           command: |
@@ -227,21 +216,18 @@ jobs:
       - run:
           name: Move app to correct directory
           command: mv packages/rn-tester/android/app/build/outputs/apk/hermes/debug/app-hermes-x86_64-debug.apk packages/rn-tester-e2e/apps/rn-tester.apk
-      - run:
-          name: Check Appium server status
-          command: |
-            if ! nc -z 127.0.0.1 4723; then
-              echo Could not find Appium server
-              exit 1
-            fi
       - run:
           name: Run E2E tests
-          no_output_timeout: 30m
+          no_output_timeout: 5m
           command: |
             cd packages/rn-tester-e2e
-            (yarn test-e2e android 2>&1 | tee /tmp/test_log) || true
+            (yarn test-e2e-android 2>&1 | tee /tmp/test_log) || true
       - store_artifacts:
           path: /tmp/test_log
+      - store_artifacts:
+          path:  ~/react-native/packages/rn-tester-e2e/reports
+      - store_artifacts:
+          path: ~/react-native/packages/rn-tester-e2e/reports/errorShots
 
   # -------------------------
   #    JOBS: Build Android

.gitignore

@@ -150,6 +150,7 @@ vendor/
 .metro-health-check*
 
 # E2E files
+/packages/rn-tester-e2e/reports
 /packages/rn-tester-e2e/apps/*.apk
 /packages/rn-tester-e2e/apps/*.app
 

packages/rn-tester-e2e/README.md

@@ -1,9 +1,8 @@
 # RNTester E2E folder
 
-In this folder we have a the setup for running E2E testing in RNTester via the usage of [Appium](https://appium.io/) and [WebDriverIO](https://webdriver.io/) and [Jest](https://jestjs.io/).
+In this folder we have a the setup for running E2E testing in RNTester via the usage of [Appium](https://appium.io/) and [WebDriverIO](https://webdriver.io/).
 
 - [Setting up locally](#setting-up-locally)
-  - [(one-off) Setting up Appium](#one-off-setting-up-appium)
   - [Building RNTester app](#building-rntester-app)
     - [Building for iOS](#building-for-ios)
     - [Building for Android](#building-for-android)
@@ -13,19 +12,6 @@ In this folder we have a the setup for running E2E testing in RNTester via the u
 
 ## Setting up locally
 
-### (one-off) Setting up Appium
-
-The first step you need to do is to ensure to install the tooling:
-
-```bash
-npm install appium@2.0.0 -g
-appium driver install uiautomator2
-appium driver install xcuitest
-```
-
-> More details about drivers in Appium [here](https://appium.github.io/appium/docs/en/2.0/guides/managing-exts/) and [here](https://appium.github.io/appium/docs/en/2.0/quickstart/uiauto2-driver/)
-
-You should not need to run install commands for drivers separately more than once, even if you bump the dep in package.json.
 
 ### Building RNTester app
 
@@ -90,13 +76,7 @@ And modify lines L24->L39 to reflect your local setup configuration (ex. `platfo
 
 ## Testing the RNTester app E2E
 
-After you have done all the above correctly, and you have the Android/iOS apps in the `rn-tester-e2e/apps` folder, in a dedicated terminal window, run:
-
-```bash
-appium --base-path /wd/hub
-```
-
-This will start the Appium server - you will need this to keep running.
+After you have done all the above correctly, and you have the Android/iOS apps in the `rn-tester-e2e/apps` folder.
 
 Then open a second terminal window and start the Metro terminal from the `packages/rn-tester` folder, via `yarn start --reset-cache`. This terminal window also needs to keep running.
 
@@ -105,8 +85,8 @@ Now, make sure that the iOS simulator/the Android emulator is up and running.
 Finally, you can open a third terminal window and run:
 
 ```bash
-yarn test-e2e android # for android
-yarn test-e2e ios # for ios
+yarn test-e2e-android # for android
+yarn test-e2e-ios # for ios
 ```
 
 Now you should see the RNTester app being open, and the defined test being run.
@@ -119,6 +99,6 @@ This project has 2 main folders:
 
 - `tests`, where the tests and referencing files all live. The substructure is as follows:
   - `screens` -> in this folder, you will find `*.screen.js` files, where each file represents a navigation screen for RNTester. So there are 3 root ones (`apis`, `bookmarks`, `components`) and then for subscreens, there's a folder with the same name - currently, that's only `components` that contains `buttonComponent.screen.js`. The content of these files is what was earlier mentioned as "references": they provide an easy way to define all elements present in said screen, so that they can be used for tests.
-  - `specs` -> this folder follows a similar 1:1 mapping to the RNTester screens, but for the tests: for each screen (or subscreen) there's a dedicated `*.test.js` file (such as `buttonComponentScreen.test.js`). Ideally, in this file the Jest tests are standard, leveraging the `*.screen.js` counterpart for the details of defining how Appium/WDIO can reach those elements on screen.
+  - `specs` -> this folder follows a similar 1:1 mapping to the RNTester screens, but for the tests: for each screen (or subscreen) there's a dedicated folder file and within it theres test file (such as `invertedFlatList.test.js`).
 
 When adding a new test, please ensure that you follow this pattern and add the relevant test in the right screen file / screen test file. Use the files mentioned above as examples.

packages/rn-tester-e2e/package.json

@@ -6,20 +6,28 @@
   "description": "React Native E2E tester app.",
   "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/rn-tester-e2e",
   "repository": {
-  "type": "git",
-  "url": "git@github.com:facebook/react-native.git",
-  "directory": "packages/rn-tester-e2e"
+    "type": "git",
+    "url": "git@github.com:facebook/react-native.git",
+    "directory": "packages/rn-tester-e2e"
   },
   "scripts": {
-    "test-e2e": "node ./../../scripts/e2e/run-e2e-tests.js"
+    "test-e2e-ios": "npx wdio wdio.conf.ios.js",
+    "test-e2e-android": "npx wdio wdio.conf.android.js"
   },
   "devDependencies": {
-    "eslint": "^8.19.0",
-    "jest": "^29.6.3",
-    "webdriverio": "^7.32.0",
     "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
     "@babel/plugin-transform-flow-strip-types": "^7.20.0",
-    "@types/jest": "^29.5.3"
+    "@babel/preset-env": "^7.20.0",
+    "@wdio/appium-service": "^8.10.5",
+    "@wdio/cli": "^8.10.5",
+    "@wdio/local-runner": "^8.10.5",
+    "@wdio/mocha-framework": "8.10.4",
+    "@wdio/spec-reporter": "8.8.7",
+    "appium": "2.0.0",
+    "appium-uiautomator2-driver": "2.29.0",
+    "appium-xcuitest-driver": "5.6.0",
+    "eslint": "^8.23.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.3.2"
   }
 }

packages/rn-tester-e2e/scripts/copy-packages.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+SOURCE_DIR=../../../node_modules
+DEST_DIR=../node_modules
+
+# List of package directories to copy
+PACKAGES=("appium" "appium-uiautomator2-driver" "appium-xcuitest-driver" "@wdio")
+
+# Copy each package directory
+for PACKAGE in "${PACKAGES[@]}"; do
+    echo "Copying $PACKAGE..."
+    cp -R "$SOURCE_DIR/$PACKAGE" "$DEST_DIR"
+done
+
+echo "Copying completed."

packages/rn-tester-e2e/tests/helpers/utils.js

@@ -8,40 +8,42 @@
  * @format
  */
 
-import {driver} from '../../jest.setup';
-
 type PlatformsReference = {
   ios: string,
   android: string,
 };
 
 class Utils {
   async checkElementExistence(locator: string): Promise<boolean> {
-    await driver.$(locator).waitForDisplayed();
-    return driver.$(locator).isDisplayed();
+    await $(locator).waitForDisplayed();
+    return $(locator).isDisplayed();
   }
 
   async clickElement(locator: string): Promise<void> {
-    await driver.$(locator).waitForDisplayed();
-    await driver.$(locator).click();
+    await $(locator).waitForDisplayed();
+    await $(locator).click();
   }
 
   async getElementText(locator: string): Promise<string> {
-    await driver.$(locator).waitForDisplayed();
-    return driver.$(locator).getText();
+    await $(locator).waitForDisplayed();
+    return $(locator).getText();
+  }
+
+  async setElementText(locator: string, text: string): Promise<void> {
+    await $(locator).waitForDisplayed();
+    return $(locator).setValue(text);
   }
 
   platformSelect(platforms: PlatformsReference): string {
-    // if something goes wrong, we fallback to ios. But it should never happent, the process will fail way earlier.
-    return platforms[process?.env?.E2E_DEVICE || 'ios'];
+    return platforms[browser.capabilities.platformName.toLowerCase()];
   }
 
   async scrollToElement(locator: string): Promise<void> {
     let {width, height} = await driver.getWindowSize();
     let elementIsFound;
     try {
-      elementIsFound = await driver.$(locator).isDisplayed();
-      while (!elementIsFound) {
+      elementIsFound = await $(locator).isClickable();
+      while (!(await elementIsFound)) {
         driver.touchPerform([
           {
             action: 'press',
@@ -67,7 +69,7 @@ class Utils {
             action: 'release',
           },
         ]);
-        elementIsFound = await driver.$(locator).isDisplayed();
+        elementIsFound = await $(locator).isClickable();
       }
     } catch (err) {
       console.log('Element is not found');