The easiest way to connect cypress and react devtools 🌟 
Tags: cypress, javascript, testing, react
Published: 2020-09-23 13:35:49

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](https://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](https://github.com/facebook/react/tree/master/packages/react-devtools) 

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


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

Alternatively, you can import this using javascript

```js
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`:

```sh
# 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](https://dev-to-uploads.s3.amazonaws.com/i/lrcdwzuqe0fwzk2ydxm8.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/ws48aheamumt0nbwm5np.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/fmb9mjaxng24daw0s4fj.png)

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