not able to find react component due to forwardref type of components

[rmrao12]

hi i am trying to test this website https://www.retrospected.com/
but i am unable to do it because their react components are of forwardref type and that is why this cypress is giving an error. is their any way to access these kind of components because i need to test this site using react components props etc i am attaching two pictures one with the error and one with the website type of components please check and tell me the solution.
my test case type is
describe('It should validate cypress react selector', () => {
before(() => {
cy.visit('https://www.retrospected.com/');
cy.waitForReact(5000);
});

it('it should login', () => {

cy.react('Anonymous', { props: { children: 'Login' } }).click();

});

});

[smerling-coremedia]

I have the same problem atm. The thing is, property "children" is not really a string. If you use cy.getReact(...).getProps() you'll see, it is an array of all children and the are objects themselves. I think it is a problem when using Material UI like your example website does and also my project.

[smerling-coremedia]

see: #134

[irfancankalelikargo]

Still an issue

[jime2003]

I just started using Cypress reach selector and I have exact same issue. @abhinaba-ghosh - are we going to fix the issue or any other work around?

[Shaegi]

You can add a displayName to your component to find them

const Foo = fowardRef((props, ref) => <div ref={ref} /> ) 

Foo.displayName = 'Foo' 

export { Foo }

cy.react('Foo').should('exist')