[with public example] Not able to find react component
thediveo opened this issue · comments
Hi Abhinaba,
this is my first contact with cypress-react-selector (and Cypress), so please bear with me especially in case of stupid mistakes.
I've also fallen victim to the dreaded cy.then() timed out after waiting 4100ms when trying to locate a component using cypress-react-selector. Searching for some time, I came across issue #58. At the end of that issue you're asking for a proper code example. Hoping that a public Github project exhibiting that problem qualifies as "proper code example" (of course, for a sufficient definition of "example) I'm opening this new issue.
From what I've read when it comes to not finding components it looks like that often happens in more complex situations. In my case this is the React UI to a Linux diagnosis service for discovering so-called "namespaces" which is one of the mechanisms building the foundations for (not only) containers (such as Docker containers).
To (hopefully) reproduce my issue, first clone the public Github thediveo/lxkns repo and check out branch "feature/test-webui"
git clone --branch feature/test-webui https://github.com/thediveo/lxkn
Please note that you do not need to build the containerized backend service, so simply skip that step and just start the frontend development server and Cypress...
Please start the web UI frontend development server on port 3030. When navigating to localhost:3030 you should be greeted with an app bar with hamburger menu button as well as a few more toolbar buttons.
(cd webui/lxkns && yarn start)
And finally fire up Cypress, then select the lxkns.spec.ts integration test ... and watch it burn in cy.react('Refresher')... 😢
(cd webui/lxkns && yarn cypress)
The root gets properly detected as far as I could cross-check by using a non-existing root selector. I don't know if that might be of any relevance: the Refresher component lives inside a <header> element which in turn is inside the <div id="root">.
May this be related to the fact that the Refresher component returns <>...</>?
Using getReact() seems to be able to successfully locate the Refresher component RESQ node, but now I'm stuck with how to get a DOM element from there so I can click on it:
cy.getReact('Refresher').nthNode(0).getReact('IconButton').click()
Hi @thediveo , Today I am away from the keys. However, I just got some time to reply from my mobile. Will take a deep look this week.
Although, let me clarify the fact that .getReact() returns RESQ node, where .react() returns DOM node. RESQ node is helpful for determining runtime react properties, not for interacting with DOM elements. So to be able to click the element, convert the getReact calls to react calls like:
cy.react(Refresher).eq(0).react('IconButton').click()
Let me know if that works.May be you have already tried it.
Thank you for your quick response, enjoy your time off the keys! Unfortunately, cy.react('Refresher').eq(0).react('IconButton').click() fails to locate the Refresher component, I suspect because that component returns a <> pseudo component with several children inside?
Possibly the usual suspect. I will pull down your branch and will have a deep look. Thanks for the detailed information.