Testing Ionic Apps with jest-angular

Ionic Framework Ionic Angular
1

I want to test my app using jest-angular. However basic selectors to select html elements created by Ionic inside things like ion-searchbar do not work. This makes it very hard to write any tests at all.

Steps to reproduce

  1. Clone GitHub - pct-cclausen/ionic-jest-example: Example of struggles to test ionic components with jest angular
  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.