Hey guys! How’s it going?! Last tutorial we talked about unit testing and covered our redux implementation with tests using jest snapshot tool.

Today we’re going to focus on a different type of testing, integration and end-to-end tests. While unit testing focuses on testing a feature or a component in complete isolation, integration testing is usually linked to external dependencies like a database or the network. The goal is to simulate user flows and check the behavior of the components on the screen.

We’re going to make integration tests using Detox, by Wix.

Although Detox may seem easy to use, it has concepts we must understand before writing our tests.

This introduction probably won’t be enough to understand how Detox works. For that you must dive into Detox docs.

Matchers

Matchers find elements in your app that match one or more properties. It’s used to search for components that we want to test.

Examples:

Actions

Detox uses actions to emulate user interaction with the matched elements.

Examples:

Expectations

Expectations allow you to check that an element has the expected value or property.

Examples:

Setup

The setup of Detox is trivial, just follow the instructions on GitHub or check the tutorial repository.

Sample app

Integration tests

First we’re going to test the Header component. It has two main features:

display the current league or team name

open drawer

Header Component

Running these tests with ‘detox build && detox test’ will result in:

E2E test

Now we want to test a team screen opening.

For that we will need to simulate three actions:

Open drawer menu

Tapping the respective league

Tapping the respective team we want to open

Let’s go deeper

Now that we can test the opening of a league and a team, we can automate multiple tests with different leagues and teams!

Running these will result in:

Although Detox makes it easy build E2E tests you have to be careful to not go overboard with these. E2E and integration tests usually take a lot of time to run, so you should structure your tests according to the Test Pyramid. This will make it easier to keep a healthy and fast test suite. Of course there are bugs that you can only detect by using these types of tests, so don’t be afraid to use them when necessary!

As always, check the GitHub repository to see the test setup.

https://github.com/weareredlight/react-native-tutorials

Happy coding! 👨‍💻