角度/测试单元：失败：找不到管道“异步”

Question

当我在此规范文件上运行 ng test 时，它失败并显示以下错误：

失败：找不到管道“异步”！

我已尝试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 中的异步

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

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

Answer 2

我以为测试单元有错误，但实际上，HTML 不对

从 HTML async 中删除 ngFor 后通过测试

 <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>