Skip to main content

End-to-End Testing with Cypress for React Applications

In this tutorial, we'll learn how to write end-to-end tests for React applications using Cypress. We'll cover basic concepts and provide sample code to help you understand the process.

What is End-to-End Testing?​

End-to-end testing is a testing method that involves testing the entire application flow from start to finish. It ensures that the application works as expected for users, covering everything from UI interactions to backend services and data storage.

Setting Up Cypress​

First, let's set up Cypress in a React application:

  1. Install Cypress as a development dependency:
npm install cypress --save-dev
  1. Add a script to your package.json to run Cypress:
JSON
{
  "scripts": {
    "cypress:open": "cypress open"
  }
}
  1. Run the following command to open the Cypress Test Runner:
npm run cypress:open

This command will create a cypress folder in your project directory with some example tests.

Writing an End-to-End Test with Cypress​

Now let's write an end-to-end test for a simple React application that fetches data from an API and displays it.

  1. Create a UserList component in a file named UserList.js:
UserList.js
import React, { useEffect, useState } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;
  1. Create a test file named user_list.spec.js in the cypress/integration folder:
JavaScript
describe('User List', () => {
  it('displays a list of users', () => {
    cy.visit('http://localhost:3000');

    cy.intercept('GET', 'https://jsonplaceholder.typicode.com/users', {
      fixture: 'users.json',
    });

    cy.get('h1').contains('User List');

    cy.get('ul li').should('have.length', 10);
  });
});

In this test, we first navigate to our application's URL using cy.visit. Then, we use cy.intercept to intercept the API request and provide a fixture file named users.json containing sample data. Finally, we check if the User List heading is present and if the user list has the correct number of items.

  1. Create a users.json fixture file in the cypress/fixtures folder with the following content:
JSON
[
  {
    "id": 1,
    "name": "User 1"
  },
  {
    "id": 2,
    "name": "User 2"
  },
  ...
]

This file should contain the sample data for your test.

  1. Run your test by executing the following command:
npm run cypress:open

Conclusion​

End-to-end testing is crucial for ensuring that your React applications work as expected for users. Cypress is a powerful testing tool that helps you create and manage end-to-end tests easily. By following this tutorial, you've learned the basics of setting up Cypress in your project, writing end-to-end tests, and running them.

As a next step, you can explore more advanced features of Cypress, such as custom commands, aliases, and testing network requests. You can also integrate Cypress with your continuous integration (CI) pipeline to automatically run your tests on every code change.

Remember, writing tests is an essential part of developing robust and maintainable applications. Don't hesitate to invest time in learning and implementing testing in your projects.