chore: Build RN example with detox.

Author: kinyoklion

.github/workflows/react-native.yml

@@ -22,12 +22,9 @@ jobs:
         with:
           workspace_name: '@launchdarkly/react-native-client-sdk'
           workspace_path: packages/sdk/react-native
-  detox-ios:
-    # TODO: disable detox for now because it's unstable.
-    if: false
-    # macos-latest uses macos-12 and we need macos-14 to get xcode 15.
-    # https://github.com/actions/runner-images/blob/main/README.md
-    runs-on: macos-14
+
+  detox-android:
+    runs-on: ubuntu-latest
     permissions:
       id-token: write
       contents: read
@@ -36,51 +33,51 @@ jobs:
         working-directory: packages/sdk/react-native/example
     steps:
       - uses: actions/checkout@v4
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
+
+      - name: Setup Java
+        uses: actions/setup-java@v4
+        with:
+          cache: gradle
+          distribution: temurin
+          java-version: 17
+
       - name: Install deps
         run: yarn workspaces focus
       - name: Build
         run: yarn workspaces foreach -pR --topological-dev --from 'react-native-example' run build
-      - name: Install macOS dependencies
-        run: |
-          brew tap wix/brew
-          brew install applesimutils
-        env:
-          HOMEBREW_NO_AUTO_UPDATE: 1
-          HOMEBREW_NO_INSTALL_CLEANUP: 1
-
-      - name: Cache Detox build
-        id: cache-detox-build
-        uses: actions/cache@v4
-        with:
-          path: ios/build
-          key: ${{ runner.os }}-detox-build
-          restore-keys: |
-            ${{ runner.os }}-detox-build
-
-      - name: Detox rebuild framework cache
-        run: yarn detox rebuild-framework-cache
 
       - uses: ./actions/release-secrets
         name: 'Get mobile key'
         with:
-          aws_assume_role: ${{ vars.AWS_ROLE_ARN }}
+          aws_assume_role: ${{ vars.AWS_ROLE_ARN_EXAMPLE }}
           ssm_parameter_pairs: '/sdk/detox/mobile-key = MOBILE_KEY'
 
-      - name: Set mobile key
-        run: echo "MOBILE_KEY=$MOBILE_KEY" > .env
-
-      - name: Expo prebuild
-        # HACK: Deleting ios/.xcode.env.local is needed to solve an xcode build issue with rn 0.73
-        # https://github.com/facebook/react-native/issues/42112#issuecomment-1884536225
+      - name: Enable KVM group perms (for performance)
         run: |
-          export NO_FLIPPER=1
-          yarn expo-prebuild
-          rm -rf ./ios/.xcode.env.local
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
 
       - name: Detox build
-        run: yarn detox build --configuration ios.sim.release
+        run: yarn detox build --configuration android.emu.release
+
+      - name: Get android emulator device name
+        id: device
+        run: node -e "console.log('AVD_NAME=' + require('./.detoxrc').devices.emulator.device.avdName)" >> $GITHUB_OUTPUT
 
       - name: Detox test
-        run: yarn detox test --configuration ios.sim.release --cleanup --headless --record-logs all --take-screenshots failing
+        uses: reactivecircus/android-emulator-runner@a3dcdb348bb02349cd939d168a74e31a9094b7f0
+        with:
+          api-level: 31
+          arch: x86_64
+          avd-name: ${{ steps.device.outputs.AVD_NAME }}
+          script: yarn detox test --configuration android.emu.release --headless --record-logs all
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: detox-artifacts
+          path: artifacts

packages/sdk/react-native/example/.detoxrc.js

@@ -50,7 +50,7 @@ module.exports = {
     emulator: {
       type: 'android.emulator',
       device: {
-        avdName: 'Pixel_3a_API_33_arm64-v8a',
+        avdName: 'Pixel_4_API_30',
       },
     },
   },

packages/sdk/react-native/example/.gitignore

@@ -39,3 +39,6 @@ ios
 android
 
 !yarn.lock
+
+# detox
+artifacts

packages/sdk/react-native/example/app.json

@@ -25,6 +25,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["@config-plugins/detox"]
   }
 }

packages/sdk/react-native/example/e2e/starter.test.ts

@@ -1,42 +1,35 @@
 import { by, device, element, expect, waitFor } from 'detox';
 
-describe('Example', () => {
+describe('given the example application', () => {
   beforeAll(async () => {
     await device.launchApp({
       newInstance: true,
       launchArgs: {
-        detoxURLBlacklistRegex: '\\("^https://clientstream.launchdarkly.com/meval"\\)',
+        // Detox will wait for HTTP requests to complete. This prevents detox from waiting for
+        // requests matching this URL to complete.
+        detoxURLBlacklistRegex: '\\("^https://clientstream.launchdarkly.com/meval.*"\\)',
       },
     });
   });
 
-  // For speed, all tests are sequential and dependent.
-  // beforeEach(async () => {
-  //   await device.reloadReactNative();
-  // });
-
-  afterAll(async () => {
-    await device.terminateApp();
-  });
-
-  test('app loads and renders correctly', async () => {
+  it('loads and renders correctly with default values', async () => {
     await expect(element(by.text(/welcome to launchdarkly/i))).toBeVisible();
-    await expect(element(by.text(/my-boolean-flag-1: false/i))).toBeVisible();
+    await expect(element(by.text(/sample-feature: false/i))).toBeVisible();
   });
 
-  test('identify', async () => {
+  it('can identify and evaluate with non-default values', async () => {
     await element(by.id('userKey')).typeText('test-user');
     await element(by.text(/identify/i)).tap();
 
-    await waitFor(element(by.text(/my-boolean-flag-1: true/i)))
+    await waitFor(element(by.text(/sample-feature: true/i)))
       .toBeVisible()
       .withTimeout(2000);
   });
 
-  test('variation', async () => {
-    await element(by.id('flagKey')).replaceText('my-boolean-flag-2');
+  it('can set a flag and has defaults for a non-existent flag', async () => {
+    await element(by.id('flagKey')).replaceText('not-found-flag');
 
-    await waitFor(element(by.text(/my-boolean-flag-2: true/i)))
+    await waitFor(element(by.text(/not-found-flag: false/i)))
       .toBeVisible()
       .withTimeout(2000);
   });

packages/sdk/react-native/example/package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@config-plugins/detox": "^8.0.0",
     "@types/detox": "^18.1.0",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.5",

packages/sdk/react-native/example/src/welcome.tsx

@@ -5,7 +5,7 @@ import { ConnectionMode } from '@launchdarkly/js-client-sdk-common';
 import { useBoolVariation, useLDClient } from '@launchdarkly/react-native-client-sdk';
 
 export default function Welcome() {
-  const [flagKey, setFlagKey] = useState('my-boolean-flag-1');
+  const [flagKey, setFlagKey] = useState('sample-feature');
   const [userKey, setUserKey] = useState('');
   const flagValue = useBoolVariation(flagKey, false);
   const ldc = useLDClient();