Setup Cypress for e2e tests in React

Introduction

This year, I divided the articles on unit testing in React using Jest and testing-library into two parts: one focused on setup and the other explaining, in general, how the tests are structured and how them work. The idea is to follow the same way, but this time for end-to-end testing using Cypress. The current article will present the lib setup and how to execute it, while next month's article will focus on explaining the general workings of the tests and providing examples.

End-to-end

End-to-end tests aim to test the application from start to finish, analyzing the interactions and navigation that the user will experience while using it, and verifying the integrity of the application as a whole. These tests are more resource-intensive compared to unit tests, but they provide a closer analysis of the overall flow that users will follow in the application.

Cypress

It is a lib that was originally created with a focus on performing end-to-end tests, capable of running tests both through the terminal and by viewing the navigation via the browser.

Setup

To add Cypress to the application, run the following command in the terminal:

yarn add cypress --dev

Add the following script to open Cypress in the package.json:

{
  "scripts": {
    //...
    "cy:open": "cypress open"
  }
}

Run the following command in the terminal:

yarn cy:open

After running the command, the following screen will open:

By clicking on the E2E Testing box, the configuration files that have been added to the application will be displayed, and it will be possible to see the new files generated in the application:

By clicking on Continue, you will be asked to choose the browser to be used for the tests:

After selecting your preferred browser, a new screen will open:

With two options:

• Scaffold example specs: this option creates a series of tests based on the Cypress example page
• Create new spec: this option generates a test template with a simple example test.

By choosing the Create new spec option, you will be asked to define the name of the new file:

By default, Cypress will run the tests inside the cypress/e2e folder, and you can name the files according to the test flow context using the format filename.cy.js. In this setup, we will go with the suggested name cypress/e2e/spec.cy.js.
In the application you will see that it has generated the test file, and on screen will be displayed the initial example test:

Finally, by clicking Okay, run the spec, it will execute the example test:

It will show on the left that the test has passed, which in this case only checks if it could visit the page https://example.cypress.io/. On the right, it shows where the navigation stopped at the end of the test (for user interaction tests, the end-to-end navigation is shown on the right; I will explain this in more detail in the next article).
The setup is complete, the configuration files are created inside the application, and an initial test file has been created. You can now add more tests inside this file or create additional test files following the structure cypress/e2e/filename.cy.js.

Execution ways

I will present two ways to execute end-to-end tests using Cypress:

Via the interface

This method of execution is similar to the one described above. First, run the following command in the terminal:

yarn cy:open

The same initial screen you saw during the setup will appear, but this time it will indicate that E2E Testing is already configured:

By clicking on E2E Testing, you will be asked to choose the browser:

After selecting your preferred browser, a screen will open displaying the test files defined in the app (in this case, only spec.cy.js):

By selecting the spec.cy.js file, the tests inside it will be executed via the interface:

Via terminal

Another way to run the tests is directly from the terminal. First, add the script to run Cypress in the terminal to package.json:

{
  "scripts": {
    //...
    "cy:run": "cypress run"
  }
}

Run the following command in the terminal:

yarn cy:run

The tests will be executed in the terminal, presenting the following result:

Conclusion

The goal of this article was to show how to set up Cypress inside a React app for end-to-end testing, demonstrating two ways to execute the tests. Next month's article will focus on the tests themselves, providing an overview of how they are structured and conducted, along with some examples.