How to do End-to-End (E2E) Testing for React Native Android using Jest and Appium

This tutorial is a simple step-by-step guide on how to setup Appium and Jest for React Native Android. I was looking for a step-by-step guide, but had difficulty finding one, so I decided to write my own. Hopefully this can help you out.

Note: This tutorial only covers Android. If you want to run Appium on AWS Device Farm to test your app on real devices, you will need to use Appium Python. They do not support Appium JS. An Appium Python tutorial centered around AWS can be found here.

Appium is a way to automate manual user input for End-to-End (E2E) testing.

Jest is Facebook’s Javascript testing framework. It comes with pretty much everything you’ll need for testing.

Setup

Follow the letter that best applies to you to setup your React Native project.

A. I’m just starting a React Native project!

Follow the official Facebook guide to start a React Native project. Be sure to select Building Projects with Native Code.

B. I have an older React Native project already!

Install Jest: yarn add --dev jest

Enable ES6+ syntax for Jest (mainly for import, async/await):

yarn add --dev babel-preset-react-native

Add a .babelrc file at the root of your project:

{
  "presets": ["react-native"]
}

Once you have done either A or B, continue below…

Install appium, appium-doctor

yarn add --dev appium appium-doctor

Add appium related scripts to package.json

Run appium-doctor

yarn run appium-doctor

You will need to fix the errors appium-doctor throws. However, for the purposes of testing Android, you can ignore anything iOS related (xCode, Carthage).

Install webdriver

yarn add --dev wd

Start appium server

yarn run appium

Take a note of the port, you’ll need it later (default port is 4723).

Basic Test

Now that we’re all setup, let’s write our first test. Save it to: ./__tests__/appium.test.js. We’ll be building upon this file later.

This basic test just checks that a view with the accessibilityLabel="testview" exists and that a view with accessibilityLabel="notthere" does not exist.

Some things to watch out for:

1. jasmine.DEFAULT_TIMEOUT_INTERVAL : This is set because otherwise you run into errors with async functions timing out.
2. The app path in the config is relative to the root of your project. Not relative to the test file.
3. You need to sleep the test runner with driver.sleep(...) while you wait for the app to load.

You might be wondering, “Why accessibilityLabel?”. Well that’s how we look up elements when doing testing with Appium and React Native. This is also compatible with iOS testing on Appium. Supposedly there will be testID support in the future, but for now this is the recommended way.

Let’s add the accessibilityLabel="testview" to the root of our app’s view in ./index.android.js.

Run the test

1. Start emulator
2. Start React Native dev server: react-native start
3. yarn test
4. Your test should be passing!

Button Click Test

Add the following code to ./__tests__/appium.test.js.

Let’s add a button that increments a on-screen counter. Your ./index.android.js should look like this now:

Run the test. You should see the app clicking the button by itself and the counter should increment. Your tests should all pass.

Text Input Test

Add the following code to ./__tests__/appium.test.js.

Let’s add a text input that updates a on-screen text view. Your ./index.android.js should look like this now:

Run the test. You should see the app enter some text into the input. Your tests should all pass.

Congrats!

Just one last tip…

Appium Desktop (Inspector Mode)

Appium Desktop has a helpful Inspector Mode that:

…you can use to look at your app’s elements, get basic information about them, and perform basic interactions with them. This is useful as a way to learn about Appium or as a way to learn about your app so you can write tests for it.

You can download it from here.

Setup

1. Start Android emulator
2. Start Appium Desktop server
3. Click on “Start Inspector Session”
4. Automatic Server > Desired Capabilities
5. 1st row:platformName, text, Android
6. 2nd row:deviceName, text, Android Emulator
7. 3rd row:app, text, (Absolute path to your apk)
8. Start the Inspector

Full Code

The full code for this tutorial is located here:

hyperh/appium-tutorial

Additional Reading

• All commands for webdriver (It’s a bit long)
• Appium config
• Another tutorial: https://github.com/garthenweb/react-native-e2etest