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

When I run the ng test on this spec file it fail with this error:

Failed: The pipe 'async' could not be found!

I have tried to fakesync() the test and still the same

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();
  });
});

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

Very Simple ts file used NGRX

@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);
  }
}

enter image description here

angularunit-testingkarma-jasmine


Solution 1:[1]

I was thinking that the testing unit has an error, but actually, the HTML was not right

it passes the test after removed async from the HTML 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>

Solution 2:[2]

The message:

The pipe 'async' could not be found

Probably refers to your use of observable$ | async in your HTML

This probably relates to you failing to import the correct modules in your spec file.

My advice is, just import the module you are working on itself inside the spec file and not individual modules (unless they are root level, in which case they will need to be imported) and that should work. Also, if you import the module you are working on and the component you are testing is declared in that module then you will need to remove the component declaration from your spec file.

Solution 3:[3]

I was facing a similar issue, in my case, I was using the ngrxPushpipe.

The pipe 'ngrxPush' could not be found!

The issue was persisting even though I've imported the correct module i.e. ReactiveComponentModule which contains the ngrxPushin spec.ts file.

In my case, the error got resolved when I fixed the mockStore's config(added the missing initialState attribute).

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

I believe the stack trace provided by Angular is misleading.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mansour Alnasser
Solution 2 danday74
Solution 3 Rajat Badjatya

Related Questions