Testing a React Application Setting up Cypress

Introduction

The sixth part of my ongoing series is on how to test a modern React application. This time I’ll go over how to initially configure Cypress, our End-to-End testing framework.

In the previous parts of this series, I went over how to set up our unit-testing framework with Vitest. Unit tests will cover more isolated and individual pieces of code like our functions or component-only tests if necessary.

On the other hand, Cypress and its test will handle the other big chunk where we can really gain confidence that our tests will behave similarly to how a user would use the application. Just to catch up let’s go over what our simple barebones app does.

When clicking on a button it fetches posts from a service and displays them on the page:

What is Cypress?

The first phrase you’ll see when navigating to their page is the following:

Fast, easy and reliable testing for anything that runs in a browser.

The keyword for this quote is browser. Cypress’ test runner replicates the browser environment. That means whatever test we create will behave exactly as if running in the browser. This gives us a ton of confidence!

On top of that, with Cypress we can test with several different browser environments: Google Chrome and Firefox being among them. Cypress comes with its own syntax at times but if you’re familiar with Vitest or Jest then it should come naturally. The docs are actively maintained and well structured.

Take a look at them

Photo by Sincerely Media on Unsplash

Enough talking, let’s start setting up Cypress.

Configuration Files for Cypress

First, we have to install the necessary dependencies:

npm install cypress --save-dev

or

yarn add cypress --dev

Much like other libraries, this will have a configuration file at the root of our project: cypress.json. Let's go ahead and create it. Within this file, you can set a variety of different flags. Check out this article in the docs to better understand all the options.

When first launching any Cypress test we have to manually visit the pages we want to test. So instead of writing out the entire URL every single time we’ll go ahead and include the baseUrl in this config.

{
  "baseUrl": "http://localhost:3000"
}

With that, the only other configuration we need to set up is the scripts in our package.json.

"scripts": {
    // ...other scripts,
    "e2e": "cypress open",
  },

Check out the full repository up to this point here.

Next time we’ll create our first test with Cypress as well as make sure our integration with MSW holds up.

Let’s connect

If you liked this feel free to connect with me on LinkedIn or Twitter

Check out my free developer roadmap and weekly tech industry news in my newsletter.