Angular运行UserActivitiesComponent测试找不到paginate管道如何解决？

你在AppModule中引入NgxPaginationModule仅对生产环境运行的全局模块生效，Angular单元测试的TestBed配置的是独立的测试模块上下文，不会自动继承全局模块的导入/声明/提供者，所以测试环境无法识别paginate管道和<pagination-controls>组件。你配置的NO_ERRORS_SCHEMA只会忽略测试模板中未知的HTML元素和元素属性，不会处理未知的管道报错，所以即使加了这个配置，找不到paginate管道的报错依旧会触发。

你可以根据测试需求选择任意一种方案：

方案1：在测试模块中导入NgxPaginationModule（推荐，最贴近真实运行环境） #

修改测试类中TestBed的imports数组，加入NgxPaginationModule即可：

imports: [
   HttpClientTestingModule,
   ReactiveFormsModule,
   TranslateModule.forRoot(),
   RouterTestingModule,
   NgxPaginationModule // 新增这行
],

这种方式不需要调整其他配置，测试环境会和生产环境一样加载完整的分页组件逻辑，适合需要验证分页功能的测试场景。

方案2：Mock分页相关的管道和组件（适合不需要测试分页逻辑的场景） #

如果你当前的测试用例不需要验证分页功能，可以自行mock对应的管道和组件，避免引入完整模块的额外依赖：

1. 先在测试文件顶部声明mock的管道和组件：

import { Pipe, PipeTransform, Component } from '@angular/core';

@Pipe({name: 'paginate'})
class MockPaginatePipe implements PipeTransform {
  transform(value: any[]): any[] {
    return value;
  }
}

@Component({selector: 'pagination-controls', template: ''})
class MockPaginationControlsComponent {}

2. 把这两个mock类添加到测试模块的declarations数组中：

declarations: [ 
  UserActivitiesComponent,
  MomentDateTimePipe,
  MockPaginatePipe, // 新增mock管道
  MockPaginationControlsComponent // 新增mock组件
],

内容的提问来源于stack exchange，提问作者Starbucks Admin