[Bug]: Testing Ionic components with jest does not work

[pct-cclausen]

Version

13.1.1

Steps to reproduce

1. Clone https://github.com/pct-cclausen/ionic-jest-example
2. npm install
3. npm run test
4. See file apps/test-app/src/app/app.component.spec.ts:

 it('finds the input inside the ion-searchbar', async () => {
    const fixture = TestBed.createComponent(AppComponent);

    // sleep is necessary to make sure the dom is hydrated by Ionic.
    // I've not found another way to do this.
    await sleep(100);

    // Show the status of the HTML. This skips shadow dom elements,
    // but they are not important in this scenario
    // Notice there is an input element inside the ion-searchbar
    phl(fixture);

    // the searchbar itself can be found
    expect(fixture.debugElement.query(By.css('ion-searchbar'))).not.toBeNull();

    // the input that was created by ionic inside the searchbar is not accessible,
    // even though phl was able to print it
    expect(fixture.debugElement.query(By.css('input'))).not.toBeNull();
  });

Expected behavior

The pretty html log by phl shows there is an input element in the html, which was created by Ionic inside the searchbar. I expect that input element to be found by the query.

Actual behavior

It's not found, making interaction with many Ionic components in jest driven tests extremely hard to impossible.

Additional context

I am not 100% where to report this, this might be an issue in jsdom, or somewhere deeper in jest, or in the Angular Testbed.

Environment

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  npmPackages:
    jest: ^29.4.1 => 29.6.2