Comparing React Native code coverage and testing tools

React Native is a JavaScript framework for writing natively rendering mobile applications for iOS and Android. Working with React Native can dramatically reduce the resources required to build mobile applications.

In this tutorial, we’ll review various ways to test React Native apps and introduce you to some useful testing and code coverage tools for the React Native framework.

We’ll cover some automated methods to help you find and resolve bugs and issues faster, ranging from static analysis to end-to-end testing and test coverage reporting.

What is code coverage ?

Code coverage is a mechanism for measuring how much of your code has been tested. The code coverage report is an important matrix to measure how effective and well-written your code is.

Coverage reports provide feedback about your test implementation, which enables you to validate the quality and correctness of your codebase.

Types of testing in React Native apps

Before we compare testing and code coverage tools for React Native, it’s important to understand the difference between the various types of testing paradigms: static analysis, unit testing, integration testing, component testing, and end-to-end (E2E) testing.

Static analysis

The first way to improve code quality is to use static analysis tools.

Static analysis tools simply parse and validate the code against defined rules and deliver feedback so you can adjust the code accordingly. You can define your own rules for the static analysis or we use the recommended set of rules.

Popular static analysis tools for validating code in React Native apps include:

• ESLint, a code linter for enforcing certain code style. It analyzes the code and quickly find the problems. You can define your own set of rules or extend some predefined set of rules
• Prettier, a code formatting tool. Pettier ensures consistent code style throughout your project and reduces the potential for team members to commit conflicting code styles (e.g., indentation, line length, single or double quotes, etc.) to the codebase
• Type checking tools such as Flow and TypeScript

Unit testing

Unit tests cover the smallest parts of code, such as individual functions and classes. A unit test is designed to ensure that the individual units of your application work as expected in isolation.

Unit tests run in isolation and are easy to write and run. As a unit test runs, it delivers fast feedback about the success or failure of the test, including code coverage.

Integration testing

Once you’re sure your components are working as intended, you should verify whether they function well with others. In integration testing, you combine unit tests and test them together to ensure that they work as expected.

In other words, an integration test simultaneously evaluates several modules of your application.

Integration testing is the most crucial part of UI testing and can give you a lot of confidence that the features of your app function well.

Component testing

Component tests are tests of individual React Native components regardless of where they are used in an application.

Component testing enables you to create an instance of the component, pass it props, interact with it, and see how it behaves. This can make it quicker and easier to arrange edge cases that would be slow and difficult to set up with end-to-end tests.

End-to-end (E2E) testing

End-to-end testing is the practice of running our app on a real device or simulator and interacting with it like a real user would. Put simply, this means that a system is checking through your application. E2E testing frameworks enable you to find and control elements on the screen of your app.

Testing and code coverage tools for React Native

Now that we understand the various ways in which code is tested, let’s zoom in on some of the most popular and useful tools for testing and generating code coverage reports in React Native.

Jest

Jest is a JavaScript-based test runner that is used for creating, running, and structuring tests. You can install Jest as an npm package in your React Native project.

Jest was developed by Facebook and built into React, which makes it the default choice for testing React and React Native applications. It also ships with create-react-app as a default test setup. In addition to React, Jest works particularly well with Angular, Vue.js, and TypeScript.

Jest has built-in support for code coverage. This sets it apart from other top testing frameworks, many of which require you to add plugins to generate code coverage reports.

You can run Jest coverage simply by running npx jest --coverage or yarn --coverage. To generate code coverage reports in HTML or JSON, you need to enable coverageReporters in package.json:

"jest": {
     "collectCoverage": true,
     "coverageReporters": ["json", "html"],
 }

Jest enables you to run unit, integration, and snapshot tests with minimal configuration. Jest tests run in isolation, so one test doesn’t affect another test’s results; all test runs in parallel. Jest is easy to integrate with the CLI tools.

Jest is particularly useful for unit and integration testing in React Native. It’s easy to configure, run, and mock.

The official Jest documentation is well-written and up to date with current releases. It also enjoys wide community support.

Detox

Detox is a gray-box end-to-end testing and automation library that enables you to emulate app behavior on a real device. It is built from the ground up to support React Native projects as well as pure native ones. Detox also supports cross-platform device testing (real devices and simulators).

You can use Detox as an independent test runner or in tandem with another JavaScript test runner such as Jest, Mocha, or Ava. Designed for CI tools, it is easy to execute Detox E2E tests on CI platforms such as Travis, Jenkins. Detox runs on devices but is not yet supported on iOS.

Developers choose Detox because testing their apps on a real device or simulator enables them to see what it looks like to a real user. This is a great way to gain confidence that your app is functioning as you intend before you ship it.

Detox was developed by Wix specifically for automation testing in React Native. It’s a JavaScript-focused testing tool, making it an ideal choice for React Native developers. As such, Detox automation tests work well with Jest unit tests.

Appium

Appium is a mobile application testing framework that supports React Native-based apps out of the box.

If Detox is a gray-box testing framework, we can think of Appium as the black-box version. Appium makes is easy to write test cases for both Android and iOS platforms when working with React Native. Selenium, the underlying web driver, works as a bridge between Appium and mobile platforms to deploy and execute tests.

Appium is used for unified testing of web and mobile apps. It supports advanced test automation and has full toolchain integration. All the test results are in one place, including test reporting and analytics.

Appium has a higher rate of flakiness than Detox. Because Detox is JavaScript-focused, in most cases, it’s a more appropriate choice than Appium for JavaScript developers looking to conduct automation testing on their React Native apps. That said, a selling point of Appium for React Native developers is that you can use it in tandem with any other testing framework.

Jasmine

Jasmine is a testing framework designed for testing JavaScript code. It doesn’t have any dependency on the browser or DOM. Jasmine provides a small syntax that enables you to test small units of your entire application instead of testing it as a whole.

Jasmine does not depend on any other JavaScript framework. All the syntax used in the Jasmine framework is clean and obvious. Jasmine is an open-source framework and available in various forms, including a standalone version and versions for Ruby Gem, Node.js, etc.

Jasmine is a great tool for testing and evaluating code coverage for React Native developers because it’s fast and has no external dependencies. It’s designed specifically for testing JavaScript code and can be used as a standalone or with another library such as Karma. In addition, Jasmine focuses on unit testing and is not exclusive to behavior-driven development.

Karma

Karma is another testing tool for JavaScript-based applications. It is a Node-based tool and installed via npm.

Karma is based on the plugins that enable you to write tests with other assertions and testing frameworks. This makes it easy to configure and execute tests fast. The testing tool runs in an actual browser environment.

Karma generates coverage reports using CodeCov and Istanbul. On running tests, it will generate test coverage in a new coverage folder. You can access the coverage report by opening the index.html file from the coverage folder.

Karma is a test runner, so for testing and assertion, we can use Jasmine, Mocha, and QUnit. It runs tests on the browser and real devices. Since it is a test runner, Karma requires plugins to execute a test. It is easy to configure and set up.

Summary

Code coverage reports help you evaluate your test implementation. With the help of a code coverage report, you can easily sniff out unused and dead code to improve both the developer experience as well as the performance of your app. In addition, testing and code coverage reporting enables you to maintain and track the health of your application.