React Native mobile testing

Framework difficulties

Mobile testing can become a very cumbersome project to take on. Many QA engineers stick with manual testing for mobile platforms because of the difficulties of setting up automated test environments. The problem with mobile testing is that there are too many moving parts to implement into a continuous integration environment. Appium is a popular mobile testing framework, in a nutshell its an HTTP server that creates multiple WebDriver sessions (HTTP requests) in order to interact with Android and iOS mobile applications.

Running a test script with appium involves a couple of steps. First the QA engineer needs to start the mobile application and get it to run on an iOS or Android emulator. Once the emulator is up and running, the engineer then needs to start the appium server and have it communicate with the emulator, this synchronization process may take a couple of minutes. Once the connection is established the engineer can finally run the test script. Now imagine trying to get this to run on the cloud, there are too many variables that can eventually go wrong.

Gray box approach

Our mobile testing service is mainly geared towards React Native Android and iOS applications. React Native's write once, run everywhere single codebase approach greatly simplifies the test process. Instead of writing two sets of scripts, one for Android and the second for iOS, we can simply write it once and share it between mobile platforms. Gray box testing involves a QA engineer evaluating both the user interface and backend code. Tests are written with knowledge of the internal workings of an application. The example below shows our engineer identifying an email text input component within a react native application. A ref function identified as 'App.email' is then implemented inside the text input component in order to interact with the DOM.

 const { generateTestHook } = this.props;

    return (

      <View style={{marginTop: 100, width: '90%', margin: 20, }}>

        <TextInput
          label='Email'
          value={this.state.text}
          onChangeText={(text) => this.setState({text: text})}
          ref={generateTestHook('App.email')}
        />

        <Space />

Component testing

The mobile test case below calls on multiple ref functions and has them perform different tasks. Our test will automatically execute once the application fires up. By implementing our test hooks within the application code, we're eliminating a couple of steps from the appium process explained above. By eliminating the synchronization process between the test framework and the emulator, we're shaving off a couple of minutes from our test. We're also removing the extra step of waiting for our application to fully load in order to finally run our test script.

const TestableScene = hook(App)
export default TestableScene

export default function (spec) {
  spec.describe('Demo Screen', function () {
    spec.it('works', async function () {
      await spec.fillIn('App.email', 'fabiofns@gmail.com')
      await spec.fillIn('App.password', 'mypassword')
      await spec.fillIn('App.search', 'Search TEXT')

      await spec.press('App.button')
    })
  })
}