ReactNative app interact with end to end test (e2e)

Generate a new react-native app call AwesomeProject

react-native init AwesomeProject

cd AwesomeProject

npm install react-native-paper

npm install react-native-vector-icons

react-native link react-native-vector-icons

yarn add @react-native-community/async-storage

react-native link @react-native-community/async-storage

react navigation

npm install --save react-navigation

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler

Install Detox

1.Brew update and install node

brew update && brew install node

2.Install applesimutils

brew tap wix/brew
brew install applesimutils

3.Install Detox command line tools (detox-cli)

npm install -g detox-cli

4.Add Detox to project

npm install -g detox-cli

5. Add Detox config to package.json

Change AwesomeProject to your actual project name.

package_json_—_AwesomeProject

"detox": {
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/AwesomeProject.app",
        "build": "xcodebuild -project ios/AwesomeProject.xcodeproj -scheme AwesomeProject -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    }
  }

6. Add jest

Detox CLI supports Jest and Mocha out of the box. In this demo I’m choosing ‘jest’

npm install jest --save-dev

7. Generate the test scaffolds

detox init -r jest

Ater generating the test scaffolds we should see the folder e2e

README_md_—_AwesomeProject

If

If you see this error

detox[18158] ERROR: [cli.js] Error: Command failed: xcodebuild -project ios/AwesomeProject.xcodeproj -scheme AwesomeProject -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build

1____Documents_projects_react-native_AwesomeProject__zsh_

Open new terminal tab run

react-native run-ios

If still see error let open X-code and follow steps bellow:

open ios/AwesomeProject.xcodeproj

From File choose Project Setting

Screenshot_28_5_19__10_56_PM

Change Build System to Legacy Build System

AwesomeProject_xcodeproj_and_New_Issue_·_mymai91_ReactNativeDetox

Try again

detox build

detox test

eslint

If you are setting Eslint, at .eslintrc.js should add default in globals block

globals: {
  fetch: false,
  detox: true,
  device: true,
  expect: true,
  waitFor: true,
  element: true,
  by: true,
}

Demo

Requirment is: If you have not login yet you should see Login screen else should see Home screen

This is test case

describe('App', () => {
  beforeEach(async () => {
    await device.reloadReactNative()
  })

  describe('Have not login yet', () => {
    it('should show up Login screen', async () => {
      await expect(element(by.id('login_title'))).toBeVisible()
    })

    it('should redirect to Home screen when login successfully', async () => {
      await expect(element(by.id('login_userName'))).toBeVisible()
      await element(by.id('login_userName')).typeText('janymai')
      await element(by.id('login_password')).typeText('password')
      await element(by.id('login_button')).tap()
      await expect(element(by.id('home_title'))).toBeVisible()
    })
  })
})

NOTE If your test case fail in .typeText please make sure you disable connect hardware keyboard

Should turn on emulator then follow step bellow:

Screenshot_2_6_19__11_27_PM

^___^

Jany Mai