Select nested component which has the same component class as parent

[Hanalababy]

I have the following JSX.

<ComponentA  id="componentAParent">
    <ComponentA id="componentAChild" />
    <ComponentB id="componentBChild" />
</ComponentA>

ReactSelector(ComponentA).withAttribute("id", "componentAChild") failed.(error msg : The specified selector does not match any element in the DOM tree.) However, ReactSelector(ComponentA ComponentA).withAttribute("id", "componentAChild") works. Also, ReactSelector(ComponentB).withAttribute("id", "componentBChild") works as expected. ReactSelector(ComponentA).withAttribute("id", "componentAParent") works as expected.

I wonder is it anything special need to be handled when the nested component has the same component class as parent?

[AlexKamaev]

I was able to reproduce the issue. I created a new React App using the create-react-app util and modified App.js as follows:

function ComponentA (props) {
  return (
      <div id={props.id}>{props.children}</div>
  )
}

function ComponentB (props) {
    return (
      <div>{props.children}</div>
  )
}

function App() {
  return (
    <div className="App">
      <ComponentA key="key1" id="componentAParent">
            component A parent
        <ComponentA key="key2" id="componentAChild">
            component A child
        </ComponentA>
        <ComponentB id="componentBChild">
            component B child
        </ComponentB>
      </ComponentA>

      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

I tried different approaches to resolve the issue (withAttribute, withProps, withKey), but my attempts were unsuccessful. We need time to research the issue in detail.

[AlexKamaev]

I found a similar issue, so I'll close this one as a duplicate. As a workaround, try a workaround described here: https://github.com/DevExpress/testcafe-react-selectors/issues/23#issuecomment-580459603

I applied that workaround to my example provided in the previous message as follows:

await t.click(ReactSelector('ComponentA').findReact('ComponentA'));