Angular Pipe could not be found in Jasmine test - angular6

Question

I'm getting an error using Jasmine to test one of my angular 6 components:
The pipe 'paginate' could not be found ("]Item of activityLogDisplay.data | paginate: config; let index = index" (click)="): ng:///DynamicTestModule/ActivitylogComponent.html#59:34
'pagination-controls' is not a known element:
I'm using NgxPaginationModule that I installed with the following command:
npm install ngx-pagination --save
So, note that I'm not using a custom pipe that I created myself, I'm using one that belongs to a package that I downloaded. My component test is failing on the use of a pipe and not on testing the pipe itself. Here's what my use of the pagination pipe looks like in my html template:
<li class="list-group-item list-group-item-action"
*ngFor="let alItem of activityLogDisplay.data | paginate: config; let index = index"
(click)="toggleALView(alItem.index)">
Here's what my spec.ts file looks like (pretty much out of the box):
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { ActivitylogComponent } from './activitylog.component';
describe('ActivitylogComponent', () => {
let component: ActivitylogComponent;
let fixture: ComponentFixture<ActivitylogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ActivitylogComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ActivitylogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
I've tried adding the import of NgxPaginationModule to the spec.ts file:
import { NgxPaginationModule } from 'ngx-pagination';
And I've included it in the declarations area of the TestBed config:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ActivitylogComponent, NgxPaginationModule ]
})
.compileComponents();
}));
The error message changes to:
Failed: Unexpected module 'NgxPaginationModule' declared by the module
'DynamicTestModule'. Please add a #Pipe/#Directive/#Component annotation.
In my app.module.ts file, I've got NgxPaginationModule listed in the imports array and not the declarations array:
import { NgxPaginationModule } from 'ngx-pagination';
#NgModule({
declarations: [
AppComponent,
ActivitylogComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgxPaginationModule,
RouterModule.forRoot(appRoutes,{useHash:true})
],
providers: [IndexService, AdminIndexService],
bootstrap: [LandingpageComponent]
})
Any ideas what I need to do to get this test to work?

Answer 1

Figured out my problem. I needed to add NgxPaginationModule as an import to the test bed configureTestingModule area in my spec file:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports : [
NgxPaginationModule
],
declarations: [
ActivitylogComponent
]
})
.compileComponents();
}));

Answer 2

FIX:
Do the following changes:
In your local module add your KeyValue pipe in declarations.
In spec file add KeyValue pipe's class name in declarations.
Add in providers as well if you get error like NullInjectorError: R3InjectorError(DynamicTestModule)[PipeName -> PipeName]: NullInjectorError: No provider for PipeName!.
Your local spec file where error came
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
CommonModule,
RouterTestingModule,
HttpClientTestingModule,
NotifierModule,
ReactiveFormsModule
],
providers: [
ConfigureDeviceComponent
],
declarations: [
// Add your pipe here
]
});
fixture = TestBed.createComponent(ConfigureDeviceComponent);
component = fixture.componentInstance;
component.ngOnInit();
});
Your local module file where your current component is running
#NgModule({
declarations: [...], Include your pipe here
imports: [...],
providers: [...],
bootstrap: [AppComponent]
})
https://stackoverflow.com/a/72787641/10373693