Testing a React application updating to Cypress 10
Tags: testing, react, javascript, programming
Published: 2022-06-13 21:41:21

---
title: Testing a React application updating to Cypress 10
published: true
date: 2022-06-13 14:13:00 UTC
tags: testing,react,javascript,programming
series: Modern React Testing
canonical_url: https://relatablecode.com/testing-a-reaction-application-updating-to-cypress-version-10
cover_image: https://cdn-images-1.medium.com/max/1024/0*ASGUM_d8mmMbpR22
---

## Introduction

In the last article of this series, we went over how to create a test with Cypress, an end-to-end testing framework. Check it out [here](https://relatablecode.com/testing-a-react-application-creating-a-cypress-test). Cypress is a featureful framework that has only improved with its new version, and its main view got a makeover to give it a more modern look.

![barebones react application](https://cdn-images-1.medium.com/max/958/0*PEUfR9c2vYhBjH5q)

Let’s briefly go over the small barebones application we’ve made up to this point.

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

![post fetching](https://cdn-images-1.medium.com/max/593/0*lzSWKmKdVXkzf582)

For reference, you can find the repository [here](https://github.com/diballesteros/react-testing).

## Updating Cypress

First, let’s go ahead and update our Cypress package. If this is your first time using Cypress, it’ll also install it.

```bash
yarn add cypress --dev
```

or if you’re using npm first uninstall it then re-install it. I've had issues with updating the package so I prefer reinstalling it fresh. If someone in the comments has a better way please let me know!

```bash
npm uninstall cypress 
npm install cypress --save-dev
```

This should update Cypress to its newest version 10. As of this article, this is version 10.1.0. If you are having compatibility issues while reading this article I suggest checking out the official [Cypress changelog](https://docs.cypress.io/guides/references/changelog).

Easy enough. Now let’s head into the breaking changes.

## Cypress Configuration file

Let’s try running Cypress.

```bash
npm run dev 
npm run test-e2e
```

If you still have cypress open you’ll notice a similar error:

![cypress error](https://cdn-images-1.medium.com/max/1024/0*fFxKIsqPILeW53eR)

Cypress now uses a different configuration file. Let’s delete our cypress.json and create a new cypress.config.js

This new file has a defineConfig function that will contain all of our old options. Which in this case was just the baseUrl option.

```js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
    e2e: {
        baseUrl: 'http://localhost:3000',
        specPattern: 'cypress/integration/**/*.spec.ts',
    },
});
```

Now we’ll get the new modern screen:

![new cypress screen](https://cdn-images-1.medium.com/max/990/0*Megc-r4u5un_o38f)

## Resolving errors

We’ll get met with our first error when we click on the end-to-end testing option:

![first cypress error](https://cdn-images-1.medium.com/max/943/0*RmP-r6cbrO9uG7-1)

This is simple, head into your Cypress directory and rename cypress/support/index.js to cypress/support/e2e.js

![cypress directory](https://cdn-images-1.medium.com/max/971/0*nq3Np6zyurrd7Rgo)

Now we can choose a browser to launch our tests. Let’s start testing in Chrome. When we click on it we’ll see the option to create our first spec. But wait, where did all of our old test files go?

![spec files missing](https://cdn-images-1.medium.com/max/743/0*RajL9t6he7QWO713)

if we click on **View spec pattern** we’ll see how it’s looking for tests.

![spec pattern](https://cdn-images-1.medium.com/max/635/0*oqPZt82ilmlrGYSX)

Looks like Cypress now defaults to the \*\*.cy.{js,jsx,ts,tsx} extensions. Let's just update the spec pattern for the sake of our example project. In our Cypress configuration file let's add a new specPattern property.

```js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
    e2e: {
        baseUrl: 'http://localhost:3000',
        specPattern: 'cypress/integration/**/*.spec.js',
    },
});
```

Now we’ll see all of our tests again!

![seeing tests again](https://cdn-images-1.medium.com/max/999/0*og73QFs2B7qAGecs)

We can now run our tests as normal.

### Some clean-up

We can also delete our plugins folder inside our cypress folder as it is no longer needed.

## Wrapping it up

Due to Cypress’ new version, I decided it was best to first update our version. Next time we’ll cover what I had to delay, hooking up our testing frameworks with a code coverage functionality.

## Let’s connect

If you liked this feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/relatablecode) or [Twitter](https://twitter.com/relatablecoder)

Check out my free developer roadmap and weekly tech industry news in my [newsletter](https://relatablecode.substack.com/).