Angular中使用ngx-pagination的Jest单元测试失败排查

我在组件模板中使用了ngx-pagination的Paginate管道，用Jest执行简单的should create测试时，明明已经把NgxPaginationModule加入到TestBed的configureTestingModule的imports里，还是出现了PaginatePipe_Factory相关的依赖注入错误。

我的.spec.ts文件 #

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

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [DeviceSitesListComponent, PaginatePipe],
            providers: [DevicesService],
            imports: [
                HttpClientModule, RouterTestingModule, ReactiveFormsModule, TranslateModule.forRoot(),
                ToastrModule.forRoot(), MatSidenavModule, BrowserAnimationsModule, FormsModule, MatPaginatorModule, NgxPaginationModule
            ]
        })
            .compileComponents();
    });

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

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

报错信息 #

NG0202: 该构造函数与Angular依赖注入不兼容，因为参数列表中索引0处的依赖项无效。
这种情况可能发生在依赖项类型是字符串之类的原始类型，或者该类的某个祖先缺少Angular装饰器。

请检查：1) 索引0处参数的类型是否正确；2) 此类及其祖先是否定义了正确的Angular装饰器。

      at ɵɵinvalidFactoryDep (node_modules/@angular/core/fesm2020/core.mjs:4798:11)
      at PaginatePipe_Factory (ng:\PaginatePipe\ɵfac.js:5:40)
      at ɵɵpipe (node_modules/@angular/core/fesm2020/core.mjs:22631:30)
      at DeviceSitesListComponent_Template (ng:/DeviceSitesListComponent.js:348:9)
      at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:12114:9)
      at renderView (node_modules/@angular/core/fesm2020/core.mjs:11914:13)
      at renderComponent (node_modules/@angular/core/fesm2020/core.mjs:13122:5)
      at renderChildComponents (node_modules/@angular/core/fesm2020/core.mjs:11773:9)
      at renderView (node_modules/@angular/core/fesm2020/core.mjs:11939:13)
      at ComponentFactory.create (node_modules/@angular/core/fesm2020/core.mjs:13926:13)
      at initComponent (node_modules/@angular/core/fesm2020/testing.mjs:26284:51)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing.umd.js:303:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:408:56)
      at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:26291:33)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone.umd.js:169:47)
      at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:26145:28)
      at TestBedImpl.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26287:41)
      at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26095:37)
      at src/app/modules/administration/device-management/components/device-sites/device-sites-list/device-sites-list.component.spec.ts:33:23
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing.umd.js:303:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone.umd.js:169:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing.umd.js:803:34)

测试套件: 1 失败, 1 总
测试用例: 1 失败, 1 总
快照: 0 总
耗时: 5.512 s

问题原因与解决方法 #

问题出在你同时在declarations数组里手动声明了PaginatePipe，又在imports里导入了NgxPaginationModule。NgxPaginationModule本身已经导出了PaginatePipe并配置好了它的依赖，重复声明会导致Angular的DI容器无法正确解析管道的依赖，从而抛出NG0202错误。

只需做一个修改：

• 从declarations中移除PaginatePipe，保留NgxPaginationModule在imports中即可。

修改后的.spec.ts代码：

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

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [DeviceSitesListComponent], // 移除PaginatePipe
            providers: [DevicesService],
            imports: [
                HttpClientModule, RouterTestingModule, ReactiveFormsModule, TranslateModule.forRoot(),
                ToastrModule.forRoot(), MatSidenavModule, BrowserAnimationsModule, FormsModule, MatPaginatorModule, NgxPaginationModule
            ]
        })
            .compileComponents();
    });

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

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

内容的提问来源于stack exchange，提问作者Doaa Ahmed