rnAppium

React Native Testing Tutorial

Stack

React Native
Appium
CircleCI

Steps

Obs.: Replace rnAppium with your app name in each step.

Create new React Native app

npx react-native init rnAppium

Enter into the app directory

cd rnAppium

Add dependences

yarn add react-native-testid

Cleanup App.js

code ./App.js

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
import testID from 'react-native-testid';

const App = () => {
  return (
    <SafeAreaView>
      <StatusBar />
      <View {...testID('app-root')}>
        <Text {...testID('text')} style={styles.text}>
          This is a sample project.
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  text: {
    textAlign: 'center',
    marginTop: 96,
    fontSize: 24,
  },
});

export default App;

Create test

code ./test/specs/App.test.js

const {expect} = require('chai');

describe('Running a sample test', () => {
  beforeEach(() => {
    $('~app-root').waitForDisplayed(11000, false);
  });

  it('Text is correct', () => {
    const text = $('~text').getText();
    console.log({text});
    expect(text).to.equal('This is a sample project.');
  });
});

Add dev dependences

yarn add --dev \
     @wdio/appium-service \
     @wdio/cli \
     @wdio/local-runner \
     @wdio/mocha-framework \
     @wdio/spec-reporter \
     @wdio/sync \
     appium \
     chai

Create script to build Android

code ./scripts/build-android.sh

mkdir -p ./android/app/src/main/assets
react-native bundle \
             --platform android \
             --dev false \
             --entry-file index.js \
             --bundle-output ./android/app/src/main/assets/index.android.bundle \
             --assets-dest ./android/app/src/main/res
cd android
./gradlew assembleDebug
echo 'File should be generated: android/app/build/outputs/apk/debug/app-debug.apk'

Ensure to .gitignore Android bundle

echo "android/app/src/main/assets/index.android.bundle" >> .gitignore

Create script to build iOS

code ./scripts/build-ios.sh

xcodebuild -workspace ./ios/rnAppium.xcworkspace \
           -configuration Release \
           -scheme rnAppium \
           -sdk iphonesimulator \
           -derivedDataPath ./ios/build

Add scripts to package.json

code ./package.json

...
  "scripts": {
    ...
    "test:build:android": "bash scripts/build-android.sh",
    "test:build:ios": "bash scripts/build-ios.sh",
    "test:android": "wdio wdio.conf.android.js",
    "test:ios": "wdio wdio.conf.ios.js",
    ...
  },
...

Create WebDriver configuration for Android

code ./wdio.conf.android.js

exports.config = {
  runner: 'local',
  port: 4723,
  specs: ['./test/specs/**/*.js'],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      platformName: 'Android',
      //platformVersion: '10',
      deviceName: 'emulator-5554',
      app: './android/app/build/outputs/apk/debug/app-debug.apk',
      automationName: 'UiAutomator2',
      acceptInsecureCerts: true,
    },
  ],
  logLevel: 'info',
  bail: 0,
  baseUrl: 'http://localhost',
  waitforTimeout: 10000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,
  services: ['appium'],
  framework: 'mocha',
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000,
  },
};

Create WebDriver configuration for iOS

code ./wdio.conf.ios.js

exports.config = {
  runner: 'local',
  port: 4723,
  specs: ['./test/specs/**/*.js'],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      browserName: 'iOS',
      appiumVersion: '1.21.0',
      platformName: 'iOS',
      //platformVersion: '14.3',
      deviceName: 'iPhone 12',
      app: './ios/build/Build/Products/Release-iphonesimulator/rnAppium.app',
      automationName: 'XCUITest',
      acceptInsecureCerts: true,
    },
  ],
  logLevel: 'info',
  bail: 0,
  baseUrl: 'http://localhost',
  waitforTimeout: 10000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,
  services: ['appium'],
  framework: 'mocha',
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000,
  },
};

Run tests locally for Android

yarn test:build:android
emulator -avd Pixel_3a_API_30_x86 &
yarn test:android

Run tests locally for iOS

yarn test:build:ios
# npx react-native run-ios --configuration Release # alternatively
yarn test:ios

Create CircleCI configuration

code ./.circleci/config.yml

version: 2.1

orbs:
  android: circleci/android@1.0.3

jobs:
  build-and-test-android:
    executor:
      name: android/android-machine

    steps:
      - checkout

      - run:
          name: Node 14 Repo
          command: 'curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -'

      - run:
          name: Install Node
          command: 'sudo apt-get install -y nodejs'

      - run:
          name: Install Yarn
          command: 'sudo npm install -g yarn'

      - restore_cache:
          key: dependency-cache-{{ checksum "yarn.lock" }}

      - run:
          name: Install Dependencies
          command: yarn

      - save_cache:
          key: dependency-cache-{{ checksum "yarn.lock" }}
          paths:
            - ./node_modules

      - run:
          name: Create Build
          command: yarn test:build:android

      - android/accept-licenses

      - android/create-avd:
          avd-name: emulator-5554
          install: true
          system-image: system-images;android-29;default;x86_64

      - android/start-emulator:
          avd-name: emulator-5554
          post-emulator-launch-assemble-command: ''

      - android/run-tests:
          test-command: yarn test:android

  build-and-test-ios:
    macos:
      xcode: 12.4.0

    steps:
      - checkout

      - run:
          name: Install Yarn
          command: brew install yarn

      - restore_cache:
          key: dependency-cache-ios-{{ checksum "yarn.lock" }}

      - run:
          name: Install Dependencies
          command: yarn

      - save_cache:
          key: dependency-cache-ios-{{ checksum "yarn.lock" }}
          paths:
            - ./node_modules

      - restore_cache:
          key: dependency-cache-ios-pods-{{ checksum "./ios/Podfile.lock" }}

      - run:
          name: Pod Install
          command: cd ios && pod install

      - save_cache:
          key: dependency-cache-ios-pods-{{ checksum "./ios/Podfile.lock" }}
          paths:
            - ./ios/Pods

      - run:
          name: Create Build
          command: yarn test:build:ios

      - run:
          name: Run Tests
          command: yarn test:ios

workflows:
  sample:
    jobs:
      - build-and-test-android
      - build-and-test-ios # require CircleCI paid plan

Add files to Git

git init
git add .
git commit -m "Basic config to run tests"

Create GitHub repo and push the code

git remote add origin git@github.com:jpbarbosa/rnAppium.git
git push -u origin main

Setup CircleCI project

Go to https://circleci.com/
Create a free account using GitHub SSO
Select "Projects" (on the left menu)
Filter by the repo name
Click "Set Up Project"
Select already have ".circleci/config.yml"
Select the branch (main)
Click "Let's Go"

The test will start running and should be successfully completed in about 10 minutes.

Screenshots

https://github.com/jpbarbosa/rnAppium/wiki/Screenshots

More Info

Based on previous studies by @carlosvini and @Dugo03.