Why do my tests fail at ngxpagination when my pagination works?

Question

I have created pagination for my list of car with ngxpagination. It also works very well. But unfortunately my "npm test" fail with the error message below.

HTML:

     <ion-list id="list">
          <ion-item id="list-item" button *ngFor="let carGroup of carGroups | orderByCarGroupName | filter: searchTerm
          | paginate: {itemsPerPage: 8, currentPage: cp}"  class="listMargin" (click)="openCarGroup(carGroup.id)">
            <ion-label>{{carGroup.id}}</ion-label>
            <ion-label>{{carGroup.carGroupName}}</ion-label>
          </ion-item>
        </ion-list>

MODULE:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ListViewPageRoutingModule } from './list-view-routing.module';
import { ListViewPage } from './list-view.page';
import { ComponentsModule } from '../components.module';
import { NgxPaginationModule } from 'ngx-pagination';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { ListViewPipe } from './list-view.pipe';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgxPaginationModule,
    IonicModule,
    ComponentsModule,
    ListViewPageRoutingModule,
    Ng2SearchPipeModule
  ],
  declarations: [ListViewPage,
    ListViewPipe
  ]
})
export class ListViewPageModule {}

ERROR:

ListViewPage should open Details FAILED
        Failed: NG0302: The pipe 'paginate' could not be found!. Find more at https://angular.io/errors/NG0302
        error properties: Object({ code: '302' })
        Error: NG0302: The pipe 'paginate' could not be found!. Find more at https://angular.io/errors/NG0302
            at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25786:1)
            at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25743:1)
            at ListViewPage_Template (ng:///ListViewPage.js:58:9)
            at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9600:1)
            at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9404:1)
            at renderComponent (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10684:1)
            at renderChildComponents (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9269:1)
            at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9429:1)
            at ComponentFactory$1.create (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25127:1)
            at initComponent (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1740:1)

Can anyone tell me why my tests are failing?

UPDATE 1

This is my Test Class I did not change anything in the class because of pagination. I am also not sure how to test pagination properly.

import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { IonicModule } from '@ionic/angular';
import { MockListClientServiceService } from 'src/app/Mock/MockListClientServiceService';
import { ListClientServiceService } from 'src/app/services/list-client-service.service';

import { ListViewPage } from './list-view.page';

describe('ListViewPage', () => {
  let component: ListViewPage;
  let fixture: ComponentFixture<ListViewPage>;
  let router: Router;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [ ListViewPage, MockHeaderComponent],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [IonicModule.forRoot(), RouterTestingModule],
      providers: [ListClientServiceService]
    }).compileComponents();

    // Ersetze den Service mit einen Mock
    TestBed.overrideComponent(
      ListViewPage,
      {
        set: {
          providers: [
            {
              provide: Router, useClass: class {
                navigate = jasmine.createSpy('detail-view');
              }
            },
            { provide: ListClientServiceService, useClass: MockListClientServiceService }
          ]
        }
      }
    );

    fixture = TestBed.createComponent(ListViewPage);
    router = fixture.debugElement.injector.get(Router);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should open Details', async (done)  => {
    component.openCarGroup(component.carGroups[0].id);
    expect(router.navigate).toHaveBeenCalledWith(['/detail-view', { carGroupId: component.carGroups[0].id }]);
    done();
  });
});
@Component({
  selector: 'app-header',
  template: ''
})
class MockHeaderComponent {
}

UPDATE 2:

ListViewPage should open Details FAILED
        Failed: Unexpected pipe 'ListViewPipe' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
        Error: Unexpected pipe 'ListViewPipe' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
            at verifySemanticsOfNgModuleImport (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27114:1)
            at node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27012:1
            at <Jasmine>
            at verifySemanticsOfNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27011:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26975:1)
            at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1074:1)
            at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1319:1)
            at R3TestBedCompiler.finalize (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:928:1)
            at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1763:1)
            at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1686:1)
        Unhandled promise rejection: TypeError: Cannot read properties of undefined (reading 'openStructureGroup')
        TypeError: Cannot read properties of undefined (reading 'openStructureGroup')
            at src/app/components/list-view/list-view.page.spec.ts:55:15
            at <Jasmine>
            at node_modules/tslib/tslib.es6.js:76:1
            at new ZoneAwarePromise (node_modules/zone.js/dist/zone-evergreen.js:960:1)
            at __awaiter (node_modules/tslib/tslib.es6.js:72:1)
            at UserContext.<anonymous> (src/app/components/list-view/list-view.page.spec.ts:54:46)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:363:1)
            at Zone.run (node_modules/zone.js/dist/zone-evergreen.js:123:1)

Answer 1

i think you are not importing the right module in your test

beforeEach(async(() => {
 TestBed.configureTestingModule({
   declarations: [],
   imports: [ 
     NgxPaginationModule, // make sure you have this
   ],
   providers: [ AppRoutingModule],
 }).compileComponents();
}));