DEV Community

loading...
Cover image for The easiest way to connect cypress and react devtools 🌟

The easiest way to connect cypress and react devtools 🌟

dmtrkovalenko profile image Dmitriy Kovalenko ・Updated on ・2 min read

Hola! Lazy dev here and today we will talk about cypress development & testing experience for react applications.

Wondering about how to use the awesome react dev tools while testing Cypress.io? Let's start.

Requirements

Together with the v16 react team provided a completely new devtools package. You probably ❀️ love it :)

Install

1) In order to run dev tools for your application running by cypress browser you need to install the standalone version of react-devtools package

yarn add --dev react-devtools

Tip: you can also install this package globally in order to run with different projects. It is ok because we will use this only for development.

Configure

2) Then add this as the very first <script> tag in the <head> of your index.html (or _document.js for next.js) when developing. This script actually connects react-devtools backend to the application.

<script src="http://localhost:8097"></script>

Alternatively, you can import this using javascript

import 'react-devtools'

⚠️ Important that this import comes before any other imports in your app (especially before react-dom). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it.

If you use Webpack and have control over its configuration, you could alternatively add react-devtools as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

Running

Now simply run your application, cypress tests, and react-devtools:

# app
yarn start

# cypress 
yarn cypress open

# devtools app
yarn react-devtools 

(Yes, you need 3 console tabs). Running react-devtools will open an electron application which will wait for the react app connection

React devtools app

And now open the cypress app, run any spec, and observe that react-devtools connected! πŸ‘€πŸŒŸ

Result

Fully working react devtools running over your tests in 2 minutes!

Cypress + devtools

Limitations

The biggest limitation of react-devtools and cypress is that they won't work with cypress' time-traveling snapshots. This happens because separate steps of time travel are rendered as dom snapshots and are not the real react applications.

In order to debug a specific test step – stop the cypress execution when you need to debug:

Cypress stop button

Alternatives

There is another (probably more complex) way to load devtools using chrome --load-extension=${extensionFolder}. This way is described in the blog post by Gleb Bahmutov https://www.cypress.io/blog/2020/01/07/how-to-load-the-react-devtools-extension-in-cypress/

The end πŸŽ‰

Devtools works like a charm together with cypress tests. Have fun πŸ”₯! Just don't get lost in open electron windows πŸ˜‰.

P.S. No devtools were harmed in the making of this article

Discussion (0)

Forem Open with the Forem app