Support React Dev Tools

[pedroteixeira]

Hello,

Adding the following in the mount function allows the React Dev Tools to work inside the iframe:

     <script>
      if (window.parent !== window) {
          window['__REACT_DEVTOOLS_GLOBAL_HOOK__'] = window.parent['__REACT_DEVTOOLS_GLOBAL_HOOK__'];
      }
     </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

Perhaps it's useful for more people to have it by default.

[brian-mann]

Instead of saying window.parent !== window you should probably just write... if (window.Cypress) { }

[mcmunder]

thanks @pedroteixeira

I wanted to get the redux dev tools to work with cypress and your comment helped solve the issue.

So for anyone who might stumble upon this, here is what I did:

• install the redux dev tools extension in the chrome instance started by cypress
• add the following script to the index.html of your react app just before the body:

<script>
  if (window.Cypress) {
    window['__REDUX_DEVTOOLS_EXTENSION__'] =
      window.parent['__REDUX_DEVTOOLS_EXTENSION__'];
    window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] =
      window.parent['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'];
  }
</script>

• enjoy testing and debugging with cypress and redux dev tools ;-)

[technomage]

I have got the extnesion installed, but it only wants to show components in the Cypress window not the iframe content.

[NoriSte]

@technomage I've just checked the @pedroteixeira solution and it works perfectly!
I tried it in my own project and in a fresh create-react-app installation, everything works.

For the React DevTools, I've added

<script>
  if (window.Cypress) {
    window["__REACT_DEVTOOLS_GLOBAL_HOOK__"] = window.parent["__REACT_DEVTOOLS_GLOBAL_HOOK__"];
  }
</script>

before che </head> of the public/index.html file. For the Redux DevTools I do not need to do anything.

To check that everything works, I shared a simple cypress-react-devtools repository. Clone it and follow the instructions to check it the devtools work.

[interglobalmedia]

I have tried @NoriSte 's fix, but it does not work for me. Searching for another solution.

[NoriSte]

@interglobalmedia have you tried with the cypress-react-devtools repo too?

[interglobalmedia]

I actually just found my app within Cypress React. I just had to dig down deep into the first FullApp component that appears in Chrome React DevTools after the Container component. And it is all there. I did check out your repo, but ended up not having to use it. This is a bad (and not complete) screen shot of where one's app being tested with Cypress resides. Shows how deep you have to go:

[bahmutov]

I could not get react dev tools to "recognize" the React app running inside spec iframe with Cypress v4.5.0 and cypress-react-unit-test@4

[lmiller1990]

Hi all.

We just released Cypress 7.0, which comes with a completely revamped Component Testing experience. Component testing is no longer experimental (but still in alpha, with lots of updates and improvements coming in the next few weeks). Please let us know if you find any more issues.

Updated Component Testing intro: https://docs.cypress.io/guides/component-testing/introduction
Changelog: https://docs.cypress.io/guides/references/changelog
Migration guide: https://docs.cypress.io/guides/references/migration-guide#Component-Testing

Main updates:

• things are now (much) faster, since we use dev-server and hot reload architecture, not file:preprocessor
• no need to launch into the electron shell. It opens straight to the browser (select your spec from the inline spec selector)
• dedicated, component specific runner (build on top of the existing runner, so you get all the good stuff you are used to)

Upgrading should not be too difficult, see the migration guide.

To make sure Webpack 5 is working, I made a minimal example with [Babel + Webpack 5 + React + Cypress 7.x +

One of the many improvements is the react devtools are now embedded in the runner.

Note that they don't play super nicely with hot reload, sometimes you will need to cmd+R to force them to update, but it's still a big improvement over the existing solutions. Things will get better as we iterate.

Anyone interested in this, please update to Cypress 7.0 using the migration guide and give it a try. Devtools support is getting better and will continue to do so 🎉

[jennifer-shehane]

Closing as resolved.

[piotrpalek]

@jennifer-shehane sorry to comment on this old issue, but with the newest (10.x) versions of Cypress, are react devtools also included / supported? I'm having trouble using them.

[lmiller1990]

@piotrpalek It's not built in like the 9.x alpha had - those were quite buggy and had some known usability problems, so they are not shipped as part of Cypress 10 at this point. This might change if we can find a better way to support it. The main problem was setup/teardown between tests. They (react dev tools plugin) is not really designed to be constantly spun up and torn down in rapid succession, or have the components constantly changing in the way the do when tests are constantly mounting/unmounting components.

In he future, I hope we can 1) support it in a more first class way and 2) expose some kind of API for people to build Cypress UI plugins (which could include some kind of bridge to communicate w/ the iframe and connect to things like React/Redux dev tools) at some point.

As of 10.x the React dev tools are not shipped, but you should be able to still set it up with some effort (I definitely remember people working with Cypress + React Devtools prior to 7.x).