Error while running test in angular : The pipe 'paginate' could not be found ("

Question

I am running an angular test & I am getting the following error.

UserActivitiesComponent should create
Failed: Template parse errors:
The pipe 'paginate' could not be found ("

    <div class="row row-style"
      *ngFor="let [ERROR ->]item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsC"): ng:///DynamicTestModule/UserActivitiesComponent.html@160:18
Error: Template parse errors:
The pipe 'paginate' could not be found ("

    <div class="row row-style"
      *ngFor="let [ERROR ->]item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsC"): ng:///DynamicTestModule/UserActivitiesComponent.html@160:18
    at syntaxError (http://localhost:9877/_karma_webpack_/webpack:/Users/kannan/openmindcvs/primecast-web/node_modules/@angular/compiler/esm5/compiler.js:485:22)
    a

the following is my angular test class.

describe('UserActivitiesComponent', () => {
  let component: UserActivitiesComponent;
  let fixture: ComponentFixture<UserActivitiesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule(
      
      {
      imports: [
         HttpClientTestingModule,
         ReactiveFormsModule,
         TranslateModule.forRoot(),
         RouterTestingModule
      ],
      declarations: [ UserActivitiesComponent ,
                MomentDateTimePipe
      ],
      providers: [ 
        AccountsService,
        UsersService,
        AuditService,
        AuthenticationService,
        { provide: ConfigService, useClass: ConfigServiceMock }
      ],
      schemas: [NO_ERRORS_SCHEMA]

      }
    )
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserActivitiesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

I am just providing part of my user-activities.component.ts is below.

@Component({
  selector: 'pc-user-activities',
  templateUrl: './user-activities.component.html',
  styleUrls: ['./user-activities.component.scss']
})
export class UserActivitiesComponent implements OnInit {

  pageNumber: number = 1;
  result: any[] ; 
  totalItemsCount = 0;
  pageSizes = [10, 25, 50, 100];
  pageSize = 10;
  offset = 0;

  sortBy="createdOn"
  sortDir="desc"

  minStartDate: Moment;
  maxEndDate: Moment;

  constructor(private fb: FormBuilder, private accountService: AccountsService, 
    private usersService: UsersService, private auditService: AuditService,
    private authenticationService: AuthenticationService, private configService: ConfigService) {
  }


  ngOnInit() {
}

}

The component html template use ngx-pagination.

  <ng-container *ngIf="result && result.length > 0">


    <div class="row row-style"
      *ngFor="let item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsCount }">

      <div class="col-2 row-cell">
        {{ item['createdOn'] | date: 'medium' }} 
      </div>

      <div class="col-2 row-cell">
        {{ item['firstName'] }} 
      </div>

      <div class="col-2 row-cell">
         {{ item['lastName'] }} 
      </div>

      <div class="col-2 row-cell">
        {{ 'LABELS.AUDIT.ACTION.' + item['type'] | translate }}
      </div>
  </ng-container>

 <div class="row">
      
      <div class="col-3 row-cell text-left text-muted">

          <span>
            {{ 'DATA_GRID.SHOWING' | translate }}
            <strong>
              {{ calculateLowerRange() }} - {{ calculateUpperRange() }}</strong
            >
            {{ 'DATA_GRID.OF' | translate }}
            <strong>{{ totalItemsCount }}</strong>
            <select
              class="custom-select custom-select-sm page-size-select"
              #pageSizeSelect
              (change)="pageSizeChanged($event.target.value)"
            >
              <option *ngFor="let size of pageSizes" [ngValue]="size">{{
                size
              }}</option>
            </select>
          </span>
      </div>

      <div class="col-9 row-cell">
        <p class="float-right">
          <pagination-controls class="my-pagination" previousLabel="Previous" nextLabel="Next"
            (pageChange)="pageChanged($event)"></pagination-controls>
        </p>
      </div>
    </div>

I have added the NgxPaginationModule in the app.module.ts.

appreciate if you can help me in fixing this issue.

Answer 1

Adding NgxPaginationModule in app.module.ts won't solve unittest issue. Since unittest creates its own testing module and there also it should be registered as you do with NgModule.

Try below code:

beforeEach(async(() => {
    TestBed.configureTestingModule(
      
      {
      imports: [
         HttpClientTestingModule,
         ReactiveFormsModule,
         TranslateModule.forRoot(),
         RouterTestingModule,
         NgxPaginationModule
      ],
...