Test React Native Apps with Cypress

Cypress for React Native testing create it easy for QA team to validate app functionality, UI, and API calls with speed and accuracy.

By leveraging Cypress ’ s automation powerfulness, developers can run tests in real browsers and simulate existent user conditions. With React Native ’ s cross-platform tractability, Cypress ensures robust, dependable app testing across web, Android, and iOS.

This article explains what React Native apps are, how to test them with Cypress, how to validate APIs, and why go on real devices guarantee truth.

What is a React Native Application?

React Native is an open-source JavaScript-based framework, that supports construction apps on multiple platforms such as Android, iOS, and web applications. The conception hither is utilizing the same code base for building all different eccentric of applications.

React Native countenance you to access native views, APIs, and components. So the development will be quicker and more efficient.

Building React Application

The Expoframework facilitate to make Native React Applications. It back Andriod, iOS, and Web Applications establish from the same code base. Expo has listed many useful examples inGithub.

Using Expo you can establish a uncomplicated React native app:

1. Install expo from npm:npm install expo
2. Create native app with commandnpx create-react-native-app & # 8211; template & lt; Example & gt;
3. Follow theguidelines.
   1. Install expo clito run your appnpm i -g expo-cli
   2. Navigate to your app directory and enter the command:npm run web
   3. The covering launches in your browser window. Typically it charge tohttp: //localhost:19006/
   4. If you have taken a white React undertaking template, it should look like the image below. One elementary page.

Note:Port might modify. Check the console log once you run the command.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Here we feature created a react app from an expo blank project template. It contains a minimum set of codification.App.jsis the main source code, and it appear like below:

import {View, Text} from `` react-native ''; export default office App () {return (& lt; View style= {{flex: 1, justifyContent: `` centerfield '', alignItems: `` heart '',}} & gt; & lt; Text & gt; Universal React with Expo & lt; /Text & gt; & lt; /View & gt;);}

This is done to set up React Applications on your gimmick.

How to perform React app testing with Cypress

Bear in mind that all must be fulfill on real browsers for accurate answer. Start running tests on 30+ versions of the latest browser across Windows and macOS with BrowserStack. Use clamant, hassle-free parallelization to get faster results without compromising on truth. Detect bugs before users do by quiz software in with BrowserStack.

The Cypress offers detail guidelines on setting up Cypress.

At a minimum, we have to do the following:

1. Install Cypress:npm install cypress
2. Open Cypress Project:npx cypress open

At this point, Cypress create all basic construction of directory.

Now, view our exemplar.

Expo my-react-appruns on the addresshttp: //localhost:19006/so we demand to navigate to this address to test our app.

Our previously make expo app has only one set of text that is “ Universal React with Expo ”. Let & # 8217; s validate this with a simple Cypress book.

In your integration folder, createfirsttest.jsfile and add the Cypress script to validate:

describe ('My First Test ', () = & gt; {it ('Verify Text ', () = & gt; {cy.visit ('http: //localhost:19006/ '); cy.get (`` div [id='root '] '') .should ('have.text ', 'Universal React with Expo ');});})

In the above code, we are navigating to our local site, and verify whether the textbook exists or not.

Validating API calls with React Native and Cypress

Most React Native apps call API endpoints internally so we should be able to formalise that as well with Cypress.

Consider that we have a React app that has an API call.

React Application Code

import React, {useEffect, useState} from 'react '; importation {ActivityIndicator, FlatList, Text, View} from 'react-native '; export default function App () {const [isLoading, setLoading] = useState (true); const [information, setData] = useState ([]); useEffect (() = & gt; {fetch ('https: //reqres.in/api/users? page=1 ') .then ((response) = & gt; response.json ()) .then ((json) = & gt; setData (json.data)) .catch ((mistake) = & gt; console.error (erroneousness)) .finally (() = & gt; setLoading (mistaken));}, []); homecoming (& lt; View style= {{flex: 1, padding: 24}} & gt; {isLoading? & lt; ActivityIndicator/ & gt;: (& lt; FlatList accessibilityLabel= '' users '' data= {data} renderItem= {({particular}) = & gt; (& lt; Text testID= '' user '' & gt; {item.id}, {item.first_name}, {item.email} & lt; /Text & gt;)} / & gt;)} & lt; /View & gt;);};

The code above calls API& # 8216; https: //reqres.in/api/users? page=1which retrovert a set of JSON value. We should be able to assert the contents of body and status, etc.

Cypress Script to Validate API calls in React Native App

describe ('My First Test ', () = & gt; {it ('Verify API ', () = & gt; {cy.intercept (' * /users? * ') .as ('users '); cy.visit ('http: //localhost:19006/ '); cy.wait (' @ exploiter ') .then (({response}) = & gt; {require (response.statusCode) .to.eq (200) expect (response.body.data.length) .to.eq (6) expect (response.body.data [0] .email) .to.eq ('george.bluth @ reqres.in ')})});})

In the code above, we are using the Cypress Intercept feature, wait for API to load. Then we are fetching the response from the API, validating it inside our exam:

This way we can prove React Native Apps in Cypress. Furthermore, we can set the viewport and change it to a different twist resolve in order to test the mobile web applications as well.

A major advantage of scat Cypress tests on BrowserStack is that it will register videos of examination executing. Gratuitous to say, this is vastly helpful when it arrive to place and debugging unexpected error or glitch.

With the many advantages Cypress provides, it is natural that QAs want to conduct trial utilise this peculiar mechanization fabric. While it may seem slenderly complicated at first, merely follow the step draft in this article, and Cypress testing will become a regular, easily accomplished task.

Related Guides