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 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 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.
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.
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
Step 1: Create a new React Native project:
react-native init Testing Project
Step 2: Run the iOS / android app:
react-native run-iosreact-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
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
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.
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
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
Start the Appium server on the terminal:
npm run appium
Now appium is listening on the default port 4723
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.