NextJS 10 Multiple random issues "Could not find instance of React in given element"

[FDiskas]

[email protected]
[email protected]
[email protected]
node: v14.15.1

Create simple nextjs app by yarn create next-app --example with-typescript . create a test case.

Could not find instance of React in given element will be thrown at random intervals

describe('App tests', () => {
  before('Visits the homepage', () => {
    cy.visit('/');
    cy.viewport(800, 600);
    cy.waitForReact();
  });

  it('Locate Bob', () => {
    cy.react('Link').should('contain', 'Users List');
    cy.react('Link').contains('Users List').click();

    cy.react('Link').should('contain', '102: Bob');
    cy.react('Link').contains('102: Bob').click();

    cy.react('ListDetail').should('contain', 'Detail for Bob');
    cy.getReact('ListDetail')
      .getProps('item')
      .should('eql', { id: 102, name: 'Bob' });
  });
});

[abhinaba-ghosh]

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

[FDiskas]

Sure. I used env settings

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

[abhinaba-ghosh]

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

[FDiskas]

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

[abhinaba-ghosh]

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

[suncihai]

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

[jericirenej]

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)

[abhinaba-ghosh]

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!

[laurence-myers]

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. 🤷‍♂️

[abhinaba-ghosh]

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.

[FDiskas]

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