Angular Jest the pipe 'async' could not be found

Question

I have angular 14 with jest version 28 and spectator, when testing component that has async pipe in it like so:

<aside class="sidebar" [style.width]="(sidebarCollapseState$ | async) ? '10rem' : '25.5rem'">
  <fmrs-side-menu
    [items]="menuItems"
  ></fmrs-side-menu>
  <p-divider></p-divider>
  <section class="sidebar__widget-container">
    <ng-content></ng-content>
  </section>
</aside>

as you can see sidebarCollapseState$ is an observable, and I am passing it to html. when I run test file I get an error like this one:

NG0302: The pipe 'async' could not be found in the 'SidebarComponent' component. Verify that it is declared or imported in this module. Find more at https://angular.io/errors/NG0302

      at getPipeDef (node_modules/@angular/core/fesm2020/core.mjs:22642:15)
      at ɵɵpipe (node_modules/@angular/core/fesm2020/core.mjs:22598:19)
      at SidebarComponent_Template (ng:/SidebarComponent.js:12:9)
      at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:12126:9)
      at renderView (node_modules/@angular/core/fesm2020/core.mjs:11948:13)
      at renderComponent (node_modules/@angular/core/fesm2020/core.mjs:13134:5)
      at renderChildComponents (node_modules/@angular/core/fesm2020/core.mjs:11807:9)
      at renderView (node_modules/@angular/core/fesm2020/core.mjs:11973:13)
      at ComponentFactory.create (node_modules/@angular/core/fesm2020/core.mjs:13913:13)
      at initComponent (node_modules/@angular/core/fesm2020/testing.mjs:26267:51)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:26274:33)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:26128:28)
      at TestBedImpl.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26270:41)
      at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:26078:37)
      at createSpectator (node_modules/@ngneat/spectator/fesm2020/ngneat-spectator.mjs:1533:29)
      at node_modules/@ngneat/spectator/fesm2020/ngneat-spectator.mjs:1525:27
      at src/app/layout/components/sidebar/sidebar.component.spec.ts:36:17
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4330:34)

I have no contact with html file in tests, here is the test file:

sidebar.component.spec.ts

describe('SidebarComponent', () => {
  let spectator: Spectator<SidebarComponent>

  const createComponent = createComponentFactory({
    component: SidebarComponent,
    declareComponent: false,
    imports: [
      HttpClientTestingModule,
      FormsModule,
      ReactiveFormsModule,
      RouterTestingModule
    ],
    providers: [
      mockProvider(ReactiveFormsModule),
      mockProvider(AuthService),
      mockProvider(EnvironmentConfigurationService),      
      provideMockStore({ initialState })
    ],
    schemas: [NO_ERRORS_SCHEMA]
  });

  beforeEach(() => {
    spectator = createComponent();
  });

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

here are also jest configurations:

jest.config.js

module.exports = {
  preset: "jest-preset-angular",
  globalSetup: "jest-preset-angular/global-setup",
  moduleNameMapper: {
    "@shared/(.*)": "<rootDir>/src/app/shared/$1",
    "@core/(.*)": "<rootDir>/src/app/core/$1",
    '^src/(.*)': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ["<rootDir>/src/setup-jest.ts"],
  testMatch: ["**/+(*.)+(spec).+(ts|js)?(x)"],
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!.*.mjs$)"
  ],
  transform: {
    "^.+\\.(ts|js|html)$": "jest-preset-angular",
  },
  collectCoverage: true,
  collectCoverageFrom: [
    "<rootDir>/src/app/**/*.component.ts",
    "!<rootDir>/src/app/**/*.component.html",
    "<rootDir>/src/app/**/*.service.ts",
    "!<rootDir>/src/app/**/*.pipe.ts",
    "!<rootDir>/src/app/**/*.directive.ts",
    "!<rootDir>/src/app/**/*.module.ts",
    "!<rootDir>/src/app/core/**",
    "!<rootDir>/dist/**",
    "!<rootDir>/src/app/shared/**",
    "!<rootDir>/src/app/auth/**"
  ],
  coverageReporters: ["html", "cobertura", "lcov", "text"],
  reporters: ["jest-junit", "default"],
  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
  testRunner: "jest-jasmine2",
};

When I remove async pipe from html the error is gone but I need it to be there

Answer 1

In my case I was using NO_ERROR_SCHEMA in spec files and it was hiding specific errors that were the root cause of that error, completly unrelated but it was the reason, once I fixed those errors that async pipe error went away.