Component not found if render wrapped with Fragment

[WojtekMasiukiewicz]

When I try to select component by react command: cy.react('MyComponent')

I've got error error:

This happened when MyComponent is wrapped with React.Fragment:

class MyComponent extends React.Component {
  render (){
    return (
      <React.Fragment>
           <div>tested component</div>
           <div>tested component</div>
      </React.Fragment>
      )
  }
 }

Without React.Fragment is ok. Also there is no problem using cy.getReact('MyComponent')

version: "cypress": "6.0.0", "cypress-react-selector": "2.2.1",

[abhinaba-ghosh]

Hi. Thanks for raising this issue. Will look into it.

[abhinaba-ghosh]

Hi @WojtekMasiukiewicz . The fragment concept is already handled in the library. I am surprised that it is unable to determine the element. may I know what is the react version you are using?

[WojtekMasiukiewicz]

I will check in few days.

sob., 26 gru 2020, 16:58 użytkownik Abhinaba Ghosh [email protected] napisał:

Hi @WojtekMasiukiewicz https://github.com/WojtekMasiukiewicz . The fragment concept is already handled in the library. I am surprised that it is unable to determine the element. may I know what is the react version you are using?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/abhinaba-ghosh/cypress-react-selector/issues/100#issuecomment-751369176, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEVOZJTZQHQCB5WY724TEBTSWYB3BANCNFSM4UDVOBJQ .

[matfer]

I have the same issue. Components with React.Fragment as first tag are not found by cy.react, and also all components inside it (recursively). I have one of the top level components in my app with React.Fragment, and I was going mad because everything I tried gave me undefined. On the other hand, App and any other component I put outside of it are found. I am using React 16.13.1.

[abhinaba-ghosh]

Hey, @matfer can you share a git repository where I can reproduce the error?

[matfer]

I tried to reproduce in a new project, but the bug does not occur (tried with React 17.0.1 and 16.13.1). I cannot figure out why it happens in my app (that unfortunately I cannot share). However I found a workaround: if I call 'visit' twice, it works. E.g. in the following code cy.react succeedes, while leaving just one 'visit' call it fails.

describe('create_goal', () => {
  it('should create new goal', () => {
    cy.visit("http://localhost:3000")
    cy.visit("http://localhost:3000")
    cy.waitForReact()

    cy.react('ContentButton', {props: {label: LS('createGoal')}}).click()

[matfer]

Maybe it is not relevant, but I forgot to mention I am using Typescript.

[abhinaba-ghosh]

I tried to reproduce in a new project, but the bug does not occur (tried with React 17.0.1 and 16.13.1). I cannot figure out why it happens in my app (that unfortunately I cannot share). However I found a workaround: if I call 'visit' twice, it works. E.g. in the following code cy.react succeedes, while leaving just one 'visit' call it fails.

describe('create_goal', () => {
  it('should create new goal', () => {
    cy.visit("http://localhost:3000")
    cy.visit("http://localhost:3000")
    cy.waitForReact()

    cy.react('ContentButton', {props: {label: LS('createGoal')}}).click()

That's good to know @matfer. As I said, the fragmented concept is handled internally already. The thing I want to highlight here is this library does not care about how the page is loaded. It only requires a stable loaded page to validate if react loaded using the root you provided. So, you need to check the page loading status when you call the visit only once. This is really interesting.

[matfer]

So, you need to check the page loading status when you call the visit only once.

How? Shouldn't waitForReact take care of that?

[abhinaba-ghosh]

hey @matfer waitForReact tries to find out the react instance has established in a stable window. So, if your window getting refreshed (/ still loading) while waitForReact call going on, it won’t be successful. You can check out the code here

[tobloef]

I think I'm having a problem that might be related to this issue. I have a component like this:

<Dashboard data-cy="dashboard" />

Which I try to select like this:

cy.react('*', { props: { 'data-cy': 'dashboard' } });

If Dashboard looks like this, it will not work:

const Dashboard = () => (<> ... </>);

But if it looks like one of the two cases below, it will work:

const Dashboard = () => (<div> ... </div>);

or

const Dashboard = () => (<SomeComponent> ... </SomeComponent>);