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