Testing React Native apps

Unit testing for React Native

For unit testing, React Native includes Jest tests by default, which work on both Android and iOS. According to Facebook, React Native will introduce more unit-testing capabilities, and users can already build their own. However, test coverage isn't perfect yet.

As with JUnit's TestCase class, every test case begins with a describe() function call. There are two parameters to the describe() function: a title description and a function to execute. An it() function consisting of all test steps returns a list of expect() functions.  

Below is an  example

describe("Music", function() {
  var music;
  var song;

  beforeEach(function() {
    music = new Music();
    song = new Song();
  });

  it("should be able to play a song", function() {
    music.play(song);
    expect(music.currentlyPlayingSong).toEqual(song);

    // demonstrates use of custom matcher
    expect(music).toBePlaying(song);
  });

  describe("when song is paused", function() {
    beforeEach(function() {
      music.play(song);
      music.pause();
    });

    it("should indicate the song is paused", function() {
      expect(music.isPlaying).toBeFalsy();

      expect(music).not.toBePlaying(song);
    });

    it("should be possible to resume", function() {
      music.resume();
      expect(music.isPlaying).toBeTruthy();
      expect(music.currentlyPlayingSong).toEqual(song);
    });
  });

  it("shows the current song whether the user has made it a favorite", function() {
    spyOn(song, 'persistFavoriteStatus');

    music.play(song);
    music.makeFavorite();

    expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
  });

  // demonstrates use of expected exceptions
  describe("#resume", function() {
    it("should throw an exception if song is already being played", function() {
      music.play(song);

      expect(function() {
        music.resume();
      }).toThrow("song is already being played");
    });
  });
});

Using this example, we show how Jasmine can be used to test functionality, however, it keeps the testing focused on method-level functionality   

Integration testing for React Native

As part of React Native testing through integration tests, native and JavaScript components are required for communication through the bridge. Cavy is a cross-platform and integration-testing framework for React Native.

In Cavy, deep nested components within an app can be referred to and simulated by React ref generated functions. It is possible for Cavy to run seamlessly on a host device.  

The top-level JavaScript file you need for your application should import Tester, TestHookStore, and the specs:    

import React, { Component } from 'react';
import { Tester, TestHookStore } from 'cavy';
import AppSpec from './specs/AppSpec';
import App from './app';

const testHookStore = new TestHookStore();

export default class AppWrapper extends Component {
  render() {
    return (
      <Tester specs={[AppSpec]} store={testHookStore} waitTime={4000}>
        <App />
      </Tester>
    );
  }
}

Then, add references to the components and use generateTestHook() to generate the hooks. You can set your own ref generating function by specifying a second argument to generateTestHook(). It is not possible to assign a ref to functional components since they do not hold any instances.  

import React, { Component } from 'react';
import { TextInput } from 'react-native';
import { hook } from 'cavy';

class Scene extends Component {
  render() {
    return (
      <View>
        <TextInput
          ref={this.props.generateTestHook('Scene.TextInput')}
          onChangeText={...}
        />
      </View>      
    );
  }
}

const TestableScene = hook(Scene);
export default TestableScene;

It is now possible to reference the already hooked components in the spec functions.

export default function(spec) {
  spec.describe('Feature', function() {
    spec.it('works', async function() {
      await spec.fillIn('Scene.TextInput', 'random string')
      await spec.press('Scene.button');
      await spec.exists('NextScene');
    });
  });
}

Then instead of registering the current App component with AppRegistry, register the AppWrapper:

AppRegistry.registerComponent('AppWrapper', () => AppWrapper);

The following set of spec helpers are available:

// The string is filled in with the identified component. OnChangeText should be responded to by the component.
fillIn(identifier, str)

// Identifies and presses the component. When onPress is called, the component must respond.
press(identifier)

// This causes the test to pause for the length of time specified in milliseconds.
pause(integer)

// If the component is identified or is visible on the screen, this method returns true
exists(identifier)

// A true value is returned if the component cannot be identified or does not appear on screen.
notExists(identifier)

// Returns the identified component. Can be used if the component doesn't respond to either onChangeText or onPress.
findComponent(identifier)

Mocha, a JavaScript test framework that runs on Node.js, is a great alternative for unit testing and integration testing.

Functional testing for React Native

There are a variety of open-source test-automation frameworks available to streamline the app development process and maximize testing coverage. Frameworks that support multiple platforms and can provide a solid foundation for test automation are the best choice.

There are also several platforms-specific frameworks available. Since every framework is built for a particular platform, it is generally easier to adopt for that platform.

Here is a simple example:

<Radio onSelect={this.onSelect.bind(this)} defaultSelect={this.state.optionSelected - 1}>
  <Option color="blue" selectedColor="#0000FF">
    <Item title="First option" description="First radio button"/>
  </Option>
  <Option color="blue" selectedColor="#0000FF">
    <Item title="Second option" description="Second radio button"/>
  </Option>
  <Option color="blue" selectedColor="#0000FF">
    <Item title="Third option" description="Third radio button"/>
   </Option>
</Radio>

Each framework section includes examples of how the scripts deal with UI elements and how clicks and other user input are handled. These examples are intended to compare and illustrate what options are available for test automation and which programming languages can be used.

Frequently Asked Questions

What is React Native unit testing?

The practice of unit testing involves testing small, isolated pieces of code. According to React Native, unit tests are meant to cover the tiniest pieces of code, such as individual functions or classes. 

How can a React application be tested in different ways?

There are three main paradigms for software testing: unit testing, functional testing, and integration testing.

How does snapshot testing work?

When you want to ensure that your UI does not change unexpectedly, snapshot tests are a very useful tool. As part of the snapshot test case, the UI component is rendered, a snapshot is taken, and the snapshot is compared to a reference snapshot that is stored alongside the test.  

What is the best testing framework for React?

JavaScript unit testing framework JEST was the most popular in 2020. The framework of choice for React-based web apps is Jest. As well as React, Jest offers support for Angular, VueJS, NodeJS, and other languages.

Which is the best testing library for React?

It makes it possible to easily test your React Components' output by using Enzyme, a JavaScript testing tool. Airbnb created and maintains Enzyme, which is widely used by developers alongside other third-party libraries such as Jest and Chai. 

Conclusion

We have reviewed various approaches to testing React Native apps, and how to test them using various frameworks. In addition to mobile apps, hybrid apps, mobile web apps, and React Native apps are all covered here with test-automation frameworks that are widely accepted and used. Mobile app programming languages aren't critical since they don't have any bearing on test-automation frameworks.

Check out this link if you want to learn React.js. Read about the basics of testing by following this link. Nevertheless, you may consider our paid courses to give your career an edge over others! Do upvote our blogs if you find them helpful and engaging!

Happy Learning!