How to Perform Cypress React Native App Testing

Getting Started With Cypress React Native App Testing

Let’s explore how to run a Cypress React Native app test in a local development server.

Set up a Project

To get started with Cypress React Native app testing, you need to set up your development server to run the app.

Since Cypress requires a DOM environment, we will use Expo to render a React Native app in a browser.

• Clone this GitHub repository for Cypress React Native app testing.
• Install the required dependencies using the following command.

npm install

• Start the development server using the following command:

npm start

This will open the web application at http://localhost:8081. The npm start command internally runs expo start to launch the web application via Expo CLI.

Note: Run Cypress tests across 40+ browser versions on the cloud. Try TestMu AI Today!

Install Cypress

Before writing your Cypress React Native app tests, make sure your web application is running at http://localhost:8081/.

• Install Cypress as a dev dependency using the command below:

npm i -D cypress

• Open the Cypress Test Runner using the command below:

npx cypress runner

• Set a global baseUrl in Cypress. This URL indicates where the web application runs.

import { defineConfig } from "cypress";
export default defineConfig({
  e2e: {
     "baseUrl": "http://localhost:8081/",  // This is the base URL
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },  
  },
});

Write the Tests

Once Cypress is set up correctly, you’ll find a sample test spec.cy.js file in the default cypress/e2e/ folder.

To organize your tests better, rename this file to hello.cy.js. Then, replace the contents with the test code below:

/// <reference types="cypress" />
describe('select the hero text from the hero overlay image', ()=>{
  it('Select and assert if the hero text exits', () => {
    cy.visit('/')
    cy.contains('24/7 online shopping, delivered anywhere you are!')
      .should('be.visible')
  })
})

In the above test file, the cy.visit(‘/’) command navigates to the root file component in the React Native app.

And then, the cy.contains() method gets the DOM element that contains the text argument. The should() command is used to set an assertion for the element to be visible.

This test ensures that the main banner text “24/7 online shopping, delivered anywhere you are!” is rendered correctly in the browser.

Run the Tests

To launch the Cypress Test Runner, run the following in your terminal:

npx cypress open

Then, select the hello.cy.js file from the test list in the Cypress Test Runner. Click to run the test, and you should see it pass.

Validating Dynamic Content in React Native Using Cypress

It is important to ensure React Native apps function as expected during tests, especially as UI behavior depends heavily on dynamic state changes.

The testID Props in React Native

In React Native, UI components don’t support traditional attributes like id or class. Instead, you use the testID prop to assign a unique identifier to a component for testing. This enables Cypress to target and interact with components during tests.

Example:

<View style={styles.overlayContent}>
  <Text style={styles.overlayText}>{heroText}</Text>
  <TouchableOpacity
    testID="button"
    style={styles.button}
    onPress={() => alert('Button Pressed!')}
  >
    <Text style={styles.buttonText}>Get Started</Text>
  </TouchableOpacity>
</View>
</ImageBackground>
</View>

For Cypress, the test will look like:

describe('click the hero button', ()=>{
    it('interact with the hero button and make a click', ()=>{
        cy.visit('/')
        cy.get('[data-testid=button]').click().should('be.visible')
    })
})

Validate State in React Native

State management in React Native is commonly handled using the useState hook, which tracks and updates values dynamically based on user interactions.

Here’s an example of a Rate component that updates a counter each time a button is clicked. This test verifies that the button click correctly updates the state and UI.

export default function Rate() {
    const [count, setCounter] = useState(0)


  return (
    <View style={styles.rateWrapper}>
        <TouchableOpacity testID="buttonRate" style={styles.button} onPress={() => setCounter(count + 1)}>
            <Text style={styles.buttonText}>Rate</Text>
        </TouchableOpacity>
        <Text testID="rateText">{count}</Text>
    </View>
  )
}

Use Cases for React Native Testing With Cypress

Let’s look at some use cases for React Native app testing, like network responses, loading indicators, and stubbing network requests using Cypress.

Testing Network Response

When data is fetched using useState and useEffect in React Native, it’s often rendered in components like FlatList. You can use Cypress to validate if the data is fetched correctly using the cy.intercept() method.

Example of FlatList data fetching:

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://fakestoreapi.com/products");
        const result = await response.json();
        setFakeData(result);
        setLoading(false);
      } catch (err) {
        setError("Failed to fetch data. Please try again.");
        setLoading(false);
      }
    };


    fetchData();
  }, []);

Here is the Cypress test to ensure data is fetched:

describe('Product List Network Request', () => {
    it('should make a successful API request and render the data', () => {
      cy.intercept('GET', 'https://fakestoreapi.com/products').as('getProducts');
     
      cy.visit('/products'); // Assuming this loads the React Native app
      cy.wait('@getProducts').then((interception) => {
        expect(interception.response.statusCode).to.eq(200);
        expect(interception.response.body).to.have.length.above(0); // API returns data
 
        // Check if data is rendered in the FlatList
        cy.get('[data-testid=fakedata]').should('exist');
        cy.get('[data-testid=fakedata]').should('have.length', interception.response.body.length);
      });
    });
  });

Testing Loader Component

To test if the ActivityIndicator (loading spinner) shows while data is loading:

<View>
  {loading ? (
    <ActivityIndicator size="large" color="#0000ff" testID="loader" />
  ) : error ? (
    <Text style={styles.errorText}>{error}</Text>
  ) : (
    <FlatList
      // add your props here
    />
  )}
</View>

Here is the Cypress test to ensure the loader is visible while fetching data:

describe('Loader Component Test', () => {
  it('should show the loader while fetching data', () => {
    cy.intercept('GET', 'https://fakestoreapi.com/products', (req) => {
      req.on('response', (res) => {
        res.setDelay(3000);
      });
    }).as('getProducts');
    cy.visit('/products');
    cy.get('[data-testid=loader]', { timeout: 10000 }).should('exist');
    cy.wait('@getProducts');
    cy.get('[data-testid=fakedata]', { timeout: 10000 }).should('exist');
    cy.get('[data-testid=loader]').should('not.exist');
  });
});

Stubbing a Network Request

You can stub network requests in Cypress to test your app’s behavior with predefined data without hitting the actual API.

Example of stubbing an API request:

describe('Stubbing Network Request', () => {
  it('should stub network request with a custom response', () => {
    cy.intercept('GET', 'https://fakestoreapi.com/products', {
      statusCode: 200,
      body: [
        {
          id: 1,
          title: 'Stubbed Product',
          price: 20.0,
          description: 'This is a stubbed product.',
          category: 'electronics',
          image: 'https://example.com/product1.jpg',
          rating: { rate: 5, count: 100 }
        }
      ]
    }).as('getProducts');


    cy.visit('/products');
    cy.wait('@getProducts');


    // Check if stubbed data is rendered
    cy.contains('Stubbed Product').should('exist');
    cy.contains('This is a stubbed product.').should('exist');
    cy.get('[data-testid=fakedata]').should('have.length', 1); // Only 1 stubbed product
  });
});

Stubbing Request Data With Fixtures

You can store static mock data in the cypress/fixtures folder and use it in tests.

Example of stubbing request data:

[
    {
      "id": 1,
      "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
      "price": 109.95,
      "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
      "category": "men's clothing",
      "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
      "rating": {
        "rate": 3.9,
        "count": 120
      }
    },
    {
      "id": 2,
      "title": "Mens Casual Premium Slim Fit T-Shirts ",
      "price": 22.3,
      "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley-style round neckline includes a three-button placket.",
      "category": "men's clothing",
      "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
      "rating": {
        "rate": 4.1,
        "count": 259
      }
    },
]

Here is the Cypress test to stub data request data with fixtures:

describe('Subbing with Fixtures', () => {
    it('should load data from fixture instead of making an API call', () => {
      cy.fixture('products').then((products) => {
        cy.intercept('GET', 'https://fakestoreapi.com/products', { body: products }).as('getProducts');
       
        cy.visit('/products');
        cy.wait('@getProducts');
 
        // Ensure data from the fixture is rendered
        cy.get('[data-testid=fakedata]').should('exist');
        cy.get('[data-testid=fakedata]').should('have.length', products.length);
      });
    });
  });