cypress-react-devtools

A working React+Redux app to easily (but MANUALLY) verify if the React devtools are working with the Cypress-controlled browser.

Tested on Cypress 4 and Firefox too!

Why?

Cypress is an amazing tool and it can be leveraged even as a development tool, not only as a testing tool (read the Use your testing tool as your primary development tool article).

To do that, the existing devtool must work with the Cypress-controlled browser too (see the Support React Dev Tools issue). This application allows you to easily check that the React devtools work as expected.

Usage

• clone the repository
• launch npm install
• launch npm start
• in a dedicated terminal tab, launch npm run cy:open
• in the Cypress UI, choose a Chrome instance with the React and Redux devtools installed (see the Chrome instance screenshot)
• open the devtools and check that they work (see the Working devtool screenshot)

Please note that, in order to have the React DevTools working into Cypress, the key is the following code, put into the index.html page.

if (window.Cypress) {
  window["__REACT_DEVTOOLS_GLOBAL_HOOK__"] = window.parent["__REACT_DEVTOOLS_GLOBAL_HOOK__"];
}

Screenshots

Chrome instance screenshot

Working devtools screenshot

Contributors

Thanks goes to these wonderful people (emoji key):

Stefano Magni 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!