Upgrade Cypress to Version 10

Even though version 10 is a major version upgrade for cypress, turns out it’s very simple and straightforward to do. You can read the complete explanation from the official documentation here. But if what you need is a step-by-step guide, then hop in.

Disclaimer: I upgrade from version 8.7.0 but it should work too if you are from version 9.x.x

Upgrade the package

First, we need to install the latest cypress

npm install -D cypress@latest

Automatic Migration

Now you just need to complete 3 easy steps click.

Open the migration helper GUI

npx cypress open 

You will see the GUI and a video to watch. Then click the button: Continue to Cypress 10.

Video explanation of new cypress — cypress.io youtube official

1. Rename existing specs

In this step, all files in the integration folder will be moved to the e2e folder. Simply click the “Rename these specs for me” button.

Migration helper step 1 — cypress.io youtube official

2. Rename cypress support file

Next, the migration tool will let you rename the Cypress support file. Click the “Rename the support file for me” button to execute.

Migration helper step 2 — cypress.io youtube official

3. Migrate new cypress config file

In the last step, the migration tool will move the existing Cypress config to a new file called “cypress.config.js”. Click the “Migrate the configuration for me” button to continue.

Migration helper step 3— cypress.io youtube official

Finally, the screen below will appear if all went well. Click the “E2E Testing” to go to your cypress test specs.

Welcome window on completing migration— cypress.io youtube official

“Yay, you have done it if you make it till here”

Changes from previous version:

• You can not run all specs in one click. Just 1 spec per click.
• The experimental “Cypress Studio” has been removed.
• You need to add --browser and --e2e to go to specs list directly, for example, ​cypress open --browser chrome --e2e​.

Code Coverage

If you use Code Coverage, you need to do an additional step because the Cypress Code Coverage plugin will need to be updated to version >= 3.10 to work with Cypress 10. Using a previous version will result in an error when tests are run with code coverage enabled.

After upgrading the cypress-code-coverage, you might need to move the config like what I did:

• delete the cypress/plugins/index.ts file:

/cypress/plugins/inde.ts

• add the library-importing statement require('cypress/code-coverage/task')(on, config) inside e2e > setupNodeEvents

/cypress.config.ts

Now for the twist

If you have done all that and can run all your spec tests, then you did well 👏. But for the user of TypeScript like myself, there is a twist that awaits you in the end. Especially if you also use jest as your component testing library, you will get many type errors about jest assertion and make you unable to build the app. Oh, sh*t.

Luckily, the answer is on Stackoverflow (like always) 😏. Just need to add a file and boom. All is well.

In conclusion, major-upgrading 3rd party library is not as scary as it sounds. All you need is a calm mind, to read documentation, and to do the migration steps. Hope it will help you.

Additional note: Even though there is a component test in cypress version 10, we haven’t used it because using jest is enough for now.

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of their modern DevOps practices.

Hyperjump