NextJS 10 Multiple random issues "Could not find instance of React in given element" about cypress-react-selector HOT 11 OPEN

Thanks @FDiskas for sharing the repo. I will take a look.

from cypress-react-selector.

Hi all, grant my apologies for not getting actively involved in the NextJs support for this library. I am having real busy weeks with Postman for some critical releases. I will not be able to take this task for another month. I would really appreciate if I get support in this. PRs are always welcome.
Thanks again for the love!
Cheers!

from cypress-react-selector.

hi @FDiskas , thanks for using the library. Have you tried defining the configuration as stated here?

from cypress-react-selector.

Sure. I used env settings

{
  "env": {
    "cypress-react-selector": {
      "root": "#root"
    }
  }
}

from cypress-react-selector.

Hi @FDiskas , it is possible that the react root css selector is not #root. Can you check if this is something else?

from cypress-react-selector.

I was testing on this repo
https://github.com/FDiskas/devtalks-e2e/tree/cypress
Nexjs root is __next and im sure that it matched setting in my test

from cypress-react-selector.

Hi, is there any update on this issue? Our project also use next.js and cypress. Error says Component not found

from cypress-react-selector.

I also had a similar issue in nextjs. For me, what solved it, was to perform an ordinary get on one of the parent elements of the component, then applying the react method.

For example, I had a modal popup that had a data-test id applied to it. I would then alias this element, then use it to fetch the react component:
cy.get(`[data-test="modal-popup"]`).as("modal");
cy.get("@modal").react("TargetComponent");

Can anyone confirm if this works on their end?

Also, setting or not setting the root env variable had not effect on the runnig of the test (perhaps connected to #236)

from cypress-react-selector.

I played around a bit. I found issue #251. I also found that a minified build had no problems finding a React instance, but an unminified build did. Is Next.js doing something odd?

resq looks for keys/properties on the React root HTML element, either _reactRootContainer or something beginning with _reactInternalInstance or _reactFiber. Stepping through in a debugger, the HTML element has no iterable keys. 🤷‍♂️

from cypress-react-selector.

Hi @bkirove, as this PR is merged and a new version of resq is released, can you give it a try for this problem?
If all good, can release a version of cypress-react-selector.

from cypress-react-selector.

I updated the test project https://github.com/FDiskas/devtalks-e2e/tree/cypress with all dependencies as the newest
Still didn't manage to work it properly - the same error

from cypress-react-selector.