How to instantiate Ionic element with test-library

16 Views Asked by At

I have an Angular component which has an ion-searchbar. I'm using a template ref on the ngAfterViewInit hook to handle the searcbar native input through the Ionic's getInputElement() method:

// my-component.html

 <ion-searchbar
      ...other inputs
      #ionSearchbar
 ></ion-searchbar>

// my-component.ts

export class MyComponent implements AfterViewInit {
   //...other inputs
   @ViewChild("ionSearchbar") ionSearchBarRef: IonSearchbar

   constructor() {}

    async ngAfterViewInit() {
    const ionSearchBarNativeInput = await this.ionSearchBarRef.getInputElement()
    //... do something with the native input
  }
}

The problem is when I run any test of that component I get the following error:

        const ionSearchBarNativeInput = await this.ionSearchBarRef.getInputElement();
                                                                   ^

TypeError: Cannot read properties of undefined (reading 'getInputElement')
    at MyComponent.ngAfterViewInit

The tests pass though, but I guess I have to mock somehow the ion-searchbar in order to allow the test run the logic inside ngAfterViewInit hook.

Any idea of how to do this with "@testing-library/angular?

Thanks in advance!

0

There are 0 best solutions below