Selectors are failing when upgrading to React 18

[alvarp]

After upgrading to React 18, all the selectors are failing under the next message:

Error: Could not find instance of React in given element

The project has the root initialized as the React upgrade guide explains and in the cypress.json we have the root element configured as recommended.

Test example:

Error example:

Is the package tested against React 18? Any hint on what could be happening?

[tuky191]

Hi,

had been struggling with same. I found the problem to be in resq module, utils.js/findReactInstance

  const instanceId = Object.keys(element).find(
    (key) =>
      key.startsWith('__reactInternalInstance') ||
      key.startsWith('__reactFiber') ||
      //added line below
      key.startsWith('__reactContainer')
  );

That fixed it - at least for my current use case, though more tweaks could be needed. I haven't tested all features (like lookup) but i was at least able to find the elements from the vdom.

hope it helps,
Michal

[alvarp]

Hi @tuky191, I have resq 1.10.2 and it doesn't have any utils.js file.

@abhinaba-ghosh, did you managed to use the library with React 18?

Thanks,
Àlvar.

[tuky191]

Hi @alvarp,

I forked baruchvlz/resq, tweaked the code a bit and rebuilt.

I really just needed it to 'work' for a proof of concept project I've been working on - My tests are passing on react18 but it's not finished yet.

Anyways feel free to take a look at the fork.
https://github.com/tuky191/resq

Michal

[adrianflorinflorescu]

Hello! I have the same problem.

Is there any plan of updating this project to support react 18?

[thediveo]

For seeing if this resolves the issue I've patched the installed distributed version of resq in place: while it does make waitForReact() now work with React 18, I'm hitting the next issue that react('MyComponent') fails to ever find any component.

[thediveo]

resq 1.11.0 has been released, and this fixes waitForReact().

react('MyComponent') is still not working for me.

[TimPchelintsev]

@thediveo I managed to get it working with this steps:

1. Manually install updated resq package via npm install --save-dev resq - at least 1.11.0 with fix for React 18
2. cy.waitForReact(..., ..., 'node_modules/resq/dist/index.js'); // Manually passing in the resq module path
3. cy.react(...) working!

[thediveo]

Using yarn, my package.json contains:

  "resolutions": {
    "nth-check": "^2.0.1",
    "resq": "^1.11.0"
  },

The test code is as follows, you can find it here https://github.com/thediveo/lxkns/blob/develop/web/lxkns/src/components/extlink/Extlink.cy.tsx as part of my lxkns open source project:

import React from 'react'
import ExtLink from './ExtLink'

describe('ExtLink', () => {

    it('adorns external links', () => {
        cy.mount(
            <ExtLink href="http://endoftheinternet.null">End of The Internet</ExtLink>
        )
        cy.waitForReact()
        cy.react('ExtLink').should('exist')
        cy.react('ExtLink')
            .find('svg')
            .should('exist')
        cy.react('ExtLink')
            .find('a')
            .contains('End of The Internet')
            .should('have.attr', 'href', 'http://endoftheinternet.null')
            .and('have.attr', 'target', '_blank')
            .and('have.attr', 'rel').then((rel) => {
                expect(rel).matches(/\bnoopener\b/)
                expect(rel).matches(/\bnoreferrer\b/)
            })
    })

})

It simply goes down in flames with "Component not found ". Trying with passing in the req module path doesn't work either.

[Armadillidiid]

I'm experiencing the same issue. I get the following error even when manually specifying resq. Has a fix been found for this problem?

log Component not found

There can be multiple reasons for it.

Component never meant to exists. You are good to go.
Check the root is defined as a env parameter (cypress.json config file).

If the root is defined correctly, check other parameters - component name, props and state objects

Or, raise an issue with proper code samples here: https://github.com/abhinaba-ghosh/cypress-react-selector/issues

[thediveo]

looks like the repo is dead

[Armadillidiid]

Yeah. I ultimately uninstalled the dep and opted to grab the state directly from my store. However, this approach tightly couples my tests to the store, and I'm not sure if that's a correct practice. How did you handle retrieving your state? @thediveo

[thediveo]

Hopefully the repo owner is still well, even if abandoned this work. As there seems not much need for it and I'm well fed up with the terrible state of the Javascript ecosystem, I simply call it a day and remove cypress completely. I don't waste my life on this anymore.