Add e2e tests with cypress to a React application

Overview

Imagine the following.
You join a new project and after getting access to the repo you notice that there's no tests.
You decide to ask the team whether they are in different repo or something and unfortunately the answer is:
We don't have any tests, we didn't have the time.

In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:
Ensure that our app currently works as intended
Allow us to add features to it with a technique called "Cypress Driven Development"
In less than 20 minutes we're going to go through:
⚡️Adding cypress.io setup to an existing project
⚡️Testing search functionality with data-cy properties
⚡️Using "Cypress Driven Development" to add a new feature to an app
⚡️Use Cypress UI to debug an API response
⚡️How to use cy.only and cy.skip in order for us to build our e2e test suite faster
and much more!

Syllabus

Adding cypress to an existing project in order to start writing e2e tests
Write a basic cypress test to ensure that the app is not entirely broken
Enable intelligent code completion for cypress tests in VSCode
Use data-cy property to select elements in cypress tests to write more resilient e2e tests
Add a beforeEach function to cypress tests to avoid copying and pasting needless code
Test a search input in an e2e test with cypress
Use "Cypress Driven Development" in order to add a feature to a React app
Use cypress UI in order to debug an API response
Use cy.server() and cy.route() to control API response in a cypress test
Use cy.only in order to run only a single test in a cypress test suite
Use cy.skip in order to skip a test in a cypress suite
Change a viewport width and height in a cypress test