Angular/Testing 单元：失败：找不到管道 'async'

Question

当我运行此规范文件上的 ng test 时，它因以下错误而失败：

失败：找不到管道 'async'！

我试过fakesync()测试还是一样

describe('ProductSinglePage', () => {
  let component: ProductSinglePage;
  let fixture: ComponentFixture<ProductSinglePage>;
  let store: MockStore;
  const initialState = { keyvalue: false };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProductFormPage],
      imports: [CommonModule, RouterTestingModule, IonicModule.forRoot()],
      providers: [
        provideMockStore({
          initialState,
          selectors: [
            {
              selector: getProductById,
              value: 1
            }
          ]
        }),
      ],
    }).compileComponents();

    store = TestBed.inject(MockStore);

    fixture = TestBed.createComponent(ProductSinglePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));
  afterEach(() => {
    fixture.destroy();
  });

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

非常简单Html

 <ion-list>
    <ion-item *ngFor="let product of (product$ | async) ">
      <ion-label> <b>{{product.key}}</b> : <b>{{product.value}}</b></ion-label>
    </ion-item>
  </ion-list>

使用 NGRX 的非常简单的 ts 文件

@Component({
  selector: 'app-product-single',
  templateUrl: './product-single.page.html',
  styleUrls: ['./product-single.page.scss'],
})
export class ProductSinglePage implements OnInit {
  product$: Observable<ProductInterface>;

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.product$ = this.store.select(getProductById);
  }
}

Answer 1

留言：

找不到管道 'async'

可能是指你使用了observable$ |在你的 HTML

中异步

这可能与您未能在规范文件中导入正确的模块有关。

我的建议是，只需在 spec 文件中导入您正在处理的模块本身，而不是单独的模块（除非它们是根级别，在这种情况下，它们将需要导入）并且应该可以工作。此外，如果您导入正在处理的模块并且正在测试的组件已在该模块中声明，那么您将需要从规范文件中删除组件声明。

Answer 2

我以为是测试单元出错了，其实HTML不对

从 HTML ngFor

中删除 async 后通过测试

 <ion-list>
    <ion-item *ngFor="let product of product$ ">
      <ion-label> <b>{{product.key}}</b> : <b>{{product.value}}</b></ion-label>
    </ion-item>
  </ion-list>

Answer 3

我遇到了类似的问题，就我而言，我使用的是 ngrxPush 管道。

The pipe 'ngrxPush' could not be found!

即使我导入了正确的模块，即 ReactiveComponentModule，其中包含 ngrxPushin spec.ts 文件，问题仍然存在。

就我而言，当我修复 mockStore 的配置（添加缺少的 initialState 属性）时错误得到解决。

  providers: [
    provideMockStore(
      {
        initialState: {
          changePassword: false
        }
      })
  ]

我认为 Angular 提供的堆栈跟踪具有误导性。

Angular/Testing 单元：失败：找不到管道 'async'

Angular/Testing unit: Failed: The pipe 'async' could not be found

unit-testing

karma-jasmine

angular

失败：找不到管道 'async'！