How to render ionic components for testing using testing-library-angular and jest?

I am writing some integration tests for my components using testing-library-angular

I can mock everything the user does with it (click/focus/keystrokes) for my pure angular components but I can not find any way to use Ionic components like ion-checkbox or similar.

If I do import IonicModule the component does not render and I just get this on JSDOM: <ion-checkbox item-right="" ng-reflect-checked="false"></ion-checkbox>

If I import IonicModule.forRoot() the render never ends and the test fails by timeout.

This is for example one complex component render test function:

  async function renderComponent(): Promise<RenderResult<MyComponent>> {
    return await render(EqTrainingOptionsComponent, {
      imports: [IonicModule.forRoot(), TesterModule, HelpButtonModule],
      providers: [
        ...mockAll(...MOCK_SERVICES),
      ],
      declarations: [
        CheckboxSelectorComponent, // They use ionic components
        PopoverOptionSelectorComponent,
        SliderOptionSelectorComponent,
        ...mockAll(...MOCK_COMPONENTS),
      ],
    });
  }

Does anyone uses testing-library with Ionic? how?

thanks

1 post - 1 participant

Read full topic