E2E APPIUM REACT NATIVE TESTING

by Abdo Arwish on November 22

Testing is a considered an important aspect of software development cycle, its what we all do (or should be doing 🙂) but not often talk about, at the early stages of learning software development, I didn’t find a reason why I might write tests for my code, I have tested the functionalities manually and it worked, so why write more code, but once the scale of the projects increased and with changing and more demanding features the need for testing became obvious, we want to make sure that everything works well in the way we expect as the project scales.

React native testing

In the context of react native environment, we are not necessarily native, we are not necessarily js we kinda have both going on and the fact that we are developing for both ios and android we know that we might expect different user interactions, so in order to accommodate for all of those we need a mix of test strategies to make sure our code works well

Snapshot Testing

snapshot tests are arguably one of the easiest to use tests they are useful whenever you have common styling used around the app or certain parts of your view that you want to make sure never change unexpectedly.

Unit Testing

Unit tests are typically automated tests written and run by software developers to ensure that a section of an application (known as the “unit”) meets its design and behaves as intended.[1]

And by definition We might be sure that everything works as expected individually but when we but everything together it might not work

e.g: Wheels of a truck and a Beetle car might work independently but if we put them together they might not behave as expected

End to End Testing

End to End testing (E2E testing) refers to a software testing method that involves testing an application’s workflow from beginning to end. This method basically aims to replicate real user scenarios so that the system can be validated for integration and data integrity.[2]

One of the most popular solutions of E2E testing is Appium, So without further a do lets start setting up our E2E tests for it

Appium Setup

Step 1: Create a new React Native project:

react-native init Testing Project

Step 2: Run the iOS / android app:

react-native run-ios
react-native run-android

Step 3: Install Appium & Appium doctor dependencies:

npm install -g appium appium-doctor

Step 4: Now let’s run the Appium doctor

npx appium-doctor

Appium Doctor is a dependency that we use to check if the appium environment is setup correctly

If all is fine on this step, we are good to go 🎉

Step 5: Now lets install the Web-Driver

npm install wd

Web driver is dependency that allows Appium to drive the app as a real user would, either locally or on a remote machine

Step 6: Now that all the dependencies are installed, let’s modify the App.js to run the test on.

We added a button, switch, text input and text component

Step 6:

Add this test helper function to the app.js file

Appium uses AccessabliltyLabel and testID to access elements on iOS & android, for convenience that function adds both at once.

Adding the function as a prop to each component with the a unique test Id

Step 7:

Now lets add the configurations for Appium with access to the iOS.app and android.apk files

Make a new file appiumConf.js in the “__tests__” directory ./__tests__/appiumConf.js

since iOS is nested inside the derived data and it may differ from a device to another we are looping through the folders and accessing the one that contains the project name

Step 8:

let’s start writing our test inside the same “__tests__” directory ./__tests__/firstTest.appium.spec.js

• we are importing wd and the configuration we want to use from the previous step in this case we are using the iOS config
• Setting the web driver port
• Setting the default timeout for the test
• Adding beforeAll to initiate the driver with the chosen settings

Next on the same file add the test scenario

On each case of the test blocks

• We are waiting for Appium to check for an element with a specific testId
• Once it’s found we are assigning the element to a variable
• Then for each element we are sending the action we want to test

Step 9:

Start the Appium server on the terminal:

npm run appium

Now appium is listening on the default port 4723

Step 10:

Finally, let’s run the test on the project folder
Note: iOS may take over a minute to start the test for the first time and you will be asked to allow communication over the network for the web driver to work

npm test firstTest.appium.spec.js

That’s it, Congratulations 🎉, have a look at the full example in this github repository.

I hope this was helpful and please reach out to me in case you have any questions.