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
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!
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:
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
Top comments (0)