DEV Community

Cover image for Testing a React application updating to Cypress 10
Diego (Relatable Code)
Diego (Relatable Code)

Posted on • Originally published at relatablecode.com on

Testing a React application updating to Cypress 10

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. 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

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

For reference, you can find the repository here.

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.

yarn add cypress --dev
Enter fullscreen mode Exit fullscreen mode

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!

npm uninstall cypress 
npm install cypress --save-dev
Enter fullscreen mode Exit fullscreen mode

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.

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

Cypress Configuration file

Let’s try running Cypress.

npm run dev 
npm run test-e2e
Enter fullscreen mode Exit fullscreen mode

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

cypress error

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.

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

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

Now we’ll get the new modern screen:

new cypress screen

Resolving errors

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

first cypress error

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

cypress directory

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

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

spec pattern

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.

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

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

Now we’ll see all of our tests again!

seeing tests again

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 or Twitter

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

Discussion (0)